---
title: "Checkbox"
url: "https://developer.incode.com/design-and-ux/checkbox/"
section: "design-and-ux"
group: "Prizma Design Foundations / Components"
version: "v1.1"
status: "live"
---
# 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.

<div class="dh-demo"><p class="dh-demo-label">Interactive — click to toggle</p><label class="dh-pz-check"><input type="checkbox" checked /> <span>I accept the terms and conditions</span></label><label class="dh-pz-check"><input type="checkbox" /> <span>Send me product updates</span></label></div>

<div class="dh-rule"><span>States</span><i></i></div>

<div class="dh-var-grid"><div class="dh-var" style="background:transparent"><div class="dh-var-stage"><label class="dh-pz-check"><input type="checkbox" /> <span>Unchecked</span></label></div><div class="dh-var-meta"><span class="dh-var-pill" style="background:#60667c14;color:#60667c">Unchecked</span><code>.checkbox-wrap</code><p>Default resting state. The checkbox is visible and ready to receive input.</p></div></div><div class="dh-var" style="background:#006aff08"><div class="dh-var-stage"><label class="dh-pz-check"><input type="checkbox" checked /> <span>Checked</span></label></div><div class="dh-var-meta"><span class="dh-var-pill" style="background:#006aff14;color:#006aff">Checked</span><code>.checkbox-wrap.is-selected</code><p>Selected state. The checkmark confirms the user’s choice with brand color.</p></div></div><div class="dh-var" style="background:transparent"><div class="dh-var-stage"><label class="dh-pz-check" style="opacity:0.4"><input type="checkbox" /> <span>Disabled</span></label></div><div class="dh-var-meta"><span class="dh-var-pill" style="background:#9ca3af14;color:#9ca3af">Disabled</span><code>opacity: 0.4</code><p>Unavailable state. Full opacity reduction signals the option is not interactive.</p></div></div></div>

<div class="dh-rule"><span>Tokens</span><i></i></div>

```dh-comp-tokens
--checkbox-surface-default | Unchecked background | Component
--checkbox-surface-selected | Checked background | Component
--checkbox-surface-disabled | Disabled background | Component
--checkbox-border-default | Unchecked border | Component
--checkbox-border-selected | Checked border | Component
--checkbox-border-disabled | Disabled border | Component
--checkbox-check-color | Checkmark icon color | Component
--radius-checkbox | Corner radius | Semantic
```

> 📘 Component tokens
>
> The color tokens for this component live in [Color → Tokens](/design-and-ux/color/), and its spacing, radius, and type map to the shared foundation scales.