Components

RadioGroup

Gathers options that exclude each other under one legend and allows exactly one choice.

Storybook: Storybook
Source: Source

States

State	Visual change	Tokens
Not selected	Input border, raised background	`color-border-input`, `color-surface-raised`
Selected	Primary fill and a white dot	`color-action-primary-default`, `color-action-on-primary-default`
Focus	2 px outer focus ring with a 2 px gap	`color-focus-ring`, `border-width-focus`
Invalid	Danger border on every circle, error text	`color-border-danger`, `color-text-danger`
Disabled	Faded circle, dot and label	`color-surface-disabled`, `color-border-disabled`, `color-text-disabled`

Measurements

Property	Value	Token
Circle	16 × 16 px	`radio-size`
Dot	6 × 6 px	`radio-size` × 0.375
Gap between circle and label	8 px	`space-md`
Gap between vertical items	8 px	`space-md`
Gap between horizontal items	12 px	`space-lg`
Label text style	`body-md` (14 px)	`text.body-md`

Tokens

Values are shown for the selected brand; change the brand from the top bar.

Token	Sample	Light mode	Dark mode
`--bigbang-radio-size`		`16px16px16px`	`16px16px16px`
`--bigbang-color-border-strong`		`#8c8c8c#8c8c8c#8c8c8c`	`#8c8c8c#8c8c8c#8c8c8c`
`--bigbang-color-surface-raised`		`#ffffff#ffffff#ffffff`	`#262626#262626#262626`
`--bigbang-color-action-primary-default`		`#146d83#171717#171717`	`#77bacf#e5e5e5#e5e5e5`
`--bigbang-color-action-on-primary-default`		`#ffffff#fafafa#fafafa`	`#0a0a0a#171717#171717`
`--bigbang-color-border-danger`		`#c14347#c14347#c14347`	`#ff9a97#ff9a97#ff9a97`
`--bigbang-color-text-danger`		`#a6383c#a6383c#a6383c`	`#ffbebb#ffbebb#ffbebb`
`--bigbang-color-focus-ring`		`#146d83#737373#737373`	`#77bacf#8c8c8c#8c8c8c`
`--bigbang-space-md`		`8px8px8px`	`8px8px8px`
`--bigbang-space-lg`		`12px12px12px`	`12px12px12px`

Motion and interaction

Interaction	Property	Duration token	Easing token	Reduced motion
Selecting	The dot, `opacity` 0 → 1 and `scale` 0.6 → 1 (`motion.selectionMark`)	`motion-selection-duration` (110 ms)	`motion-selection-easing`	Scale stays at 1; the dot only appears.
Circle fill and border	`background-color`, `border-color` (`motion.hover`)	`motion-hover-duration` (110 ms)	`motion-hover-easing`	Unchanged; a colour transition.
Error text enter	`opacity` and a 4 px drop (`motion.fieldMessage`)	`motion-collapsible-duration` (150 ms)	`motion-collapsible-easing`	The distance becomes 0; the text only appears.

See Motion for the values.