Label
A caption bound to a control, for the cases `Field` does not own.
@luc/uiExamples
A label bound to a control
`htmlFor` is the whole contract: the label is clickable, the field is named, and `required` marks the control for a reader as well as drawing the asterisk.
<Label htmlFor="instrument" required>Instrument</Label>
<Input id="instrument" defaultValue="BTCUSD" />The dense size
`sm` is for a settings row or a toolbar, where the label is a caption rather than a heading.
<Label htmlFor="notional" size="sm">Notional</Label>
<Input id="notional" defaultValue="120000" />When `Field` already does it
Inside `Field` this component is not needed — `Field` renders the label, owns the id and wires the description and the message. Reach for `Label` for the cases `Field` does not own: a control outside a form, or a name for a group.
Ticker in BASE/QUOTE form
<Field label="Instrument" description="Ticker in BASE/QUOTE form" required>
<Input defaultValue="BTC/USD" />
</Field>Usage
import { Label } from "@luc/ui";<Label htmlFor="notional">Notional</Label>Reach for `Field` first: it renders its own label and owns the id, the description and the message. This component is for the cases `Field` does not own.
Package setup — peer requirements, the stylesheet and the provider — is on installation.
API
Read from the published TypeScript API, so a prop that is not listed here does not exist and a default that is listed is the one the compiler sees.
| Export | Kind | Signature |
|---|---|---|
Label | 3 documented props | ({ className, children, required, size, "aria-disabled": ariaDisabled, ...props }: LabelProps) => import("@types/react").JSX.Element |
Label props
Type: LabelProps
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
asChild?inherited | boolean | undefined | — | |
required? | boolean | undefined | — | Renders the asterisk *and* marks the control as required for a reader. |
size? | "sm" | "md" | undefined | — | Muted, smaller label for a dense toolbar or a settings row. |
Guidelines
Do
- Reach for `Field` when a control sits in a form; reach for `Label` when it does not — a toolbar control, a group's name, a field a page wires itself.
- Keep `htmlFor` pointing at a real `id`: the binding is the whole contract, and it is also what makes the text clickable.
- Use `required` rather than drawing an asterisk yourself: it marks the control for a reader as well.
Don't
- Use a `Label` beside a `Field` — the field already renders one, and two labels for one control name it twice.
- Put a label in a placeholder instead; a placeholder is an example, not a name.
- Bind two labels to one control: `aria-labelledby` picks one and the other becomes noise.
Accessibility
`htmlFor` is bound to the control's `id`, so the text is clickable and the accessible name comes from the label rather than from the placeholder. `required` sets the required state for a reader as well as rendering the asterisk.
Family
Forms
Inputs, their validation surfaces and the form lifecycle around them.
24 documented entries in this family. Open the family index
Related