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

> Fulldev UI for Astro. The `@fulldev` registry in `components.json` points at `https://ui.full.dev/r/styles/{style}/{name}.json`; see [installation](/astro/docs/installation.md).

```astro title="src/components/examples/checkbox/checkbox-demo.astro"
---
import { Checkbox } from "@/components/ui/checkbox"
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldGroup,
  FieldLabel,
  FieldTitle,
} from "@/components/ui/field"
import { Label } from "@/components/ui/label"
---

<FieldGroup class="max-w-sm">
  <Field orientation="horizontal">
    <Checkbox id="terms-checkbox" name="terms-checkbox" />
    <Label for="terms-checkbox">Accept terms and conditions</Label>
  </Field>
  <Field orientation="horizontal">
    <Checkbox id="terms-checkbox-2" name="terms-checkbox-2" checked />
    <FieldContent>
      <FieldLabel for="terms-checkbox-2">
        Accept terms and conditions
      </FieldLabel>
      <FieldDescription>
        By clicking this checkbox, you agree to the terms.
      </FieldDescription>
    </FieldContent>
  </Field>
  <Field orientation="horizontal" data-disabled>
    <Checkbox id="toggle-checkbox" name="toggle-checkbox" disabled />
    <FieldLabel for="toggle-checkbox">Enable notifications</FieldLabel>
  </Field>
  <FieldLabel>
    <Field as="span" orientation="horizontal">
      <Checkbox id="toggle-checkbox-2" name="toggle-checkbox-2" />
      <FieldContent as="span">
        <FieldTitle as="span">Enable notifications</FieldTitle>
        <FieldDescription as="span">
          You can enable or disable notifications at any time.
        </FieldDescription>
      </FieldContent>
    </Field>
  </FieldLabel>
</FieldGroup>
```

## Installation

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

## Usage

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

```astro
<Checkbox />
```

`Checkbox` renders a native `input type="checkbox"` and accepts its
attributes, so it submits with a form and works without JavaScript.

## Checked State

Use the native `checked` attribute for the initial state. Read or set
`input.checked` and listen to the native `change` event to react to changes.
Set `input.indeterminate = true` in a script for the indeterminate state.

## Invalid State

Set `aria-invalid="true"` on the checkbox and `data-invalid` on the field
wrapper to show the invalid styles.

```astro title="src/components/examples/checkbox/checkbox-invalid.astro"
---
import { Checkbox } from "@/components/ui/checkbox"
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
---

<FieldGroup class="mx-auto w-56">
  <Field orientation="horizontal" data-invalid>
    <Checkbox
      id="terms-checkbox-invalid"
      name="terms-checkbox-invalid"
      aria-invalid="true"
    />
    <FieldLabel for="terms-checkbox-invalid">
      Accept terms and conditions
    </FieldLabel>
  </Field>
</FieldGroup>
```

## Basic

Pair the checkbox with `Field` and `FieldLabel` for proper layout and labeling.

```astro title="src/components/examples/checkbox/checkbox-basic.astro"
---
import { Checkbox } from "@/components/ui/checkbox"
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
---

<FieldGroup class="mx-auto w-56">
  <Field orientation="horizontal">
    <Checkbox id="terms-checkbox-basic" name="terms-checkbox-basic" />
    <FieldLabel for="terms-checkbox-basic">
      Accept terms and conditions
    </FieldLabel>
  </Field>
</FieldGroup>
```

## Description

Use `FieldContent` and `FieldDescription` for helper text.

```astro title="src/components/examples/checkbox/checkbox-description.astro"
---
import { Checkbox } from "@/components/ui/checkbox"
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field"
---

<FieldGroup class="mx-auto w-72">
  <Field orientation="horizontal">
    <Checkbox id="terms-checkbox-desc" name="terms-checkbox-desc" checked />
    <FieldContent>
      <FieldLabel for="terms-checkbox-desc">
        Accept terms and conditions
      </FieldLabel>
      <FieldDescription>
        By clicking this checkbox, you agree to the terms and conditions.
      </FieldDescription>
    </FieldContent>
  </Field>
</FieldGroup>
```

## Disabled

Use the `disabled` attribute to prevent interaction and add `data-disabled` to
the `Field` for disabled styles.

