Design System
Radiobutton
Lets people pick exactly one option from a set. eShop platform — supports checked and error states with an optional label and supportive text. Use radios in a group where only one choice is valid at a time.
Playground
Selection
Unchecked, checked, and error.
Label & supportive text
The control can stand alone, carry a label, add supportive helper text, and mark a required field with an asterisk.
Disabled
Disabled radios use muted fills and content, with a not-allowed cursor.
When to Use
Best for
- Choosing exactly one option from a short, mutually exclusive set
- Settings where all options should stay visible at once (shipping method, plan)
- Groups of 2–5 options — above that, a select or dropdown scales better
Consider alternatives when
- More than one option can be selected — use a Checkbox
- Toggling a single on/off setting — use a switch or toggle
- Many options in limited space — use a select or dropdown
Props
| Prop | Type | Required | Description |
|---|---|---|---|
checked | boolean | No | Selected state (controlled). Pair with onChange |
defaultChecked | boolean | No | Initial selected state (uncontrolled, default: false) |
error | boolean | No | Error state — critical fill, red border, critical helper text (default: false) |
label | string | No | Label text. When omitted, only the control renders |
supportiveText | string | No | Helper text under the label |
required | boolean | No | Show a required asterisk after the label (default: false) |
isDisabled | boolean | No | Disable interaction (default: false) |
onChange | (checked: boolean) => void | No | Fires when this radio becomes selected |
name | string | No | Radio group name — radios sharing a name are mutually exclusive |
value | string | No | Value submitted with the form when selected |
id | string | No | Element id (autogenerated when omitted) |
Import
import { Radiobutton } from '@/components/Radiobutton/eshop';
Wrap the radio (or any ancestor) in <div data-platform="eshop"> so the eShop typography classes apply. Give grouped radios the same name so only one can be selected.
Design Tokens
| Purpose | Token |
|---|---|
| Control fill (unchecked) | var(--color-fill-element-field) |
| Control border (unchecked) | var(--color-border-element-field) |
| Control fill (checked) | var(--color-fill-element-field-selected) |
| Control fill (error) | var(--color-fill-element-critical-soft) |
| Control border (error) | var(--color-border-element-field-error) |
| Control fill (checked disabled) | var(--color-fill-element-bold-disabled) |
| Inner dot | var(--color-content-primary-inverse) |
| Label text | var(--color-content-primary) |
| Supportive text | var(--color-content-secondary) |
| Error / required text | var(--color-content-critical) |
| Disabled content | var(--color-content-disabled) |
| Focus ring | var(--color-border-element-focus-ring) |
| Control radius | var(--primitive-radius-full) |
| Typography (label) | .body-md / .body-sm (scoped to [data-platform="eshop"]) |