Checkbox

A styled checkbox built on Base UI's Checkbox primitive. Renders a small square with a check icon when selected, and supports disabled, invalid, and indeterminate states.

Accept terms and conditions

import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"

export default function CheckboxDemo() {
  return (
    <div className="flex items-center gap-2">
      <Checkbox id="terms" />
      <Label htmlFor="terms">Accept terms and conditions</Label>
    </div>
  )
}

Anatomy

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

<Checkbox />

Examples

Basic checkbox

<div className="flex items-center gap-2">
  <Checkbox id="terms" />
  <label htmlFor="terms">Accept terms and conditions</label>
</div>

Controlled

function Demo() {
  const [checked, setChecked] = React.useState(false)

  return (
    <div className="flex items-center gap-2">
      <Checkbox checked={checked} onCheckedChange={setChecked} />
      <label>Receive notifications</label>
    </div>
  )
}

Disabled

<div className="flex items-center gap-2">
  <Checkbox disabled />
  <label className="opacity-50">Disabled option</label>
</div>

API Reference

Checkbox

Renders a styled checkbox input with a check icon indicator. Accepts all Base UI Checkbox.Root props.

Prop	Type	Default	Description
`checked`	`boolean`	—	Controlled checked state.
`defaultChecked`	`boolean`	`false`	Initial checked state for uncontrolled usage.
`onCheckedChange`	`(checked: boolean) => void`	—	Callback when the checked state changes.
`disabled`	`boolean`	`false`	Whether the checkbox is disabled.
`required`	`boolean`	`false`	Whether the checkbox is required.
`name`	`string`	—	The name attribute for form submission.
`className`	`string`	—