A native label for a control, which dims when the control is disabled.
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