# Label

Names a form control; clicking it focuses or toggles the control.

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

<div className="flex items-center gap-2">
  <Checkbox id="terms" defaultChecked />
  <Label htmlFor="terms">I accept the terms of service</Label>
</div>
```

## Usage

### What you provide
- `htmlFor` pointing to the control's `id`. Clicking the label focuses or toggles the control.
- Sentence case, no colon: "Full name", not "Full Name:".
- Optional fields: add "(optional)" in `text-muted-foreground`. Don't mark required fields with an asterisk.

## Accessibility

- Every control has a label that is programmatically associated with it (`htmlFor` / `id`, or `FieldLabel` inside `Field`).
- Clicking or tapping the label focuses or toggles its control, so the label is part of the touch target.
- Inside `Field`, optional fields show "(optional)" automatically; required fields also get `required` on the control.

_Adapted from Magoo 1.6.0 by Marcelo Sales: [Input "text"](https://magoo.cc/en/components/forms/input-text.html) (`input-text`), [Checkbox](https://magoo.cc/en/components/forms/checkbox.html) (`checkbox`). Magoo is educational guidance; test the behavior in your implementation._

## API

Install:

```bash
npx @aline-aroucha/pui add label
```

```tsx
<Label htmlFor="id" />
<Control id="id" />
```

### Label

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `htmlFor` (required) | `string` | — | The id of the control it names. |
| `children` (required) | `ReactNode` | — | Sentence-case text, no colon. |

## Related pages

- [Field](https://aline-aroucha.github.io/pui/components/field.html)
- [Checkbox](https://aline-aroucha.github.io/pui/components/checkbox.html)
- [Switch](https://aline-aroucha.github.io/pui/components/switch.html)

---
PUI documentation · https://aline-aroucha.github.io/pui/components/label.html