# Label

The visible name of a form control, read by screen readers and clickable to focus or toggle the control.

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

function LabelDemo() {
  return (
    <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

```tsx
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](/components/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.

```tsx
import { Checkbox } from "@zenoxai/ui/components/checkbox"
import { Label } from "@zenoxai/ui/components/label"

function LabelWithCheckbox() {
  return (
    <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](/components/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

`import { ... } from "@zenoxai/ui/components/label"`

### Label

No props of its own.