Radio

Picks one option from a small set where every option stays visible.

Refined portWildRadio.vueForms/RadioWRadio

Try it

Click an option, or tab to one and press Space. For arrow keys between options, use Radio group.

Every readingEvery sample the logger sendsOnly outside the thresholdRoughly 40 a week for this siteNeverAlerts stay in the dashboard only

Size

Sub-line

Error

Disabled

<WildRadioGroup v-model="mode">
  <WildRadio
    value="all"
    size="sm"
    label="Every reading"
    sub="Every sample the logger sends" />
  <WildRadio
    value="threshold"
    size="sm"
    label="Only outside the threshold"
    sub="Roughly 40 a week for this site" />
  <WildRadio
    value="never"
    size="sm"
    label="Never"
    sub="Alerts stay in the dashboard only" />
</WildRadioGroup>

When to use

Use radios when only one option can be chosen and every option should stay visible.
Use Radio group for a labelled set. It adds one tab stop, arrow keys and an error message.

Don’t use it

For a choice too long to show in full. Use a select.
For a single on or off. Use a checkbox or a toggle.

Anatomy

A ring, a dot, and an optional label with a sub-line. The label and sub-line are part of the target.

Every readingOnly outside the thresholdRoughly 40 a week for this siteNeverAlerts stay in the dashboard only

<WildRadioGroup v-model="mode">
  <WildRadio value="all" label="Every reading" />
  <WildRadio value="threshold" label="Only outside the threshold"
    sub="Roughly 40 a week for this site" />
</WildRadioGroup>

Sizes

Two sizes: 18px with a 6px dot, and 24px with a 10px dot. The default is sm.

sm · 18 / dot 6

lg · 24 / dot 10

States

rest

hover

active

focus

error

unselected

selected

Keyboard focus is a solid ring outside the radio, so it reads differently from hover.

Every reading

disabled

Every reading

disabled · selected

Disabled dims the whole row to 40%, label included.

Content

Keep labels short and parallel: Every reading, Only outside the threshold, Never.
Put the consequence in the sub-line, such as “Roughly 40 a week for this site”.
Use sentence case, with no full stop.

Accessibility

A screen reader hears the label, then selected or not selected. A radio with no visible label needs ariaLabel.

Key	What it does
Tab	Moves focus to the next radio. Disabled ones are skipped.
Space	Selects the focused radio.

Props

Prop	Type	Default	Description
checked	boolean	false	Whether this option is the chosen one.
onSelect	() => void	—	Makes it operable. Called on click or Space.
label	ReactNode	—	Text beside the radio. Part of the target.
sub	string	—	A second line under the label.
size	'sm' \| 'lg'	'sm'	18px or 24px.
disabled	boolean	false	Dims the row and leaves the tab order.
state	'rest' \| 'hover' \| 'active' \| 'focus' \| 'error'	—	Forces a frame. Use error for a failed field.
ariaLabel	string	—	Accessible name when there is no label.

Tokens

Token	Value	Where it lands
--radius-full	9999px	Ring and dot.
--color-primary	#00AEEF	Selected fill.
--color-primary-active	#1877F2	Hover and press when selected; focus ring.
--global-neutral-grey-900	#7F7D83	Resting border, 4.1:1. A disabled radio keeps a lighter grey.
--global-blue-1000	#1877F2	Unselected border on hover, 4.2:1. It stays darker than the resting grey.
--color-error	#E12121	Error border, fill and label.
(no token)	rgba(0,174,239,.06 / .12)	Halo on hover and press.
(no token)	1px gap, 2px ring	Keyboard focus, outside the radio.