Checkbox

Demos

A checkbox with its label.

I have fasted for at least 8 hours

"use client"

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

export function CheckboxDemo() {
  return (
    <label className="flex items-center gap-2 text-xs">
      <Checkbox defaultChecked />
      I have fasted for at least 8 hours
    </label>
  )
}

Usage

Use a checkbox to pick any number of options from a list, or for one choice that applies when a form is submitted. For a setting that takes effect right away, use a Switch. To pick exactly one option, use a Radio Group.

Import it from @workspace/ui/components/checkbox.

Notes

Wrap the checkbox in a label so the text toggles it too.
The hit area is larger than the box, so it is easy to tap.
Write the label as a statement the reader agrees with, such as "I have fasted for 8 hours".
Space toggles the checkbox when it has focus.

Examples

With description

A title and a line of help text, with the box aligned to the first line.

Share results with my GPYour GP receives a copy of every new report. You can stop this at any time.

"use client"

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

export function CheckboxDescription() {
  return (
    <label className="flex max-w-xs items-start gap-2 text-xs">
      <Checkbox className="mt-0.5" />
      <span className="grid gap-1">
        <span className="font-medium">Share results with my GP</span>
        <span className="text-muted-foreground">
          Your GP receives a copy of every new report. You can stop this at any
          time.
        </span>
      </span>
    </label>
  )
}

Disabled

Disabled checkboxes, unchecked and checked.

Genetic panel (not available in your region)Core panel (always included)

"use client"

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

export function CheckboxDisabled() {
  return (
    <div className="grid gap-3 text-xs text-muted-foreground">
      <label className="flex items-center gap-2">
        <Checkbox disabled />
        Genetic panel (not available in your region)
      </label>
      <label className="flex items-center gap-2">
        <Checkbox disabled defaultChecked />
        Core panel (always included)
      </label>
    </div>
  )
}

Group

A parent checkbox that selects all children. It shows a dash with indeterminate when only some are selected.

"use client"

import * as React from "react"

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

const panels = [
  { id: "lipids", label: "Lipids" },
  { id: "metabolic", label: "Metabolic" },
  { id: "kidney", label: "Kidney" },
  { id: "inflammation", label: "Inflammation" },
]

export function CheckboxGroup() {
  const [selected, setSelected] = React.useState<string[]>(["lipids"])

  const allChecked = selected.length === panels.length
  const someChecked = selected.length > 0 && !allChecked

  return (
    <div className="grid w-full max-w-xs gap-3 text-xs">
      <label className="flex items-center gap-2 font-medium">
        <Checkbox
          checked={allChecked}
          indeterminate={someChecked}
          onCheckedChange={(checked) =>
            setSelected(checked ? panels.map((panel) => panel.id) : [])
          }
        />
        All panels
      </label>
      <div className="grid gap-3 ps-6">
        {panels.map((panel) => (
          <label key={panel.id} className="flex items-center gap-2">
            <Checkbox
              checked={selected.includes(panel.id)}
              onCheckedChange={(checked) =>
                setSelected((current) =>
                  checked
                    ? [...current, panel.id]
                    : current.filter((id) => id !== panel.id)
                )
              }
            />
            {panel.label}
          </label>
        ))}
      </div>
    </div>
  )
}

Props

These are the props you set most often. Unlisted props pass through to the underlying element.

Checkbox

Prop	Type	Default	Description
`defaultChecked`	`boolean`	`false`	Checked on first render.
`checked`	`boolean`	—	State when controlled.
`onCheckedChange`	`(checked) => void`	—	Called when the state changes.
`indeterminate`	`boolean`	`false`	Shows the mixed state, for a parent of a partly selected list.
`disabled`	`boolean`	`false`	Blocks input and dims the checkbox.
`name`	`string`	—	Field name for form submission.
`value`	`string`	—	Value submitted when checked.