Navigation: [/sitemap.md](/sitemap.md)

---
type: doc
title: Checkbox
description: A control that allows the user to toggle between checked and not checked.
---

```astro live props={{ name: 'checkbox' }}
---
import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"
---

<div class="flex flex-col gap-6">
  <div class="flex items-center gap-3">
    <Checkbox id="terms" />
    <Label for="terms">Accept terms and conditions</Label>
  </div>
  <div class="flex items-start gap-3">
    <Checkbox id="terms-2" checked />
    <div class="grid gap-2">
      <Label for="terms-2">Accept terms and conditions</Label>
      <p class="text-muted-foreground text-sm">
        By clicking this checkbox, you agree to the terms and conditions.
      </p>
    </div>
  </div>
  <div class="flex items-start gap-3">
    <Checkbox id="toggle" disabled />
    <Label for="toggle">Enable notifications</Label>
  </div>
  <Label
    class="hover:bg-accent/50 has-[[aria-checked=true]]:border-primary has-[[aria-checked=true]]:bg-primary/5 flex items-start gap-3 rounded-lg border p-3"
  >
    <Checkbox id="toggle-2" checked />
    <div class="grid gap-1.5 font-normal">
      <p class="text-sm leading-none font-medium">Enable notifications</p>
      <p class="text-muted-foreground text-sm">
        You can enable or disable notifications at any time.
      </p>
    </div>
  </Label>
</div>
```

## Installation

```bash
npx shadcn@latest add @fulldev/checkbox
```

## Usage

```ts
import { Checkbox } from "@/components/ui/checkbox"
```

```astro
<Checkbox />
```

## Notes

- Pair `Checkbox` with `Label` for simple cases, or use
  [Field](/components/field/) when you need descriptions, validation, or
  grouped controls.
- Use the native `disabled` attribute to prevent interaction and
  `aria-invalid` when the control should display an error state.
- For multi-line rows, wrap the label and supporting text together so the
  control stays easy to scan.

## API Reference

See the [GitHub source code](https://github.com/fulldotdev/ui/tree/main/src/components/ui/checkbox) for more information on props.