Radio

Implemented

Radio button for a radio group. Wrapped by RadioGroup which manages arrow-key navigation between siblings.

Categoryatoms

Sourcepatterns/atoms/radio.html

AI HintSingle-select option — checked + onChange(value) with the label row as the 44px tap target and the 18px glyph centered inside. Group options by name; the parent owns which one is checked.

Single-select radio button. Always pair with a name so the group shares state. FR-CA: Bouton radio sélection unique.

Radio

Interactive atom (Family 1 — Tier 1)

Use inside a RadioGroup or any context where only one value is selected.

Standard (3-5 jours)

Express (1-2 jours)

Ramassage en billetterie

Non disponible

This component supports light and dark mode.

Interactive demo

Standard (3-5 jours)

Express (1-2 jours)

Ramassage en billetterie

Sélection : standard

Usage

import { Radio } from '@epasslive/design-system'

const [shipping, setShipping] = useState('standard')

<div role="radiogroup" aria-label="Mode de livraison">
  <Radio name="shipping" value="standard" label="Standard (3-5 jours)" checked={shipping === 'standard'} onChange={() => setShipping('standard')} />
</div>

Accessibility

Native <input type="radio"> with htmlFor label association.
Always wrap siblings in role="radiogroup" with an aria-label.
Arrow keys move focus + change selection; Space confirms.

Props

Prop

Type

Default

Description

value*

string

—

The radio value (used by the parent group).

label*

string

—

Visible and announced label.

checked*

boolean

—

Whether this radio is selected.

name*

string

—

Group name — must be identical across siblings.

disabled

boolean

false

Disables interaction.

required

boolean

false

Marks the group required.

id

string

—

Override the auto-generated id.

Props

Preview

Radio

Prop

Type

Required

Default

Description

value

string

Required

—

No description.

checked

boolean

Required

—

No description.

label

string

Required

—

No description.

onChange

(value: string) => void

Required

—

Called when the value changes.

disabled

boolean

Optional

false

Disables the control.

required

boolean

Optional

false

Marks the field as required.

error

string

Optional

—

Error message; takes precedence over helper text.

name

string

Optional

—

Form/field name.

tabIndex

number

Optional

—

Synced from source — no interface JSDoc yet; document on `Radio.tsx`.

onKeyDown

React.KeyboardEventHandler<HTMLInputElement>

Optional

—

Synced from source — no interface JSDoc yet; document on `Radio.tsx`.

inputRef

React.Ref<HTMLInputElement>

Optional

—

Synced from source — no interface JSDoc yet; document on `Radio.tsx`.

Quick use:<Radio />

Accessibility

ARIA roleradio

Usage

Import

tsxSnippet

import { Radio } from "@epasslive/design-system"

Example 1

tsxSnippet

<Radio />

Example 2

tsxSnippet

<Radio variant="default" />

Anti-patterns

— Do not compose atoms directly — use molecules instead

— Avoid inline styles on atoms