# Field: Checkboxes

> Use `orientation="horizontal"` to put the checkbox beside its label. Inside a `<FieldSet />`, the legend names the whole group.

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

## Add this example

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

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

## Source

```tsx title="components/examples/field/checkbox.tsx"
import { Checkbox, CheckboxGroup } from "@/components/ui/checkbox"
import {
  Field,
  FieldDescription,
  FieldLabel,
  FieldLegend,
  FieldSet,
} from "@/components/ui/field"

const options = [
  { value: "mentions", label: "Mentions" },
  { value: "replies", label: "Replies to my comments" },
  { value: "digest", label: "Weekly digest" },
]

export function FieldCheckbox() {
  return (
    <FieldSet className="w-full max-w-sm">
      <FieldLegend variant="label">Email me about</FieldLegend>
      <FieldDescription>Security alerts are always on.</FieldDescription>
      <CheckboxGroup defaultValue={["mentions", "replies"]}>
        {options.map((option) => (
          <Field key={option.value} orientation="horizontal">
            <Checkbox name="notifications" value={option.value} />
            <FieldLabel>{option.label}</FieldLabel>
          </Field>
        ))}
      </CheckboxGroup>
    </FieldSet>
  )
}
```

## Props in this example

### Field

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `orientation` | `"vertical" \| "horizontal" \| "responsive"` | `"vertical"` |  |

### FieldLegend

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"legend" \| "label"` | `"legend"` | label matches the size of a field label. |

## More Field examples

- [Input](https://hextaui.com/docs/field/examples/input.md)
- [Validation](https://hextaui.com/docs/field/examples/validation.md)
- [Custom validation](https://hextaui.com/docs/field/examples/custom-validation.md)
- [Required and optional](https://hextaui.com/docs/field/examples/indicator.md)
- [Status](https://hextaui.com/docs/field/examples/status.md)
- [Character count](https://hextaui.com/docs/field/examples/counter.md)
- [Errors from a form library or server](https://hextaui.com/docs/field/examples/errors.md)
- [Choice cards](https://hextaui.com/docs/field/examples/choice-card.md)
- [Fieldset](https://hextaui.com/docs/field/examples/fieldset.md)
- [Responsive](https://hextaui.com/docs/field/examples/responsive.md)
- [Disabled](https://hextaui.com/docs/field/examples/disabled.md)
- [Long content](https://hextaui.com/docs/field/examples/long-content.md)
- [Right to left](https://hextaui.com/docs/field/examples/rtl.md)