How to build an accessible Input in React

The label is associated to the input via htmlFor/id, error text is linked through aria-describedby and announced with role="alert", and aria-invalid is set when an error is present so assistive tech reports the field as erroneous; visual focus state is driven by CSS, not tracked imperatively.

When to use a Input

• Collecting a single line of free-form text from the user
• Pairing a labelled field with optional hint and validation error messaging
• As a field control inside a Form, wired via form.field()

When not to use it

• Multi-line text — use Textarea
• Choosing from a fixed list of options — use Select, Combobox, or MultiSelect
• Editing one read-only value in place — use Editable

Keyboard interactions

Role textbox, verified at WCAG 2.2-AA.

• Tab
• Shift+Tab

Common mistakes

Avoid: <Input placeholder="Email" /> with no label

Prefer: <Input label="Email" placeholder="[email protected]" />

Placeholder text disappears on input and is not a substitute for a persistent, programmatically associated label

Example

<Input label="Email" placeholder="[email protected]" />

See the full Input reference →