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.

Installation

Install the component from your command line.

npm install @radix-ui/react-checkbox

npm install @radix-ui/react-checkbox

Anatomy

Import the components and piece the parts together.

import * as Checkbox from '@radix-ui/react-checkbox';

export default () => (
  <Checkbox.Root>
    <Checkbox.Indicator />
  </Checkbox.Root>
);

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

Basic example

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 '@modulz/radix-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>
);

// import { styled } from 'path-to/stitches.config';
import * as Checkbox from '@radix-ui/react-checkbox';
import { CheckIcon } from '@modulz/radix-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>
);

API Reference

Root

Contains all the parts of a checkbox.

Prop	Type	Default
`as`	`enum`	`button`
`defaultChecked`	`boolean`
`checked`	`boolean`
`onCheckedChange`	`function`
`disabled`	`boolean`
`required`	`boolean`
`readOnly`	`boolean`
`name`	`string`
`value`	`string`	`on`

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.

Prop	Type	Default	Required
`as`	`enum`	`span`
`forceMount`	`boolean`

Examples

Indeterminate

// import { styled } from 'path-to/stitches.config';
import * as Checkbox from '@radix-ui/react-checkbox';
import { DividerHorizontalIcon } from '@modulz/radix-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>
    </>
  );
};

// import { styled } from 'path-to/stitches.config';
import * as Checkbox from '@radix-ui/react-checkbox';
import { DividerHorizontalIcon } from '@modulz/radix-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>
    </>
  );
};

Accessibility

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

Keyboard Interactions

Key	Description
`Space`	Checks/unchecks the checkbox.
`Enter`	Checks/unchecks the checkbox.