jsx-a11y/label-has-associated-control
Require every label to wrap its form control or point at one with htmlFor.
- Category: Accessibility
- Severity: warn
- Source:
oxlint-builtin:jsx-a11y - Framework: global
- Enabled when: always (unless customRulesOnly=true)
- Documentation: https://oxc.rs/docs/guide/usage/linter/rules/jsx_a11y/label-has-associated-control
Validation prompt
Use this to decide whether a fired diagnostic is real or a false positive.
Fires when a <label> neither wraps an input/select/textarea (or configured control component) nor has an htmlFor pointing at one, or when the label has no accessible text content. The rule walks children up to depth (default 2). False positive: a custom Label/Input pair where labelComponents and controlComponents are not configured for your design system.
Fix prompt
Use this once validation confirms the diagnostic is real.
Either wrap the control inside the label (<label>Surname <input type='text' /></label>) or use htmlFor with a matching id (<label htmlFor='surname'>Surname</label><input id='surname' />). Ensure the label has visible text. For custom components, configure labelComponents/controlComponents/labelAttributes in the rule options. See https://oxc.rs/docs/guide/usage/linter/rules/jsx_a11y/label-has-associated-control
Related rules
More Accessibility rules from the rules reference:
react-doctor/alt-text: Require alternative text on img, area, input[type='image'], and object elements so screen readers can describe them.react-doctor/anchor-ambiguous-text: Describe a link's destination — avoid bare 'click here' / 'learn more' / 'link' as the only link text.react-doctor/anchor-has-content: Add visible or aria-labelled text inside every `<a>`.react-doctor/anchor-is-valid: Require anchors to navigate to a real destination — use a button for click-only actions instead of href='#' or javascript:void(0).react-doctor/aria-activedescendant-has-tabindex: Add `tabIndex` to elements with `aria-activedescendant` so they're keyboard-focusable.