Radix homepageRadix Homepage
PrimitivesBeta

Checkbox

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

import React from 'react';
import { styled } from '@stitches/react';
import { violet, blackA } from '@radix-ui/colors';
import { CheckIcon } from '@radix-ui/react-icons';
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
const StyledCheckbox = styled(CheckboxPrimitive.Root, {
all: 'unset',
backgroundColor: 'white',
width: 25,
height: 25,
borderRadius: 4,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
boxShadow: `0 2px 10px ${blackA.blackA7}`,
'&:hover': { backgroundColor: violet.violet3 },
'&:focus': { boxShadow: `0 0 0 2px black` },
});
const StyledIndicator = styled(CheckboxPrimitive.Indicator, {
color: violet.violet11,
});
// Exports
const Checkbox = StyledCheckbox;
const CheckboxIndicator = StyledIndicator;
// Your app...
const Flex = styled('div', { display: 'flex' });
const Label = styled('label', {
color: 'white',
fontSize: 15,
lineHeight: 1,
userSelect: 'none',
});
export const CheckboxDemo = () => (
<form>
<Flex css={{ alignItems: 'center' }}>
<Checkbox defaultChecked id="c1">
<CheckboxIndicator>
<CheckIcon />
</CheckboxIndicator>
</Checkbox>
<Label css={{ paddingLeft: 15 }} htmlFor="c1">
Accept terms and conditions.
</Label>
</Flex>
</form>
);
export default CheckboxDemo;

Features

  • Supports indeterminate state.
  • Full keyboard navigation.
  • Can be controlled or uncontrolled.

Install the component from your command line.

npm install @radix-ui/react-checkbox

Import all parts and piece them together.

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

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

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>
</>
);
};

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

KeyDescription
SpaceChecks/unchecks the checkbox.
EnterChecks/unchecks the checkbox.