Label

<div className="grid w-full max-w-xs gap-2">
  <Label htmlFor="asset-hostname">Hostname</Label>
  <Input id="asset-hostname" placeholder="web-prod-01" />
</div>

Usage

import { Input } from "@zenoxai/ui/components/input"
import { Label } from "@zenoxai/ui/components/label"

<Label htmlFor="asset-hostname">Hostname</Label>
<Input id="asset-hostname" />

Label is a styled native <label>. Associate it with its control in one of two ways: set htmlFor to the control’s id, or nest the control inside the label.

In a form, use FieldLabel from Field instead. It is the same element with the spacing, the disabled dimming and the invalid color of a field. Use Label on its own for a control outside a form, such as a filter toggle in a toolbar.

Write labels as a noun or a short phrase, in sentence case, without a trailing colon.

Examples

Wrapping a checkbox

Nesting the control makes the whole label clickable without an id. The label lays out its children in a row with an 8px gap.

<Label>
  <Checkbox defaultChecked />
  Show resolved alerts
</Label>

Accessibility

• A label with htmlFor or a nested control gives that control its accessible name and forwards clicks to it. Base UI controls that render a <span> (Checkbox, Radio Group, Switch) resolve the label through their hidden input, so both patterns work for them too.
• htmlFor does not reach a Slider thumb. Give the label an id and pass it to the slider as aria-labelledby.
• Do not put links or buttons inside a label: a click on them also toggles the control.

API reference

Generated from the TypeScript source. className, style and children are accepted everywhere and omitted below.