Checkbox

A control that allows the user to toggle between checked and not checked.

Accept terms and conditions

By clicking this checkbox, you agree to the terms.

Enable notifications

You can enable or disable notifications at any time.

1
import { Checkbox } from "~/components/ui/checkbox";
2
import {
3
  Field,
4
  FieldContent,
5
  FieldDescription,
6
  FieldGroup,
7
  FieldLabel,
8
  FieldTitle,
9
} from "~/components/ui/field";
10

11
export default function CheckboxDemo() {
12
  return (
13
    <FieldGroup class="max-w-sm">
14
      <Field orientation="horizontal">
15
        <Checkbox id="terms-checkbox" name="terms-checkbox" />
16
        <FieldLabel for="terms-checkbox">Accept terms and conditions</FieldLabel>
17
      </Field>
18
      <Field orientation="horizontal">
19
        <Checkbox id="terms-checkbox-2" name="terms-checkbox-2" defaultChecked />
20
        <FieldContent>
21
          <FieldLabel for="terms-checkbox-2">Accept terms and conditions</FieldLabel>
22
          <FieldDescription>By clicking this checkbox, you agree to the terms.</FieldDescription>
23
        </FieldContent>
24
      </Field>
25
      <Field orientation="horizontal" data-disabled>
26
        <Checkbox id="toggle-checkbox" name="toggle-checkbox" disabled />
27
        <FieldLabel for="toggle-checkbox">Enable notifications</FieldLabel>
28
      </Field>
29
      <FieldLabel>
30
        <Field orientation="horizontal">
31
          <Checkbox id="toggle-checkbox-2" name="toggle-checkbox-2" />
32
          <FieldContent>
33
            <FieldTitle>Enable notifications</FieldTitle>
34
            <FieldDescription>
35
              You can enable or disable notifications at any time.
36
            </FieldDescription>
37
          </FieldContent>
38
        </Field>
39
      </FieldLabel>
40
    </FieldGroup>
41
  );
42
}

Installation

pnpm dlx shadcn@latest add @zaidan/checkbox
npx shadcn@latest add @zaidan/checkbox
yarn dlx shadcn@latest add @zaidan/checkbox
bunx --bun shadcn@latest add @zaidan/checkbox

Usage

1
import { Checkbox } from "~/components/ui/checkbox";

1
<Checkbox />

Checked State

Use defaultChecked for uncontrolled checkboxes, or checked and onChange to control the state.

1
import { createSignal } from "solid-js";
2

3
const [checked, setChecked] = createSignal(false);
4

5
<Checkbox checked={checked()} onChange={setChecked} />;

Invalid State

Set aria-invalid on the checkbox and data-invalid on the field wrapper to show the invalid styles.

Accept terms and conditions

1
import { Checkbox } from "~/components/ui/checkbox";
2
import { Field, FieldGroup, FieldLabel } from "~/components/ui/field";
3

4
export default function CheckboxInvalid() {
5
  return (
6
    <FieldGroup class="mx-auto w-56">
7
      <Field orientation="horizontal" data-invalid>
8
        <Checkbox id="terms-checkbox-invalid" name="terms-checkbox-invalid" aria-invalid />
9
        <FieldLabel for="terms-checkbox-invalid">Accept terms and conditions</FieldLabel>
10
      </Field>
11
    </FieldGroup>
12
  );
13
}

Basic

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

Accept terms and conditions

1
import { Checkbox } from "~/components/ui/checkbox";
2
import { Field, FieldGroup, FieldLabel } from "~/components/ui/field";
3

4
export default function CheckboxBasic() {
5
  return (
6
    <FieldGroup class="mx-auto w-56">
7
      <Field orientation="horizontal">
8
        <Checkbox id="terms-checkbox-basic" name="terms-checkbox-basic" />
9
        <FieldLabel for="terms-checkbox-basic">Accept terms and conditions</FieldLabel>
10
      </Field>
11
    </FieldGroup>
12
  );
13
}

