Checkbox

Usage

import { Checkbox } from '@acronis-platform/shadcn-uikit';

Basic

A standalone checkbox.

View source

import { Checkbox } from '@acronis-platform/shadcn-uikit/react';

export function CheckboxBasic() {
  return <Checkbox />;
}

States

All visual states of the checkbox.

View source

import { Checkbox, Label } from '@acronis-platform/shadcn-uikit/react';

export function CheckboxStates() {
  return (
    <div className="grid grid-cols-2 gap-6">
      <div className="space-y-3">
        <p className="text-sm font-medium">Unchecked States</p>
        <div className="flex items-center space-x-2">
          <Checkbox id="state-default" />
          <Label htmlFor="state-default" className="text-sm font-normal">
            Default
          </Label>
        </div>
        <div className="flex items-center space-x-2">
          <Checkbox id="state-disabled-unchecked" disabled />
          <Label
            htmlFor="state-disabled-unchecked"
            className="text-sm font-normal text-[hsl(var(--checkbox-disabled-text)/0.4)]"
          >
            Disabled
          </Label>
        </div>
      </div>
      <div className="space-y-3">
        <p className="text-sm font-medium">Checked States</p>
        <div className="flex items-center space-x-2">
          <Checkbox id="state-checked" checked />
          <Label htmlFor="state-checked" className="text-sm font-normal">
            Checked
          </Label>
        </div>
        <div className="flex items-center space-x-2">
          <Checkbox id="state-indeterminate" checked="indeterminate" />
          <Label htmlFor="state-indeterminate" className="text-sm font-normal">
            Indeterminate
          </Label>
        </div>
        <div className="flex items-center space-x-2">
          <Checkbox id="state-disabled-checked" disabled checked />
          <Label
            htmlFor="state-disabled-checked"
            className="text-sm font-normal text-[hsl(var(--checkbox-disabled-text)/0.4)]"
          >
            Disabled checked
          </Label>
        </div>
      </div>
    </div>
  );
}

With label

A checkbox paired with a clickable label.

Accept terms and conditions

View source

import { Checkbox, Label } from '@acronis-platform/shadcn-uikit/react';

export function CheckboxWithLabel() {
  return (
    <div className="flex items-center space-x-2">
      <Checkbox id="terms" />
      <Label htmlFor="terms" className="text-sm font-normal cursor-pointer">
        Accept terms and conditions
      </Label>
    </div>
  );
}

With description

A checkbox with a label and additional description text.

Marketing emails

Receive emails about new products, features, and more.

View source

import { Checkbox, Label } from '@acronis-platform/shadcn-uikit/react';

export function CheckboxWithDescription() {
  return (
    <div className="flex items-start space-x-2">
      <Checkbox id="marketing" className="mt-1" />
      <div className="grid gap-1.5 leading-none">
        <Label
          htmlFor="marketing"
          className="text-sm font-normal cursor-pointer text-[hsl(var(--checkbox-label))]"
        >
          Marketing emails
        </Label>
        <p className="text-sm text-[hsl(var(--checkbox-description)/0.7)]">
          Receive emails about new products, features, and more.
        </p>
      </div>
    </div>
  );
}

Controlled

A controlled checkbox with external state management.

Unchecked

View source

import * as React from 'react';
import { Checkbox, Label } from '@acronis-platform/shadcn-uikit/react';

export function CheckboxControlled() {
  const [checked, setChecked] = React.useState(false);

  return (
    <div className="space-y-2">
      <div className="flex items-center space-x-2">
        <Checkbox
          id="controlled"
          checked={checked}
          onCheckedChange={setChecked}
        />
        <Label
          htmlFor="controlled"
          className="text-sm font-normal cursor-pointer"
        >
          {checked ? 'Checked' : 'Unchecked'}
        </Label>
      </div>
      <button
        onClick={() => setChecked(!checked)}
        className="text-sm text-primary hover:underline"
      >
        Toggle checkbox
      </button>
    </div>
  );
}

Indeterminate

The indeterminate state for parent checkboxes with partial selection.

Indeterminate

View source

import * as React from 'react';
import { Checkbox, Label } from '@acronis-platform/shadcn-uikit/react';

export function CheckboxIndeterminate() {
  const [indeterminate, setIndeterminate] = React.useState<
    boolean | 'indeterminate'
  >('indeterminate');

  return (
    <div className="flex items-center space-x-2">
      <Checkbox
        id="indeterminate"
        checked={indeterminate}
        onCheckedChange={setIndeterminate}
      />
      <Label
        htmlFor="indeterminate"
        className="text-sm font-normal cursor-pointer"
      >
        {indeterminate === 'indeterminate'
          ? 'Indeterminate'
          : indeterminate
            ? 'Checked'
            : 'Unchecked'}
      </Label>
    </div>
  );
}

Disabled state

Disabled checkboxes that cannot be interacted with.

Disabled unchecked

Disabled checked

View source

import { Checkbox, Label } from '@acronis-platform/shadcn-uikit/react';

export function CheckboxDisabled() {
  return (
    <div className="space-y-3">
      <div className="flex items-center space-x-2">
        <Checkbox id="disabled-unchecked" disabled />
        <Label
          htmlFor="disabled-unchecked"
          className="text-sm font-normal text-[hsl(var(--checkbox-disabled-text)/0.4)]"
        >
          Disabled unchecked
        </Label>
      </div>
      <div className="flex items-center space-x-2">
        <Checkbox id="disabled-checked" disabled checked />
        <Label
          htmlFor="disabled-checked"
          className="text-sm font-normal text-[hsl(var(--checkbox-disabled-text)/0.4)]"
        >
          Disabled checked
        </Label>
      </div>
    </div>
  );
}

