Component

Checkbox

A checkbox with checked, unchecked, and indeterminate states. Accessible keyboard and ARIA support. Uses the headless @refraction-ui/checkbox core.

States

Unchecked, checked, indeterminate, and disabled states.

Unchecked

Checked

Indeterminate

Disabled

Disabled Checked

Installation

$pnpm add @refraction-ui/react-checkbox

Usage

tsx

import { Checkbox } from '@refraction-ui/react-checkbox'

export function MyComponent() {
  const [checked, setChecked] = useState(false)
  return (
    <label className="flex items-center gap-2">
      <Checkbox checked={checked} onCheckedChange={setChecked} />
      <span>Accept terms</span>
    </label>
  )
}

Sizes

Three sizes: small, default, and large.

Small

Default

Large

Props

Prop	Type	Default	Description
`checked`	`boolean \| 'indeterminate'`	`false`	Checked state of the checkbox.
`onCheckedChange`	`(checked: CheckedState) => void`	--	Callback when state changes.
`disabled`	`boolean`	`false`	Disables the checkbox.
`size`	`'sm' \| 'default' \| 'lg'`	`'default'`	Size of the checkbox.
`className`	`string`	--	Additional CSS classes.