Checkbox

Checkboxes are for choices that can be turned on independently of one another. The Swiss wrapper keeps the Radix accessibility model, adds the system's tighter square treatment, and stays quiet enough to pair with labels, supporting copy, and grouped review tasks.

Installation

Purchase access, then open /account/install to issue a registry token.

Usage

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

<label className="flex items-center gap-3">
  <Checkbox checked={checked} onCheckedChange={setChecked} />
  <span>Include release notes</span>
</label>

Why This Primitive Exists

Use the checkbox when multiple options may be true at once or when a user must explicitly acknowledge a condition.

• Prefer it to a switch when the choice is part of a form or review step.
• Prefer it to radio buttons when options are not mutually exclusive.
• Avoid it for actions that should commit immediately on toggle.

Examples

Basic Independent Choice

The simplest pattern is still the right one: pair the control with nearby text and let the label explain the consequence.

<label className="flex items-center gap-3">
  <Checkbox defaultChecked />
  <span>Include launch checklist</span>
</label>

Grouped Options

Checkboxes become more useful when grouped into a review block where every item can be chosen independently.

<div className="grid gap-4">
  <div className="flex items-center justify-between">
    <Label htmlFor="inventory">Reserve launch inventory</Label>
    <Checkbox id="inventory" />
  </div>
</div>

In Context

Acknowledgement flows are a strong fit for checkboxes because the control communicates deliberate consent without implying an immediate live system change.

Guidance

Choose Checkbox Vs Switch Carefully

• Use a checkbox when the choice will be submitted or reviewed as part of a larger form.
• Use a switch when the state changes immediately and behaves like a live setting.
• If only one option can be selected, use radio buttons instead.

Keep Labels Specific

• Write labels that describe the resulting state, not the UI gesture.
• Avoid vague copy like Enable option.
• Add supporting text when the implication of checking the box is not obvious.

Pair With Form Structure

• Keep the label and supporting copy adjacent to the control.
• For dense forms, pair checkbox rows with Field or Label.
• Use acknowledgement checkboxes before destructive or compliance-sensitive confirmation steps, not after them.

API Reference

Checkbox

The wrapper renders CheckboxPrimitive.Root and forwards the Radix checkbox props directly.

Visual Behavior