Parent-child

A hierarchical checkbox with parent controlling children.

Select all

Item 1

Item 2

Item 3

View source

import * as React from 'react';
import { Checkbox, Label } from '@acronis-platform/shadcn-uikit/react';

export function CheckboxParentChild() {
  const [items, setItems] = React.useState([
    { id: '1', label: 'Item 1', checked: false },
    { id: '2', label: 'Item 2', checked: false },
    { id: '3', label: 'Item 3', checked: false },
  ]);

  const allChecked = items.every((item) => item.checked);
  const someChecked = items.some((item) => item.checked);
  const parentChecked = allChecked
    ? true
    : someChecked
      ? 'indeterminate'
      : false;

  return (
    <div className="space-y-2">
      <div className="flex items-center space-x-2">
        <Checkbox
          id="parent"
          checked={parentChecked}
          onCheckedChange={(checked) => {
            const newChecked = checked === true;
            setItems(items.map((item) => ({ ...item, checked: newChecked })));
          }}
        />
        <Label htmlFor="parent" className="text-sm font-medium cursor-pointer">
          Select all
        </Label>
      </div>
      <div className="ml-6 space-y-2">
        {items.map((item) => (
          <div key={item.id} className="flex items-center space-x-2">
            <Checkbox
              id={item.id}
              checked={item.checked}
              onCheckedChange={(checked) => {
                setItems(
                  items.map((i) =>
                    i.id === item.id ? { ...i, checked: checked === true } : i
                  )
                );
              }}
            />
            <Label
              htmlFor={item.id}
              className="text-sm font-normal cursor-pointer"
            >
              {item.label}
            </Label>
          </div>
        ))}
      </div>
    </div>
  );
}

In a form

Checkbox integrated with form validation.

View source

import { Checkbox, Label } from '@acronis-platform/shadcn-uikit/react';

export function CheckboxForm() {
  return (
    <form className="space-y-4 rounded-lg border p-4">
      <div className="space-y-3">
        <div className="flex items-start space-x-2">
          <Checkbox id="notifications" className="mt-1" />
          <div className="grid gap-1.5 leading-none">
            <Label
              htmlFor="notifications"
              className="text-sm font-normal cursor-pointer text-[hsl(var(--checkbox-label))]"
            >
              Enable notifications
            </Label>
            <p className="text-sm text-[hsl(var(--checkbox-description)/0.7)]">
              Get notified when someone mentions you
            </p>
          </div>
        </div>
        <div className="flex items-start space-x-2">
          <Checkbox id="updates" className="mt-1" />
          <div className="grid gap-1.5 leading-none">
            <Label
              htmlFor="updates"
              className="text-sm font-normal cursor-pointer text-[hsl(var(--checkbox-label))]"
            >
              Product updates
            </Label>
            <p className="text-sm text-[hsl(var(--checkbox-description)/0.7)]">
              Receive updates about new features
            </p>
          </div>
        </div>
        <div className="flex items-start space-x-2">
          <Checkbox id="newsletter" className="mt-1" />
          <div className="grid gap-1.5 leading-none">
            <Label
              htmlFor="newsletter"
              className="text-sm font-normal cursor-pointer text-[hsl(var(--checkbox-label))]"
            >
              Newsletter
            </Label>
            <p className="text-sm text-[hsl(var(--checkbox-description)/0.7)]">
              Weekly digest of what&apos;s new
            </p>
          </div>
        </div>
      </div>
    </form>
  );
}

Multiple selection

A group of checkboxes for selecting multiple options.

Select your interests:

Design

Development

Marketing

Sales

View source

import { Checkbox, Label } from '@acronis-platform/shadcn-uikit/react';

export function CheckboxMultipleSelection() {
  return (
    <div className="space-y-2 rounded-lg border p-4">
      <p className="text-sm font-medium mb-3">Select your interests:</p>
      <div className="flex items-center space-x-2">
        <Checkbox id="design" />
        <Label htmlFor="design" className="text-sm font-normal cursor-pointer">
          Design
        </Label>
      </div>
      <div className="flex items-center space-x-2">
        <Checkbox id="development" />
        <Label
          htmlFor="development"
          className="text-sm font-normal cursor-pointer"
        >
          Development
        </Label>
      </div>
      <div className="flex items-center space-x-2">
        <Checkbox id="marketing" />
        <Label
          htmlFor="marketing"
          className="text-sm font-normal cursor-pointer"
        >
          Marketing
        </Label>
      </div>
      <div className="flex items-center space-x-2">
        <Checkbox id="sales" />
        <Label htmlFor="sales" className="text-sm font-normal cursor-pointer">
          Sales
        </Label>
      </div>
    </div>
  );
}

List

A checkbox list pattern for item selection.

Task 1

Task 2

Task 3

Task 4

View source

import { Checkbox, Label } from '@acronis-platform/shadcn-uikit/react';

export function CheckboxList() {
  return (
    <div className="space-y-1 rounded-lg border">
      {['Task 1', 'Task 2', 'Task 3', 'Task 4'].map((task, index) => (
        <div
          key={index}
          className="flex items-center space-x-2 border-b p-3 last:border-b-0 hover:bg-muted/50"
        >
          <Checkbox id={`task-${index}`} />
          <Label
            htmlFor={`task-${index}`}
            className="flex-1 text-sm font-normal cursor-pointer"
          >
            {task}
          </Label>
        </div>
      ))}
    </div>
  );
}

API Reference

Checkbox

Prop

Type

The Checkbox component extends the Base UI Checkbox primitive props. The checked prop accepts boolean or "indeterminate" for backwards-compatibility with the Radix UI API.

Edit on GitHub

Checkbox

On this page