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

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.