```astro title="src/components/examples/checkbox/checkbox-disabled.astro"
---
import { Checkbox } from "@/components/ui/checkbox"
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
---

<FieldGroup class="mx-auto w-56">
  <Field orientation="horizontal" data-disabled>
    <Checkbox
      id="toggle-checkbox-disabled"
      name="toggle-checkbox-disabled"
      disabled
    />
    <FieldLabel for="toggle-checkbox-disabled">Enable notifications</FieldLabel>
  </Field>
</FieldGroup>
```

## Group

Use multiple fields to create a checkbox list.

```astro title="src/components/examples/checkbox/checkbox-group.astro"
---
import { Checkbox } from "@/components/ui/checkbox"
import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSet,
} from "@/components/ui/field"
---

<FieldSet>
  <FieldLegend variant="label">Show these items on the desktop:</FieldLegend>
  <FieldDescription>
    Select the items you want to show on the desktop.
  </FieldDescription>
  <FieldGroup class="gap-3">
    <Field orientation="horizontal">
      <Checkbox
        id="finder-pref-9k2-hard-disks-ljj-checkbox"
        name="finder-pref-9k2-hard-disks-ljj-checkbox"
        checked
      />
      <FieldLabel
        for="finder-pref-9k2-hard-disks-ljj-checkbox"
        class="font-normal"
      >
        Hard disks
      </FieldLabel>
    </Field>
    <Field orientation="horizontal">
      <Checkbox
        id="finder-pref-9k2-external-disks-1yg-checkbox"
        name="finder-pref-9k2-external-disks-1yg-checkbox"
        checked
      />
      <FieldLabel
        for="finder-pref-9k2-external-disks-1yg-checkbox"
        class="font-normal"
      >
        External disks
      </FieldLabel>
    </Field>
    <Field orientation="horizontal">
      <Checkbox
        id="finder-pref-9k2-cds-dvds-fzt-checkbox"
        name="finder-pref-9k2-cds-dvds-fzt-checkbox"
      />
      <FieldLabel
        for="finder-pref-9k2-cds-dvds-fzt-checkbox"
        class="font-normal"
      >
        CDs, DVDs, and iPods
      </FieldLabel>
    </Field>
    <Field orientation="horizontal">
      <Checkbox
        id="finder-pref-9k2-connected-servers-6l2-checkbox"
        name="finder-pref-9k2-connected-servers-6l2-checkbox"
      />
      <FieldLabel
        for="finder-pref-9k2-connected-servers-6l2-checkbox"
        class="font-normal"
      >
        Connected servers
      </FieldLabel>
    </Field>
  </FieldGroup>
</FieldSet>
```

## Table

```astro title="src/components/examples/checkbox/checkbox-table.astro"
---
import { Checkbox } from "@/components/ui/checkbox"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"

const tableData = [
  {
    id: "1",
    name: "Sarah Chen",
    email: "sarah.chen@example.com",
    role: "Admin",
  },
  {
    id: "2",
    name: "Marcus Rodriguez",
    email: "marcus.rodriguez@example.com",
    role: "User",
  },
  {
    id: "3",
    name: "Priya Patel",
    email: "priya.patel@example.com",
    role: "User",
  },
  {
    id: "4",
    name: "David Kim",
    email: "david.kim@example.com",
    role: "Editor",
  },
]

const selectedRows = new Set(["1"])
---

<Table data-checkbox-table>
  <TableHeader>
    <TableRow>
      <TableHead class="w-8">
        <Checkbox
          id="select-all-checkbox"
          name="select-all-checkbox"
          checked={selectedRows.size === tableData.length}
          data-select-all
        />
      </TableHead>
      <TableHead>Name</TableHead>
      <TableHead>Email</TableHead>
      <TableHead>Role</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    {tableData.map((row) => (
      <TableRow data-state={selectedRows.has(row.id) ? "selected" : undefined}>
        <TableCell>
          <Checkbox
            id={`row-${row.id}-checkbox`}
            name={`row-${row.id}-checkbox`}
            checked={selectedRows.has(row.id)}
            data-select-row
          />
        </TableCell>
        <TableCell class="font-medium">{row.name}</TableCell>
        <TableCell>{row.email}</TableCell>
        <TableCell>{row.role}</TableCell>
      </TableRow>
    ))}
  </TableBody>
</Table>

<script>
  const initialize = () => {
    for (const table of document.querySelectorAll("[data-checkbox-table]")) {
      if (table.hasAttribute("data-bound")) continue
      table.setAttribute("data-bound", "")
      const all = table.querySelector<HTMLInputElement>("[data-select-all]")
      const rows = [
        ...table.querySelectorAll<HTMLInputElement>("[data-select-row]"),
      ]
      const update = () => {
        for (const row of rows) {
          const tr = row.closest("tr")
          if (row.checked) tr?.setAttribute("data-state", "selected")
          else tr?.removeAttribute("data-state")
        }
        if (all) all.checked = rows.every((row) => row.checked)
      }
      all?.addEventListener("change", () => {
        for (const row of rows) row.checked = all.checked
        update()
      })
      for (const row of rows) row.addEventListener("change", update)
    }
  }

  initialize()
  document.addEventListener("astro:page-load", initialize)
</script>
```

