Form Inputs

Text input fields for collecting user data. All inputs meet WCAG 2.1 Level AA with proper labels, focus states, and error handling.

Text Input Variants

Default Input

With Value

Disabled

With ErrorThis field is required

Input Sizes

Small

Medium (Default)

Large

Input with Icons

With Left Icon

With Right Icon

Textarea

Default Textarea

With Character Count0 / 200

Token Mapping

How tokens flow through the three-layer system: value → primitive → semantic → component.

Background

#18181b→zinc-900→--secondary→--input-bg

Text

#e4e4e7→zinc-200→--foreground→--input-text

Border

#27272a→zinc-800→--border→--input-border

Placeholder

#52525b→zinc-600→--muted-foreground→--input-placeholder

Focus border

#3f3f46→zinc-700→--ring→--input-focus-border

Focus ring

#3f3f46→zinc-700→--ring→--input-focus-ring

Label

#d4d4d8→zinc-300→--foreground→--input-label

PrimitiveSemanticComponent

Background

#18181b→zinc-900→--secondary→--textarea-bg

Text

#e4e4e7→zinc-200→--foreground→--textarea-text

Border

#27272a→zinc-800→--border→--textarea-border

Placeholder

#52525b→zinc-600→--muted-foreground→--textarea-placeholder

Focus border

#3f3f46→zinc-700→--ring→--textarea-focus-border

Label

#d4d4d8→zinc-300→--foreground→--textarea-label

PrimitiveSemanticComponent

Accessibility Guidelines

✓

Labels RequiredEvery input must have an associated label element or aria-label.

✓

Error MessagesError states must be announced to screen readers using aria-invalid and aria-describedby.

✓

Focus VisibleClear focus indicator with 3:1 contrast ratio.

✓

Placeholder Not LabelPlaceholder text supplements but doesn't replace labels.