Checkbox

A control that allows the user to toggle between checked and unchecked states.

<form>
  <fieldset>
    <legend>Choose your interests</legend>
    <div className="grid gap-2">
      <Checkbox id="ui" value="ui">UI</Checkbox>
      <Checkbox id="ux" value="ux">UX</Checkbox>
      <Checkbox id="uxresearch" value="uxresearch">UX Research</Checkbox>
    </div>
  </fieldset>
</form>

Installation

pnpm dlx cubix@latest add checkbox --base aria

Usage

Import

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

Example

<form>
  <fieldset>
    <legend>Choose your interests</legend>
    <div className="grid gap-2">
      <Checkbox id="ui" value="ui">UI</Checkbox>
      <Checkbox id="ux" value="ux">UX</Checkbox>
      <Checkbox id="uxresearch" value="uxresearch">UX Research</Checkbox>
    </div>
  </fieldset>
</form>

Examples

States

Use checked, indeterminate, and disabled states to communicate the current condition clearly.

<fieldset className="grid gap-3">
  <Checkbox defaultChecked>Accepted</Checkbox>
  <Checkbox indeterminate>Partial selection</Checkbox>
  <Checkbox disabled>Unavailable</Checkbox>
</fieldset>

With description

Compose the Checkbox with a label and description to build settings rows and consent controls.

Accept terms and conditionsYou agree to our Terms of Service and Privacy Policy.

<label className="flex items-start gap-3 rounded-lg border p-4">
  <Checkbox defaultChecked className="mt-0.5" />
  <span className="grid gap-1.5 leading-none">
    <span className="font-medium">Accept terms and conditions</span>
    <span className="text-sm text-muted-foreground">
      You agree to our Terms of Service and Privacy Policy.
    </span>
  </span>
</label>

Sizes

Default

<div className="grid gap-3">
  <label className="flex items-center gap-2 text-sm">
    <Checkbox /> Default
  </label>
</div>

API Reference

Props

Prop	Type	Default	Description
checked	boolean	false	Controlled checked state of the checkbox. Use with `onCheckedChange`.
defaultChecked	boolean	false	Default checked state for uncontrolled usage.
onCheckedChange	(checked: boolean) => void	-	Called with the next checked value whenever the checkbox is toggled.
required	boolean	-	Adds the required attribute when validating as part of a group of checkboxes.
name	string	-	The name attribute passed when submitting a form as part of a group.
value	string	on	The value attribute passed when submitting a form as part of a group.
indeterminate	boolean	false	When true, shows the indeterminate state.
disabled	boolean	false	Disables the checkbox.
aria-invalid	boolean	false	When true, indicates the checkbox is in an invalid state.
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).
...props	React.ComponentProps<'input'>	-	All native input attributes (id, form, tabindex, aria-*, ...) are forwarded to the rendered element.

Variants

Prop	Type	Default	Description
default	-	-	Checked state with primary background and foreground.
indeterminate	-	-	Visual indeterminate state. Use when the checkbox represents a partial selection (e.g. grouped options).
disabled	-	-	Disabled checkboxes cannot be interacted with.