form

Checkbox

A checkbox for a yes or no choice, or for picking several items from a list.

npx blankui add checkbox

Raw markdown for agents Registry JSON

I agree to the terms

Email me about new features

About once a month.

When to use

A single yes or no choice, like agreeing to terms.
Picking several options from a short list.

Use something else when

Picking exactly one option from a list. Use select.
Triggering an action right away. Use button.

Built on Radix. Use checked and onCheckedChange, not onChange. The value can be true, false or "indeterminate".

Import

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

Example

<Field label="Send me product updates" orientation="horizontal">
  <Checkbox checked={updates} onCheckedChange={(checked) => setUpdates(checked === true)} />
</Field>

In a form

<Field label="I agree to the terms" orientation="horizontal" required>
  <Checkbox name="terms" value="yes" />
</Field>

Mistakes to avoid

Avoid	Instead
<input type="checkbox">	<Checkbox>
onChange={(e) => setValue(e.target.checked)}	onCheckedChange={(checked) => setValue(checked === true)}
<Field label="..."> (vertical) around a Checkbox	<Field label="..." orientation="horizontal">

Install with the shadcn CLI: npx shadcn add https://blank.vageshwar.dev/r/checkbox.json