DesignDojo
1.2-components · 16-checkbox

Estimated time: 5 min

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.

Progress saves locally on this device.

Learning Loop

Lock this lesson in with a fast cycle: quiz the module, drill flashcards, then run the daily challenge.

Take Module QuizPractice FlashcardsRun Daily Challenge

Next Lesson

Toast