Radix homepageRadix Homepage
PrimitivesAlpha

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 = () => (
<Flex css={{ alignItems: 'center' }}>
<Checkbox defaultChecked id="c1">
<CheckboxIndicator>
<CheckIcon />
</CheckboxIndicator>
</Checkbox>
<Label css={{ paddingLeft: 15 }} htmlFor="c1">
Accept terms and conditions.
</Label>
</Flex>
);
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.

PropTypeDefault
asenumbutton
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
asenumspan
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.