Checkbox

A control that allows the user to toggle between checked and unchecked. Built on Base UI Checkbox primitives.

Accept terms and conditions

Usage

import {
  CheckboxRoot,
  CheckboxIndicator,
  CheckboxLabel,
} from "@/components/ui/static/checkbox"

<div className="flex items-center gap-2">
  <CheckboxRoot id="my-checkbox">
    <CheckboxIndicator />
  </CheckboxRoot>
  <CheckboxLabel htmlFor="my-checkbox">
    Label text
  </CheckboxLabel>
</div>

Installation

Install dependencies

TypeScript

npm install @base-ui/react @phosphor-icons/react

Examples

Checkbox Group

I agree to the terms of service

Send me marketing emails

Disabled

Disabled checkbox

API Reference

checkedboolean

Controlled checked state.

onCheckedChange(checked: boolean) => void

Callback when checked state changes.

defaultCheckedboolean

Default checked state for uncontrolled usage.

indeterminateboolean

Whether the checkbox is in indeterminate state.

disabledboolean

Whether the checkbox is disabled.