# Label

A native label for a control, which dims when the control is disabled.

```ehtml Example
import { Label } from "@elements/ui/label";
import { Input } from "@elements/ui/input";
import { Checkbox } from "@elements/ui/checkbox";

<Label htmlFor="email">Email</Label>
<Input value={form.email} attrs={{ id: "email" }} />

<Label><Checkbox checked={form.terms} /> Accept the terms</Label>
```

## Parts

| Part | What it is |
|---|---|
| `.label` | The `<label>`. Usable without the template: class="label". |
| `.label-required` | The required asterisk. |

## Attributes

| Attribute | Type | Default | Description |
|---|---|---|---|
| `htmlFor` | `string` | `""` | The id of the control it names (the for attribute). |
| `required` | `boolean` | `false` | Draws a required asterisk, hidden from assistive tech. |
| `disabled` | `boolean` | `false` | Dims the label when its control is somewhere the CSS cannot see. |
| `class` | `string` | `""` | Extra classes on the label. |
| `attrs` | `Record<string, string \| number \| boolean \| undefined>` | `{}` | id, aria-\*, data-\*. |

## Slots

| Slot | Content |
|---|---|
| `default` | The text, and optionally the control itself. |

## Keyboard

| Keys | Action |
|---|---|
| `Click` | Focuses the named control, or toggles a checkbox, radio or switch. |

## Data attributes

| Attribute | Values | On |
|---|---|---|
| `data-disabled` | present with disabled | label |

## Accessibility

- A native `<label>`: it names its control by for or by wrapping it, and a click reaches the control.
- A double click on the text does not select it, so a fast double toggle of a checkbox stays clean.
- The required asterisk is aria-hidden; set required on the control so it is announced.
- Dims when its control is disabled: wrapped, or the sibling before or after it.

## See also

- [Input](input): A native text input in the theme's control chrome, with a two-way value.
- [Checkbox](checkbox): A native checkbox drawn by the theme, with an indeterminate (mixed) state.
- [ButtonGroup](button-group): Related buttons, or an input and its buttons, joined into one control.
- [InputGroup](input-group): An Input or Textarea with icons, text and buttons inside one box.
- [Textarea](textarea): A native multi-line input that grows with its content, between rows and maxRows.
- [Field](field): A label, a control, a description and an error wired together, with native validation that never moves the layout.