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
asChild
boolean
false
defaultChecked
boolean
No default value
checked
boolean
No default value
onCheckedChange
function
No default value
disabled
boolean
No default value
required
boolean
No default value
name
string
No default value
value
string
on
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
asChild
boolean
false
forceMount
boolean
No 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