Checkbox

An easily stylable checkbox component.

Enable notifications

import * as React from 'react';
import { Field } from '@base-ui-components/react/field';
import { Checkbox } from '@base-ui-components/react/checkbox';
import styles from './index.module.css';

export default function ExampleCheckbox() {
  return (
    <Field.Root>
      <label className={styles.Label}>
        <Checkbox.Root defaultChecked className={styles.Checkbox}>
          <Checkbox.Indicator className={styles.Indicator}>
            <CheckIcon className={styles.Icon} />
          </Checkbox.Indicator>
        </Checkbox.Root>
        Enable notifications
      </label>
    </Field.Root>
  );
}

function CheckIcon(props: React.ComponentProps<'svg'>) {
  return (
    <svg fill="currentcolor" width="10" height="10" viewBox="0 0 10 10" {...props}>
      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
    </svg>
  );
}

API reference

Import the component and place its parts the following way:

Anatomy

import { Checkbox } from '@base-ui-components/react/checkbox';

<Checkbox.Root>
  <Checkbox.Indicator />
</Checkbox.Root>

Root

Represents the checkbox itself. Renders a <button> element and a hidden <input> beside.

Prop	Type	Default
`checked`	`boolean`	`undefined`
`className`	`string \| (state) => string`	`undefined`
`defaultChecked`	`boolean`	`false`
`disabled`	`boolean`	`false`
`indeterminate`	`boolean`	`false`
`inputRef`	`React.Ref`	`undefined`
`name`	`string`	`undefined`
`onCheckedChange`	`(checked, event) => void`	`undefined`
`parent`	`boolean`	`false`
`readOnly`	`boolean`	`false`
`render`	`\| React.ReactElement \| (props, state) => React.ReactElement`	`undefined`
`required`	`boolean`	`false`

Attribute	Type
`data-checked`	Empty attribute
`data-dirty`	Empty attribute
`data-disabled`	Empty attribute
`data-invalid`	Empty attribute
`data-readonly`	Empty attribute
`data-required`	Empty attribute
`data-touched`	Empty attribute
`data-unchecked`	Empty attribute
`data-valid`	Empty attribute

Indicator

Indicates whether the checkbox is ticked. Renders a <span> element.

Prop	Type	Default
`className`	`string \| (state) => string`	`undefined`
`keepMounted`	`boolean`	`false`
`render`	`\| React.ReactElement \| (props, state) => React.ReactElement`	`undefined`

Attribute	Type
`data-checked`	Empty attribute
`data-dirty`	Empty attribute
`data-disabled`	Empty attribute
`data-ending-style`	Empty attribute
`data-invalid`	Empty attribute
`data-readonly`	Empty attribute
`data-required`	Empty attribute
`data-starting-style`	Empty attribute
`data-touched`	Empty attribute
`data-unchecked`	Empty attribute
`data-valid`	Empty attribute