Component Card

Checkbox

Capture independent true/false choices and multi-select options.

Checkbox anatomy

When to Use

Preference settings where users enable multiple features.
Consent confirmations like terms acceptance.
Bulk selection lists that support multi-select workflows.

When NOT to Use

Use checkboxes when each option is independent and can be combined with others.

For exactly one choice from many, use radio buttons or Select.

Variants

Unchecked / checked

Indeterminate parent

Disabled option

Confused?

Use Checkbox for true/false toggles per item, and use Button for immediate action triggers.

Agent Prompts

Use the copy-ready Cursor and Pencil prompts in the prompt panel below this card.

Agent Prompts

Cursor Prompt

Build checkbox components for single consent and multi-select settings with checked, unchecked, and indeterminate states.

Pencil Prompt

Design a checkbox group with helper text and a mixed-state parent checkbox to represent partial selection.

Next Lesson

Toast