Checkbox

Displays a checkbox built on the Base UI Checkbox primitive, for accepting terms, toggling settings, and picking several options.

Accept terms

Disabled checkbox

TSX
import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";

export default function CheckboxDemo() {
  return (
    <div className="flex flex-col gap-4">
      <div className="flex items-center gap-2">
        <Checkbox id="checkbox-terms" defaultChecked />
        <Label htmlFor="checkbox-terms">Accept terms</Label>
      </div>
      <div className="flex items-center gap-2">
        <Checkbox id="checkbox-disabled" disabled />
        <Label htmlFor="checkbox-disabled">Disabled checkbox</Label>
      </div>
    </div>
  );
}

Installation

Bash
npx shadcn@latest add @sevenui/checkboxpnpm dlx shadcn@latest add @sevenui/checkboxyarn dlx shadcn@latest add @sevenui/checkboxbunx --bun shadcn@latest add @sevenui/checkbox

Usage

TSX
import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";

<Label>
  <Checkbox defaultChecked />
  Accept terms
</Label>;

Examples

Indeterminate

A parent checkbox reflecting a partial selection — indeterminate is independent of checked and controlled by you.

All teams

Design

Engineering

Product

TSX
"use client";

import * as React from "react";

import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";

const teams = ["Design", "Engineering", "Product"];

export default function CheckboxIndeterminate() {
  const [checked, setChecked] = React.useState<string[]>(["Design"]);

  const allChecked = checked.length === teams.length;
  const indeterminate = checked.length > 0 && !allChecked;

  return (
    <div className="flex flex-col gap-3">
      <div className="flex items-center gap-2">
        <Checkbox
          id="checkbox-all-teams"
          checked={allChecked}
          indeterminate={indeterminate}
          onCheckedChange={(value) => setChecked(value ? [...teams] : [])}
        />
        <Label htmlFor="checkbox-all-teams">All teams</Label>
      </div>
      <div className="flex flex-col gap-3 ps-6">
        {teams.map((team) => (
          <div key={team} className="flex items-center gap-2">
            <Checkbox
              id={`checkbox-team-${team.toLowerCase()}`}
              checked={checked.includes(team)}
              onCheckedChange={(value) =>
                setChecked((prev) =>
                  value ? [...prev, team] : prev.filter((item) => item !== team),
                )
              }
            />
            <Label htmlFor={`checkbox-team-${team.toLowerCase()}`}>{team}</Label>
          </div>
        ))}
      </div>
    </div>
  );
}

Disabled

Disabled unchecked

Disabled checked

TSX
import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";

export default function CheckboxDisabled() {
  return (
    <div className="flex flex-col gap-3">
      <div className="flex items-center gap-2">
        <Checkbox id="checkbox-disabled-unchecked" disabled />
        <Label htmlFor="checkbox-disabled-unchecked">Disabled unchecked</Label>
      </div>
      <div className="flex items-center gap-2">
        <Checkbox id="checkbox-disabled-checked" disabled defaultChecked />
        <Label htmlFor="checkbox-disabled-checked">Disabled checked</Label>
      </div>
    </div>
  );
}

API reference

Checkbox

Extends the Base UI Checkbox Root — all its props apply. The check indicator is built in; pair with Label for the click-target text.

Prop	Type	Default
`checked` / `defaultChecked`	`boolean`	`false`
`onCheckedChange`	`(checked: boolean) => void`	—
`indeterminate`	`boolean`	`false`
`disabled`	`boolean`	`false`
`name` / `value`	`string` — form submission	—