# Label: Checkbox

> Wrap a checkbox so the whole label toggles it, or place the label beside it with htmlFor. A disabled checkbox dims its label either way.

Example: https://hextaui.com/docs/label/examples/checkbox
Component docs: https://hextaui.com/docs/label.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/label-checkbox.json
```

This adds `components/examples/label/checkbox.tsx` with the Label component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/label/checkbox.tsx"
import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"

export function LabelCheckbox() {
  return (
    <div className="flex flex-col gap-4">
      <Label>
        <Checkbox defaultChecked />
        Email me when someone replies
      </Label>
      <Label>
        <Checkbox disabled />
        Weekly digest (coming soon)
      </Label>
      <div className="flex items-center gap-2">
        <Checkbox id="label-checkbox-terms" />
        <Label htmlFor="label-checkbox-terms">Accept the terms</Label>
      </div>
    </div>
  )
}
```

## Props in this example

### Label

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `htmlFor` | `string` | – | The id of the control. Leave it out when the label wraps the control. |

## More Label examples

- [Follows its control](https://hextaui.com/docs/label/examples/states.md)
- [Required and optional](https://hextaui.com/docs/label/examples/indicator.md)
- [Icon](https://hextaui.com/docs/label/examples/icon.md)
- [Long content](https://hextaui.com/docs/label/examples/long-content.md)
- [Right to left](https://hextaui.com/docs/label/examples/rtl.md)