noLabelWithoutControl

import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs> <TabItem label="JSX and TSX" icon="seti:javascript"> ## Summary - Rule available since: `v1.8.0` - Diagnostic Category: [`lint/a11y/noLabelWithoutControl`](/reference/diagnostics#diagnostic-category) - This rule is **recommended**, meaning it is enabled by default. - This rule doesn't have a fix. - The default severity of this rule is [**error**](/reference/diagnostics#error). - Sources: - Same as [`jsx-a11y/label-has-associated-control`](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/label-has-associated-control.md)

How to configure

json

{
	"linter": {
		"rules": {
			"a11y": {
				"noLabelWithoutControl": "error"
			}
		}
	}
}

Description

Enforce that a label element or component has a text label and an associated input.

An "input" is considered one of the following elements: input, meter, output, progress, select, textarea or button.

There are two supported ways to associate a label with an input:

Wrapping an input in a label element.
Adding a for attribute (or htmlFor in React) to a label and assigning it a DOM ID string associated with an input on the page.

This rule checks that any label element (or an indicated custom component that will output a label element) meets one of these conditions:

Wraps an input element (or an indicated custom component that will output an input element)
Has a for or htmlFor attribute and that the label element/component has accessible text content.

Examples

Invalid

jsx

<label for="js_id" />;

jsx

<label for="js_id"><input /></label>;

<pre class="language-text"><code class="language-text">code-block.jsx:1:1 <a href="https://biomejs.dev/linter/rules/no-label-without-control">lint/a11y/noLabelWithoutControl</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✖ A form label must be associated with an input. > 1 │ <label for="js_id"><input /></label>; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 2 │ ℹ Consider adding an accessible text content to the label element. </code></pre>

jsx

<label htmlFor="js_id" />;

<pre class="language-text"><code class="language-text">code-block.jsx:1:1 <a href="https://biomejs.dev/linter/rules/no-label-without-control">lint/a11y/noLabelWithoutControl</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✖ A form label must be associated with an input. > 1 │ <label htmlFor="js_id" />; │ ^^^^^^^^^^^^^^^^^^^^^^^^^ 2 │ ℹ Consider adding an accessible text content to the label element. </code></pre>

jsx

<label htmlFor="js_id"><input /></label>;

<pre class="language-text"><code class="language-text">code-block.jsx:1:1 <a href="https://biomejs.dev/linter/rules/no-label-without-control">lint/a11y/noLabelWithoutControl</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✖ A form label must be associated with an input. > 1 │ <label htmlFor="js_id"><input /></label>; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 2 │ ℹ Consider adding an accessible text content to the label element. </code></pre>

jsx

<label>A label</label>;

jsx

<div><label /><input /></div>;

<pre class="language-text"><code class="language-text">code-block.jsx:1:6 <a href="https://biomejs.dev/linter/rules/no-label-without-control">lint/a11y/noLabelWithoutControl</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✖ A form label must be associated with an input. > 1 │ <div><label /><input /></div>; │ ^^^^^^^^^ 2 │ ℹ Consider adding an accessible text content to the label element. ℹ Consider adding a `for` or `htmlFor` attribute to the label element or moving the input element to inside the label element. </code></pre>

Valid

jsx

<label for="js_id" aria-label="A label" />;
<label for="js_id" aria-labelledby="A label" />;
<label htmlFor="js_id" aria-label="A label" />;
<label htmlFor="js_id" aria-labelledby="A label" />;
<label>A label<input /></label>;
<label>A label<textarea /></label>;
<label><input /></label>;

Options

The rule supports the following options:

inputComponents - An array of component names that should be considered the same as an input element.
labelAttributes - An array of attributes that should be treated as the label accessible text content.
labelComponents - An array of component names that should be considered the same as a label element.

Both options inputComponents and labelComponents don't have support for namespace components (e.g. <Control.Input>).