How to build an accessible Label in React
Renders a native <label> so the platform handles click-to-focus and accessible naming; the required marker pairs an aria-hidden asterisk with visually-hidden localized text so the requirement is both seen and announced
When to use a Label
- Naming a single form control (input, select, checkbox) so clicking the text focuses it
- Marking a field as required with a visible and screen-reader-announced indicator
When not to use it
- Labeling a group of controls — use a <fieldset>/<legend> instead
- Static body copy that is not associated with a control — use a plain text element
Accessibility
Role label, verified at WCAG 2.2-AA.
Common mistakes
Avoid: <Label>Email</Label><input id="email" />
Prefer: <Label htmlFor="email">Email</Label><input id="email" />
Without htmlFor the label is not programmatically associated, so click-to-focus and screen-reader naming break
Avoid: <Label required>Email <span>*</span></Label>
Prefer: <Label required>Email</Label>
The required marker is rendered for you with an accessible text alternative; a hand-added asterisk is silent to screen readers
Example
<Label htmlFor="email">Email</Label>