Description

Use FieldContent and FieldDescription for helper text.

Accept terms and conditions

By clicking this checkbox, you agree to the terms and conditions.

1
import { Checkbox } from "~/components/ui/checkbox";
2
import {
3
  Field,
4
  FieldContent,
5
  FieldDescription,
6
  FieldGroup,
7
  FieldLabel,
8
} from "~/components/ui/field";
9

10
export default function CheckboxDescription() {
11
  return (
12
    <FieldGroup class="mx-auto w-72">
13
      <Field orientation="horizontal">
14
        <Checkbox id="terms-checkbox-desc" name="terms-checkbox-desc" defaultChecked />
15
        <FieldContent>
16
          <FieldLabel for="terms-checkbox-desc">Accept terms and conditions</FieldLabel>
17
          <FieldDescription>
18
            By clicking this checkbox, you agree to the terms and conditions.
19
          </FieldDescription>
20
        </FieldContent>
21
      </Field>
22
    </FieldGroup>
23
  );
24
}

Disabled

Use the disabled prop to prevent interaction and add the data-disabled attribute to the <Field> component for disabled styles.

Enable notifications

1
import { Checkbox } from "~/components/ui/checkbox";
2
import { Field, FieldGroup, FieldLabel } from "~/components/ui/field";
3

4
export default function CheckboxDisabled() {
5
  return (
6
    <FieldGroup class="mx-auto w-56">
7
      <Field orientation="horizontal" data-disabled>
8
        <Checkbox id="toggle-checkbox-disabled" name="toggle-checkbox-disabled" disabled />
9
        <FieldLabel for="toggle-checkbox-disabled">Enable notifications</FieldLabel>
10
      </Field>
11
    </FieldGroup>
12
  );
13
}

Group

Use multiple fields to create a checkbox list.

Show these items on the desktop:

Select the items you want to show on the desktop.

Hard disks

External disks

CDs, DVDs, and iPods

Connected servers

1
import { Checkbox } from "~/components/ui/checkbox";
2
import {
3
  Field,
4
  FieldDescription,
5
  FieldGroup,
6
  FieldLabel,
7
  FieldLegend,
8
  FieldSet,
9
} from "~/components/ui/field";
10

11
export default function CheckboxGroup() {
12
  return (
13
    <FieldSet>
14
      <FieldLegend variant="label">Show these items on the desktop:</FieldLegend>
15
      <FieldDescription>Select the items you want to show on the desktop.</FieldDescription>
16
      <FieldGroup class="gap-3">
17
        <Field orientation="horizontal">
18
          <Checkbox
19
            id="finder-pref-9k2-hard-disks-ljj-checkbox"
20
            name="finder-pref-9k2-hard-disks-ljj-checkbox"
21
            defaultChecked
22
          />
23
          <FieldLabel for="finder-pref-9k2-hard-disks-ljj-checkbox" class="font-normal">
24
            Hard disks
25
          </FieldLabel>
26
        </Field>
27
        <Field orientation="horizontal">
28
          <Checkbox
29
            id="finder-pref-9k2-external-disks-1yg-checkbox"
30
            name="finder-pref-9k2-external-disks-1yg-checkbox"
31
            defaultChecked
32
          />
33
          <FieldLabel for="finder-pref-9k2-external-disks-1yg-checkbox" class="font-normal">
34
            External disks
35
          </FieldLabel>
36
        </Field>
37
        <Field orientation="horizontal">
38
          <Checkbox
39
            id="finder-pref-9k2-cds-dvds-fzt-checkbox"
40
            name="finder-pref-9k2-cds-dvds-fzt-checkbox"
41
          />
42
          <FieldLabel for="finder-pref-9k2-cds-dvds-fzt-checkbox" class="font-normal">
43
            CDs, DVDs, and iPods
44
          </FieldLabel>
45
        </Field>
46
        <Field orientation="horizontal">
47
          <Checkbox
48
            id="finder-pref-9k2-connected-servers-6l2-checkbox"
49
            name="finder-pref-9k2-connected-servers-6l2-checkbox"
50
          />
51
          <FieldLabel for="finder-pref-9k2-connected-servers-6l2-checkbox" class="font-normal">
52
            Connected servers
53
          </FieldLabel>
54
        </Field>
55
      </FieldGroup>
56
    </FieldSet>
57
  );
58
}

