Skip to main content

​
Overview

Checkbox provides a binary or tristate control that users can check or uncheck. It supports an indeterminate state for partial selections and can be used in forms or as a standalone control.

​
Features

  • Supports indeterminate state
  • Can be controlled or uncontrolled
  • Full keyboard navigation
  • Works inside forms
  • Accessible by default with proper ARIA attributes
  • Custom styling with data attributes

​
Installation

npm install @radix-ui/react-checkbox

​
Anatomy

import * as Checkbox from '@radix-ui/react-checkbox';

export default () => (
  <Checkbox.Root>
    <Checkbox.Indicator />
  </Checkbox.Root>
);

​
API Reference

​
Root

Contains all the checkbox component parts. An input will also render when used within a form to ensure events propagate correctly.
​
checked
boolean | 'indeterminate'
The controlled checked state of the checkbox.
​
defaultChecked
boolean | 'indeterminate'
The checked state when initially rendered (uncontrolled).
​
onCheckedChange
(checked: boolean | 'indeterminate') => void
Event handler called when the checked state changes.
​
disabled
boolean
When true, prevents the user from interacting with the checkbox.
​
required
boolean
When true, indicates that the user must check the checkbox before submitting the form.
​
name
string
The name of the checkbox. Submitted with its owning form as part of a name/value pair.
​
value
string
default:"'on'"
The value given as data when submitted with a name.
​
asChild
boolean
default:"false"
Change the default rendered element for the one passed as a child.

​
Indicator

Renders when the checkbox is in a checked or indeterminate state. You can style this element directly, or you can use it as a wrapper to put an icon into, or both.
​
forceMount
boolean
Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
​
asChild
boolean
default:"false"
Change the default rendered element for the one passed as a child.

​
Example

import * as Checkbox from '@radix-ui/react-checkbox';
import { CheckIcon } from '@radix-ui/react-icons';
import './styles.css';

export default () => (
  <form>
    <div style={{ display: 'flex', alignItems: 'center' }}>
      <Checkbox.Root className="CheckboxRoot" defaultChecked id="c1">
        <Checkbox.Indicator className="CheckboxIndicator">
          <CheckIcon />
        </Checkbox.Indicator>
      </Checkbox.Root>
      <label className="Label" htmlFor="c1">
        Accept terms and conditions.
      </label>
    </div>
  </form>
);

​
Accessibility

Adheres to the tri-state Checkbox WAI-ARIA design pattern.

​
Keyboard Interactions

  • Space - Toggles the checkbox.

​
Data Attributes

Root
  • [data-state] - “checked”, “unchecked”, or “indeterminate”
  • [data-disabled] - Present when disabled
Indicator
  • [data-state] - “checked”, “unchecked”, or “indeterminate”
  • [data-disabled] - Present when disabled

Build docs developers (and LLMs) love

Get started for freeTalk to us