Krawma Design System

Label

uistable

Label — extracted 1:1 from WEM-App.

npx shadcn add @krawma/label

npm: radix-ui@^1.6.1 · registry: @krawma/utils

Preview

Depends on
utils

Purpose

An accessible caption for a form control. Always pair inputs, checkboxes, switches, etc. with a Label — the design system's controls do not render their own label.

Anatomy

A single Radix Label element. Associate it with a control via htmlFor={id} (or by wrapping the control).

Style

No variants. Token-backed text; picks up disabled styling from a peer-disabled control when composed as a peer.

Behavior & functionality

Clicking the label focuses/activates its associated control (native label behavior).

Accessibility

  • Required for every labelable control — either htmlFor/id pairing or wrapping. Without it, the control has no accessible name.
  • Keep label text visible; if a visually-hidden label is unavoidable, use aria-label on the control instead.

Do / Don't

  • ✅ htmlFor must match the control's id.
  • ❌ Don't rely on placeholder text as a substitute for a label.