Figma Checkbox

Preview

Figma Checkbox

Figma Checkbox Component

The Checkbox component communicates whether an option is selected, not selected, or indeterminate. Use checkboxes whenever a user can select a single or multiple option from a single list.

Checkboxes UI Best Practices

Ensure each checkbox has a clear, concise label that describes what the option does.
Checkbox labels should always be clickable along with the checkbox shape, improving usability.

When to use Checkboxes vs. Radio buttons:

Use checkboxes for optional or additive choices.
Use Radio Buttons for mandatory, single-selection scenarios.
Always group related options clearly and provide clear labels for both components.

Check Box Anatomy

Set	Variants	Properties
CheckboxLabel	48	Size Small, Medium, Large, XLState Checked, Hover Checked, Indeterminate, Unchecked, Hover Unchecked, DisabledDirection Left, Right
CheckboxCaption	48	Size Small, Medium, Large, XLState Checked, Hover Checked, Indeterminate, Unchecked, Hover Unchecked, DisabledDirection Left, Right
CheckboxButton	40	Size Small, Medium, Large, XLState Checked, Hover Checked, Unchecked, Hover Unchecked, DisabledDirection Left, Right
Checkbox	18	Size Small, Medium, LargeState Checked, Hover Checked, Indeterminate, Unchecked, Hover Unchecked, Disabled

The checkbox family is four sets: a bare Checkbox at 22, 24 and 32px, CheckboxLabel and CheckboxCaption with the control on the Left or Right in four sizes, and a CheckboxButton card variant up to 122px — all with Checked, Hover Checked, Indeterminate, Unchecked, Hover Unchecked and Disabled states.

Check Box AI Prompt

Paste this into Claude, ChatGPT, or Figma Make:

Build a checkbox system in Figma as four component sets with shared states. Checkbox: the bare control at Small 22, Medium 24 and Large 32px with six states — Unchecked with a grey border, Hover Unchecked with a tinted border, Checked with an accent fill and white tick, Hover Checked darker, Indeterminate with a horizontal dash, and Disabled at reduced opacity. CheckboxLabel: the control with a text label on its Left or Right in Small, Medium, Large and XL sizes, the label clickable as one hit area. CheckboxCaption: label plus a grey caption line beneath, at 48 to 68px row heights. CheckboxButton: a bordered card that holds the control, a bold label and a caption, at 72 to 122px, the whole card tinting when Checked. Keep the tick icon a nested component so stroke weight scales per size, bind every colour to variables for light and dark mode, and wire Unchecked to Checked as an interactive component.

Source