Checkbox

An easily stylable checkbox component.

Enable notifications

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

export default function ExampleCheckbox() {
  return (
    <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>
  );
}

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 assemble its parts:

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
`name`	`string`	`undefined`
`defaultChecked`	`boolean`	`false`
`checked`	`boolean`	`undefined`
`onCheckedChange`	`((checked: boolean, event: Event) => void)`	`undefined`
`indeterminate`	`boolean`	`false`
`value`	`string \| number`	`undefined`
`parent`	`boolean`	`false`
`disabled`	`boolean`	`false`
`readOnly`	`boolean`	`false`
`required`	`boolean`	`false`
`inputRef`	`Ref<HTMLInputElement>`	`undefined`
`id`	`string`	`undefined`
`className`	`string \| ((state: State) => string)`	`undefined`
`render`	`\| ReactElement \| ((props: GenericHTMLProps, state: State) => ReactElement)`	`undefined`

Attribute	Description
`data-checked`	Present when the checkbox is checked.
`data-unchecked`	Present when the checkbox is not checked.
`data-disabled`	Present when the checkbox is disabled.
`data-readonly`	Present when the checkbox is readonly.
`data-required`	Present when the checkbox is required.
`data-valid`	Present when the checkbox is in valid state (when wrapped in Field.Root).
`data-invalid`	Present when the checkbox is in invalid state (when wrapped in Field.Root).
`data-dirty`	Present when the checkbox's value has changed (when wrapped in Field.Root).
`data-touched`	Present when the checkbox has been touched (when wrapped in Field.Root).
`data-filled`	Present when the checkbox is checked (when wrapped in Field.Root).
`data-focused`	Present when the checkbox is focused (when wrapped in Field.Root).

Indicator

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

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

Attribute	Description
`data-checked`	Present when the checkbox is checked.
`data-unchecked`	Present when the checkbox is not checked.
`data-disabled`	Present when the checkbox is disabled.
`data-readonly`	Present when the checkbox is readonly.
`data-required`	Present when the checkbox is required.
`data-valid`	Present when the checkbox is in valid state (when wrapped in Field.Root).
`data-invalid`	Present when the checkbox is in invalid state (when wrapped in Field.Root).
`data-dirty`	Present when the checkbox's value has changed (when wrapped in Field.Root).
`data-touched`	Present when the checkbox has been touched (when wrapped in Field.Root).
`data-filled`	Present when the checkbox is checked (when wrapped in Field.Root).
`data-focused`	Present when the checkbox is focused (when wrapped in Field.Root).
`data-starting-style`	Present when the checkbox indicator is animating in.
`data-ending-style`	Present when the checkbox indicator is animating out.