---
title: "Radio Button"
url: "https://developer.incode.com/design-and-ux/radio/"
section: "design-and-ux"
group: "Prizma Design Foundations / Components"
version: "v1.1"
status: "live"
---
# Radio Button

Radio buttons allow users to select exactly one option from a set. Unlike checkboxes, selecting one automatically deselects others. Prizma radios are always used in groups of two or more.

## Try it live

Pick one — real radio inputs styled with the radio tokens.

<div class="dh-demo"><p class="dh-demo-label">Interactive — select one</p><label class="dh-pz-radio"><input type="radio" name="pz-demo-radio" checked /> <span>Use my camera</span></label><label class="dh-pz-radio"><input type="radio" name="pz-demo-radio" /> <span>Upload a file</span></label></div>

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

<div class="dh-var-grid"><div class="dh-var" style="background:#006aff08"><div class="dh-var-stage"><label class="dh-pz-radio"><input type="radio" checked /> <span>Selected</span></label></div><div class="dh-var-meta"><span class="dh-var-pill" style="background:#006aff14;color:#006aff">Selected</span><code>.radio.is-selected</code><p>The chosen option. The knob fills with brand color.</p></div></div><div class="dh-var" style="background:transparent"><div class="dh-var-stage"><label class="dh-pz-radio"><input type="radio" /> <span>Unselected</span></label></div><div class="dh-var-meta"><span class="dh-var-pill" style="background:#60667c14;color:#60667c">Unselected</span><code>.radio</code><p>Available but not chosen. Selecting it automatically deselects the others in the group.</p></div></div><div class="dh-var" style="background:transparent"><div class="dh-var-stage"><label class="dh-pz-radio" style="opacity:0.4"><input type="radio" /> <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 option, shown muted and non-interactive.</p></div></div></div>

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

```dh-comp-tokens
--radio-surface-default | Unselected background | Component
--radio-surface-selected | Selected background | Component
--radio-surface-disabled | Disabled background | Component
--radio-border-default | Unselected border | Component
--radio-border-selected | Selected border | Component
--radio-border-disabled | Disabled border | Component
--radio-dot-color | Inner dot color | Component
```

> 📘 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.