Checkbox

A high-quality, styled React checkbox component built with @base-ui/react that is easy to customize.

The Checkbox component allows users to toggle between checked and unchecked boolean states.

Usage

import { Checkbox } from "@/components/ui/checkbox";

export function ExampleCheckbox() {
  return (
    <label className="flex items-center gap-2 text-sm font-medium">
      <Checkbox.Root defaultChecked>
        <Checkbox.Indicator />
      </Checkbox.Root>
      Enable notifications
    </label>
  );
}

Preview

Accept terms and conditionsSubscribe to newsletterDisabled checked option

Sizes

Small checkboxMedium checkboxLarge checkbox

<Checkbox.Root size="sm">...</Checkbox.Root>
<Checkbox.Root size="md">...</Checkbox.Root>
<Checkbox.Root size="lg">...</Checkbox.Root>

Anatomy

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

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

API Reference

Checkbox.Root Props

Prop	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Checkbox dimensions.
`checked`	`boolean`	`undefined`	Controlled checked state.
`defaultChecked`	`boolean`	`false`	Uncontrolled initial checked state.
`onCheckedChange`	`(checked: boolean) => void`	`undefined`	Callback fired on checked state change.
`disabled`	`boolean`	`false`	Disables user interaction.
`indeterminate`	`boolean`	`false`	Mixed state (neither checked nor unchecked).