Checkbox

Forms
Core

Multi-selection checkbox inputs with indeterminate state support, built on Radix UI primitives. Perfect for forms, lists, and bulk selection interfaces.

Preview

Basic checkbox with label

Controlled State

Manage checkbox state in your component

Checkbox is unchecked

Indeterminate State

Select all with partial selection indicator

With Description

Checkboxes with additional context

Receive emails about new products, features, and more.

Get notified about important security updates and patches.

Disabled State

Disabled checkboxes in checked and unchecked states

Props

Checkbox component API reference

PropTypeDefaultDescription
checkedboolean | 'indeterminate'—Controlled checked state
defaultCheckedbooleanfalseDefault checked state (uncontrolled)
onCheckedChange(checked: boolean | 'indeterminate') => void—Callback when state changes
disabledbooleanfalseDisable the checkbox
requiredbooleanfalseMark as required in forms
namestring—Name for form submission
valuestring'on'Value for form submission

Usage

Import and implementation example

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

export default function Example() {
  const [checked, setChecked] = useState(false)

  return (
    <>
      {/* Basic checkbox */}
      <div className="flex items-center space-x-2">
        <Checkbox id="terms" />
        <Label htmlFor="terms">Accept terms</Label>
      </div>

      {/* Controlled checkbox */}
      <div className="flex items-center space-x-2">
        <Checkbox
          id="controlled"
          checked={checked}
          onCheckedChange={setChecked}
        />
        <Label htmlFor="controlled">I agree</Label>
      </div>

      {/* Indeterminate for select all */}
      <Checkbox
        checked={allChecked ? true : someChecked ? 'indeterminate' : false}
        onCheckedChange={(value) => {
          setItems(items.map(i => ({ ...i, checked: value === true })))
        }}
      />
    </>
  )
}

Features

Built-in functionality

  • Indeterminate state: Shows minus icon for partial selections in lists
  • Controlled & uncontrolled: Flexible state management options
  • Radix UI primitives: Built on accessible, unstyled components
  • Form compatible: Works with native form submission
  • Focus ring: Clear focus indicator for keyboard navigation
  • Smooth transitions: 200ms color transitions for check animation
  • Dark mode: Full dark mode support with indigo accent

Accessibility

Accessibility considerations

ARIA Attributes

Uses native checkbox semantics via Radixaria-checked indicates checked, unchecked, or mixed stateSupports aria-labelledby for label association

Keyboard Navigation

KeyAction
TabFocus the checkbox
SpaceToggle checked state

Notes

  • Always pair with a Label component for accessibility
  • Disabled state indicated by opacity and cursor
  • Focus ring visible on keyboard navigation
  • Indeterminate state announced as "mixed" to screen readers

Related Components

Radio GroupSwitchToggleForm Field