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:

• jsx-a11y/no-autofocus: Disallow the autoFocus prop — stolen focus disorients screen-reader and keyboard users.
• jsx-a11y/no-distracting-elements: Disallow deprecated marquee and blink elements, which distract users and can trigger vestibular issues.
• jsx-a11y/no-redundant-roles: Disallow role attributes that duplicate an element's implicit ARIA role, like <button role='button'>.
• jsx-a11y/no-static-element-interactions: Require static elements with click or key handlers to declare an interactive role, or be replaced with a semantic element.
• jsx-a11y/role-has-required-aria-props: Require elements with an ARIA role to carry that role's required aria-* state props, like aria-checked on role='checkbox'.