Label
A native label for a control, which dims when the control is disabled.
For a control
htmlFor names the control by id; clicking the label focuses it.
Code
<Label htmlFor="email">Email</Label>
<Input type="email" attrs={{ id: "email" }} />Usage
import { Label } from "@elements/ui/label";
<Label htmlFor="email">Email</Label>
<Input value={form.email} attrs={{ id: "email" }} />
<Label><Checkbox checked={form.terms} /> Accept the terms</Label>Examples
Wrapping a control
A wrapped control is labelled without an id. Double clicking the text does not select it.
terms: false
Code
<Label>
<input type="checkbox" checked={state.terms}>
Accept terms and conditions
</Label>Required
An asterisk for sighted users; the control's required is what is announced.
Code
<Label htmlFor="company" required>Company</Label>
<Input required attrs={{ id: "company" }} />Disabled controls
The label dims with its control, whichever side of it the control sits.
Code
<Label htmlFor="locked">Locked</Label>
<Input disabled attrs={{ id: "locked" }} />
<input type="checkbox" disabled id="off">
<Label htmlFor="off">Unavailable option</Label>Right to left
A label and its control follow the inline direction.