Inputs · §5.3

Text field

40 px default (36 sm, 48 lg), a crisp focus border and a clear error.

Size
State
Theme
Contrast
Language
Motion
Text size

Code

<Field><FieldLabel htmlFor="last">Last name</FieldLabel><Input autoComplete="family-name" id="last" size="lg" /></Field>

Accessibility

  • A visible label above, never a placeholder as label.
  • Errors link with aria-describedby and use the danger icon.

Usage

Do

  • Give inputs autocomplete and inputmode.
  • Errors next to the field and in a summary on submit.

Don't

  • Never the placeholder as the label.

Platforms

Web
apps/web/components/ui/input.tsx, apps/web/components/ui/field.tsx, apps/web/components/ui/label.tsx
iOS
SwiftUI TextField in a Form
Android
Compose OutlinedTextField