## RTL

```astro title="src/components/examples/checkbox/checkbox-rtl.astro"
---
import { Checkbox } from "@/components/ui/checkbox"
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldGroup,
  FieldLabel,
  FieldTitle,
} from "@/components/ui/field"
import { Label } from "@/components/ui/label"

const translations = {
  en: {
    dir: "ltr",
    values: {
      acceptTerms: "Accept terms and conditions",
      acceptTermsDescription:
        "By clicking this checkbox, you agree to the terms.",
      enableNotifications: "Enable notifications",
      enableNotificationsDescription:
        "You can enable or disable notifications at any time.",
    },
  },
  ar: {
    dir: "rtl",
    values: {
      acceptTerms: "قبول الشروط والأحكام",
      acceptTermsDescription: "بالنقر على هذا المربع، فإنك توافق على الشروط.",
      enableNotifications: "تفعيل الإشعارات",
      enableNotificationsDescription:
        "يمكنك تفعيل أو إلغاء تفعيل الإشعارات في أي وقت.",
    },
  },
  he: {
    dir: "rtl",
    values: {
      acceptTerms: "קבל תנאים והגבלות",
      acceptTermsDescription:
        "על ידי לחיצה על תיבת הסימון הזו, אתה מסכים לתנאים.",
      enableNotifications: "הפעל התראות",
      enableNotificationsDescription:
        "אתה יכול להפעיל או להשבית התראות בכל עת.",
    },
  },
}

const { dir, values: t } = translations.ar
---

<FieldGroup class="max-w-sm" dir={dir}>
  <Field orientation="horizontal">
    <Checkbox id="terms-checkbox-rtl" name="terms-checkbox" />
    <Label for="terms-checkbox-rtl">{t.acceptTerms}</Label>
  </Field>
  <Field orientation="horizontal">
    <Checkbox id="terms-checkbox-2-rtl" name="terms-checkbox-2" checked />
    <FieldContent>
      <FieldLabel for="terms-checkbox-2-rtl">{t.acceptTerms}</FieldLabel>
      <FieldDescription>{t.acceptTermsDescription}</FieldDescription>
    </FieldContent>
  </Field>
  <Field orientation="horizontal" data-disabled>
    <Checkbox id="toggle-checkbox-rtl" name="toggle-checkbox" disabled />
    <FieldLabel for="toggle-checkbox-rtl">{t.enableNotifications}</FieldLabel>
  </Field>
  <FieldLabel>
    <Field as="span" orientation="horizontal">
      <Checkbox id="toggle-checkbox-rtl-2" name="toggle-checkbox-2" />
      <FieldContent as="span">
        <FieldTitle as="span">{t.enableNotifications}</FieldTitle>
        <FieldDescription as="span">
          {t.enableNotificationsDescription}
        </FieldDescription>
      </FieldContent>
    </Field>
  </FieldLabel>
</FieldGroup>
```

## API Reference

Source: [`src/components/ui/checkbox`](https://github.com/fulldotdev/ui/tree/main/src/components/ui/checkbox)

`Checkbox` accepts every `input` attribute except `type`, such as `checked`,
`disabled`, `required`, `name`, `value` and `aria-invalid`.

## Install what this page shows

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