Checkbox

A small box that is ticked or not, alone or beside its words, with a mixed state for a box standing for several.

ui.checkboxcomponents/ui/checkbox.tsx

Use case

For the AI

Use it for one yes or no inside a form that is saved later: "Client is tax exempt", "Send the invoice by email", "I have read the contract". It is also the tick at the start of a table row for acting on several orders or invoices at once, with the header's box `indeterminate` when only some rows are ticked. It changes nothing until the form is saved or the bulk action is run.

Use it when

One yes or no inside a form saved with a button
Ticking rows in a table to act on several at once
A checklist item that is done or not (a step on a job)
A box standing for several others, mixed when some are ticked

Use something else when

The change applies the moment it is flipped (a setting, Do not disturb): Switch
One question with several answers (notify by email, text, push): Checkbox group
Exactly one of a few options: Radio group
On and off for a view option inside a menu (Compact Rows): Dropdown menu

Examples

Code

Import

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

Usage

<Label className="flex cursor-pointer items-start gap-2.5 font-normal text-[14px] text-foreground">
  <Checkbox name="tax-exempt" defaultChecked />
  Client is tax exempt
</Label>

{/* alone, at the start of a table row */}
<Checkbox
  checked={selected.includes(invoice.id)}
  onCheckedChange={(checked) => toggle(invoice.id, checked)}
  aria-label={"Select " + invoice.number}
/>

Rules

Give it a name: wrap it with its words in a `Label`, or pass `aria-label` when it stands alone (a table row's tick).
Its words are a sentence in sentence case ("Send the monthly report"), never Title Case.
`indeterminate` is only for a box standing for several when some are ticked; it is not a third answer.
Inside a form, pass `name` (and `value` when the server expects more than "on") so it is submitted.