Components

Checkbox

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

import React from 'react';
import * as Checkbox from '@radix-ui/react-checkbox';
import { CheckIcon } from '@radix-ui/react-icons';
import './styles.css';
const CheckboxDemo = () => (
<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>
);
export default CheckboxDemo;

Features

    Supports indeterminate state.

    Full keyboard navigation.

    Can be controlled or uncontrolled.

Installation

Install the component from your command line.

npm install @radix-ui/react-checkbox

Anatomy

Import all parts and piece them together.

import * as Checkbox from '@radix-ui/react-checkbox';
export default () => (
<Checkbox.Root>
<Checkbox.Indicator />
</Checkbox.Root>
);

API Reference

Root

Contains all the parts of a checkbox. An input will also render when used within a form to ensure events propagate correctly.

PropTypeDefault
asChildbooleanfalse
defaultCheckedbooleanNo default value
checkedbooleanNo default value
onCheckedChangefunctionNo default value
disabledbooleanNo default value
requiredbooleanNo default value
namestringNo default value
valuestringon
Data attributeValues
[data-state]"checked" | "unchecked" | "indeterminate"
[data-disabled]

Present when disabled

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.

PropTypeDefault
asChildbooleanfalse
forceMountbooleanNo default value
Data attributeValues
[data-state]"checked" | "unchecked" | "indeterminate"
[data-disabled]

Present when disabled

Examples

Indeterminate

You can set the checkbox to indeterminate by taking control of its state.

import { DividerHorizontalIcon, CheckIcon } from '@radix-ui/react-icons';
import * as Checkbox from '@radix-ui/react-checkbox';
export default () => {
const [checked, setChecked] = React.useState('indeterminate');
return (
<>
<StyledCheckbox checked={checked} onCheckedChange={setChecked}>
<Checkbox.Indicator>
{checked === 'indeterminate' && <DividerHorizontalIcon />}
{checked === true && <CheckIcon />}
</Checkbox.Indicator>
</StyledCheckbox>
<button type="button" onClick={() => setChecked((prevIsChecked) => prevIsChecked === 'indeterminate' ? false : 'indeterminate' ) } >
Toggle indeterminate
</button>
</>
);
};

Accessibility

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

Keyboard Interactions

KeyDescription
Space
Checks/unchecks the checkbox.
PreviousAvatar