Skip to content

Checkbox

An on/off choice submitted with a form. The whole row is the target; the box is 20px.

Sourcecomponents/checkbox.tsx

States

For 30 days.

A group with select-all (indeterminate)

Toppings

Usage

Checkbox usage
import { Checkbox } from "@/components/checkbox";import { Field, FieldLabel } from "@/components/field";
export function CheckboxUsage() {  return (    <Field orientation="choice">      <Checkbox name="terms" required />      <FieldLabel>I accept the terms</FieldLabel>    </Field>  );}

When to use

Use when

An on/off value submitted with a form; several independent options; "select all" (indeterminate). Put it in <Field orientation="choice">

Don’t use when

A setting that applies at once (use Switch); one choice of several (use Radio Group)