Checkbox

Checkboxes allow users to select one or more items from a set, or toggle a single option on or off. Prizma checkboxes support unchecked, checked, and disabled states across S, M, and L container sizes.

Try it live

Click them — real checkboxes styled with the checkbox tokens.

Interactive — click to toggle

I accept the terms and conditions Send me product updates

States

Unchecked

Unchecked.checkbox-wrap

Default resting state. The checkbox is visible and ready to receive input.

Checked

Checked.checkbox-wrap.is-selected

Selected state. The checkmark confirms the user’s choice with brand color.

Disabled

Disabledopacity: 0.4

Unavailable state. Full opacity reduction signals the option is not interactive.

Tokens

TokenRoleLayer

--checkbox-surface-defaultUnchecked backgroundComponent

--checkbox-surface-selectedChecked backgroundComponent

--checkbox-surface-disabledDisabled backgroundComponent

--checkbox-border-defaultUnchecked borderComponent

--checkbox-border-selectedChecked borderComponent

--checkbox-border-disabledDisabled borderComponent

--checkbox-check-colorCheckmark icon colorComponent

--radius-checkboxCorner radiusSemantic

Component tokens

The color tokens for this component live in Color → Tokens, and its spacing, radius, and type map to the shared foundation scales.