jsx-a11y/label-has-associated-control

• 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