Checkbox

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

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 the components and piece the parts together.

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

Create your styled checkbox component from the primitive parts.

import { styled } from 'path-to/stitches.config';
import * as Checkbox from '@radix-ui/react-checkbox';
import { CheckIcon } from '@radix-ui/react-icons';
const StyledCheckbox = styled(Checkbox.Root, {
appearance: 'none',
backgroundColor: 'transparent',
border: 'none',
padding: 0,
boxShadow: 'inset 0 0 0 1px gainsboro',
width: 15,
height: 15,
borderRadius: 2,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
'&:focus': {
outline: 'none',
boxShadow: 'inset 0 0 0 1px dodgerblue, 0 0 0 1px dodgerblue',
},
});
export default () => (
<StyledCheckbox defaultChecked>
<Checkbox.Indicator as={CheckIcon} />
</StyledCheckbox>
);

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
import { styled } from 'path-to/stitches.config';
import * as Checkbox from '@radix-ui/react-checkbox';
import { DividerHorizontalIcon } from '@radix-ui/react-icons';
const StyledCheckbox = styled(Checkbox.Root, {
appearance: 'none',
backgroundColor: 'transparent',
border: 'none',
padding: 0,
boxShadow: 'inset 0 0 0 1px gainsboro',
width: 15,
height: 15,
borderRadius: 2,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
marginBottom: 10,
'&:focus': {
outline: 'none',
boxShadow: 'inset 0 0 0 1px dodgerblue, 0 0 0 1px dodgerblue',
},
});
export default () => {
const [checked, setChecked] = React.useState('indeterminate');
return (
<>
<StyledCheckbox checked={checked} onCheckedChange={(event) => setChecked(event.target.checked)} >
<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.