Table

Name	Email	Role
Sarah Chen	sarah.chen@example.com	Admin
Marcus Rodriguez	marcus.rodriguez@example.com	User
Priya Patel	priya.patel@example.com	User
David Kim	david.kim@example.com	Editor

1
import { createSignal, For } from "solid-js";
2
import { Checkbox } from "~/components/ui/checkbox";
3
import {
4
  Table,
5
  TableBody,
6
  TableCell,
7
  TableHead,
8
  TableHeader,
9
  TableRow,
10
} from "~/components/ui/table";
11

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

19
export default function CheckboxTable() {
20
  const [selectedRows, setSelectedRows] = createSignal<Set<string>>(new Set(["1"]));
21
  const selectAll = () => selectedRows().size === tableData.length;
22

23
  const handleSelectAll = (checked: boolean) => {
24
    setSelectedRows(checked ? new Set(tableData.map((row) => row.id)) : new Set<string>());
25
  };
26

27
  const handleSelectRow = (id: string, checked: boolean) => {
28
    const nextSelectedRows = new Set(selectedRows());
29
    if (checked) nextSelectedRows.add(id);
30
    else nextSelectedRows.delete(id);
31
    setSelectedRows(nextSelectedRows);
32
  };
33

34
  return (
35
    <Table>
36
      <TableHeader>
37
        <TableRow>
38
          <TableHead class="w-8">
39
            <Checkbox
40
              id="select-all-checkbox"
41
              name="select-all-checkbox"
42
              aria-label="Select all rows"
43
              checked={selectAll()}
44
              onChange={handleSelectAll}
45
            />
46
          </TableHead>
47
          <TableHead>Name</TableHead>
48
          <TableHead>Email</TableHead>
49
          <TableHead>Role</TableHead>
50
        </TableRow>
51
      </TableHeader>
52
      <TableBody>
53
        <For each={tableData}>
54
          {(row) => (
55
            <TableRow data-state={selectedRows().has(row.id) ? "selected" : undefined}>
56
              <TableCell>
57
                <Checkbox
58
                  id={`row-${row.id}-checkbox`}
59
                  name={`row-${row.id}-checkbox`}
60
                  aria-label={`Select ${row.name}`}
61
                  checked={selectedRows().has(row.id)}
62
                  onChange={(checked) => handleSelectRow(row.id, checked)}
63
                />
64
              </TableCell>
65
              <TableCell class="font-medium">{row.name}</TableCell>
66
              <TableCell>{row.email}</TableCell>
67
              <TableCell>{row.role}</TableCell>
68
            </TableRow>
69
          )}
70
        </For>
71
      </TableBody>
72
    </Table>
73
  );
74
}

API Reference

Checkbox is built on top of @kobalte/core/checkbox, which implements the WAI-ARIA checkbox pattern, including keyboard, disabled, indeterminate, and form behavior.

Checkbox

Prop	Type	Default
`checked`	`boolean`	-
`defaultChecked`	`boolean`	`false`
`onChange`	`(checked: boolean) => void`	-
`indeterminate`	`boolean`	`false`
`disabled`	`boolean`	`false`
`readOnly`	`boolean`	`false`
`required`	`boolean`	`false`
`name`	`string`	-
`value`	`string`	`"on"`
`validationState`	`"valid" \| "invalid"`	-
`class`	`string`	-

CheckboxLabel

Renders a <label> associated with the checkbox's hidden input. Place it as a sibling of Checkbox inside the same Field.

Prop	Type	Default
`class`	`string`	-
`children`	`JSX.Element`	-