# Label

The visible name of a form control.

- **Import:** `import { Label } from "@booleanpress/ui/label"`
- **Radix Label:** <https://www.radix-ui.com/primitives/docs/components/label>
- **Page:** <https://ui.booleanpress.com/components/label> · @booleanpress/ui 0.1.0

## Usage

`Label` renders a native `label`. Set `htmlFor` to the control's `id`: the label names the control, and clicking it focuses or toggles the control.

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

export function FromName() {
  return (
    <div className="flex flex-col gap-2">
      <Label htmlFor="from-name">From name</Label>
      <Input id="from-name" />
    </div>
  )
}
```

Inside a `Field`, use `FieldLabel`, which is a `Label` with the field's layout. To dim a label when its control is disabled, put `peer` on the control and render the label after it, or set `data-disabled="true"` on a parent with the `group` class.

## Examples

### Basic

A label above a text input.

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

export default function LabelBasic() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <Label htmlFor="from-name">From name</Label>
      <Input id="from-name" defaultValue="Acme Support" />
    </div>
  )
}
```

### With a checkbox

The label sits beside the box; clicking it toggles the box.

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

export default function LabelWithCheckbox() {
  return (
    <div className="flex items-center gap-2">
      <Checkbox id="log-bodies" defaultChecked />
      <Label htmlFor="log-bodies">Keep the message body in the log</Label>
    </div>
  )
}
```

### Disabled

The label dims with a disabled `peer` control, or inside a `group` marked `data-disabled`.

```tsx
import { Checkbox } from "@booleanpress/ui/checkbox"
import { Input } from "@booleanpress/ui/input"
import { Label } from "@booleanpress/ui/label"

export default function LabelDisabled() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <div className="flex items-center gap-2">
        <Checkbox id="auto-retry" className="peer" disabled />
        <Label htmlFor="auto-retry">Retry failed sends</Label>
      </div>
      <div className="group flex flex-col gap-2" data-disabled="true">
        <Label htmlFor="retry-limit">Retry limit</Label>
        <Input id="retry-limit" defaultValue="3" disabled />
      </div>
    </div>
  )
}
```

## Accessibility

**Semantics.** A native `label` element. Radix Label also stops the text from being selected when it is double-clicked.

**Labels.** A label is the name. Keep its text short and specific, and unique on the page when the controls differ.

**Focus.** A label is not focusable. Clicking it moves focus to its control.

**Known limits.**

- A label without `htmlFor` (or a control inside it) names nothing.

### Keyboard

| Key | Behaviour |
| --- | --- |

## API

### Label

Renders Radix Label.Root and passes it every other prop.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `asChild` | `boolean` |  | Render the child element instead, with this part's behaviour and classes merged onto it. |

Every part takes `className`, merged with its defaults by `cn()`, and `ref`, which reaches the element it renders.

**Data attributes:** `data-slot="label"` (Label).

## Theming