Radio group

Several radios bound to one value, with one label, hint and error for the whole group.

Refined portWildRadioGroup.vueForms/Radio GroupWRadioGroup

Try it

Tab to the group, then use the arrow keys to change the choice.

Report readingsApplies to 12 loggers

Every 5 minutes288 readings a day

Every 15 minutes96 readings a day

Hourly24 readings a day

DailyOne reading a day

Shorter intervals use more battery.

Layout

Style

Size

Sub-lines

Error

Disabled

<WRadioGroup
  value={reportEvery}
  onChange={setReportEvery}
  label="Report readings"
  hint="Applies to 12 loggers"
  help="Shorter intervals use more battery."
  size="sm"
  options={[
    { id: '5m', label: 'Every 5 minutes', sub: '288 readings a day' },
    { id: '15m', label: 'Every 15 minutes', sub: '96 readings a day' },
    { id: '1h', label: 'Hourly', sub: '24 readings a day' },
    { id: '1d', label: 'Daily', sub: 'One reading a day' },
  ]}
/>

When to use

Use a radio group when people pick exactly one of two to six options.
Use it when every option should stay visible, so they can be compared.
Use option cards when each choice needs a line of explanation.

Don’t use it

For more than six options. Use a Select.
For several choices at once. Use Checkbox.
For an on or off setting. Use a Toggle.
To switch views. Use Segmented.

Anatomy

A label above, an optional hint on the right, the options, then help or an error below.

Pressure unitShown on every chart

kPa

bar

psi

Changes how pressure readings are shown.

Layouts

Stack options that are sentences. Use a row only for three or four short words.

kPa

bar

psi

vertical

kPa

bar

psi

horizontal

Option cards

When each choice needs a line of explanation, make the option a card.

Pressure unit

kPaKilopascals

barBar, equal to 100 kPa

psiPounds per square inch

Selected adds a blue tint and ring. The edge stays 1px in every state, so choosing never shifts the layout.

States

kPa

bar

psi

rest

kPa

bar

psi

Choose a unit.

error

kPa

bar

psi

one option disabled

kPa

bar

psi

group disabled

Error turns every enabled ring red and leaves the labels dark. Write the message as what to do: “Choose a unit.”

Accessibility

The group is one tab stop, and a screen reader hears its label as focus enters. An error is announced when it appears. Give a group with no visible label an ariaLabel.

Key	What it does
Tab	Moves to the chosen option, or the first enabled one.
↓ / →	Chooses the next option, skipping disabled ones and wrapping.
↑ / ←	Chooses the previous option.
Home / End	Chooses the first or last option.
Space / Enter	Chooses the focused option.

Props

Prop	Type	Default	Description
value	string	—	The chosen option’s id.
defaultValue	string	—	Starting choice when value isn’t set.
onChange	(id: string) => void	—	Called with the newly chosen id.
options	{ id, label, sub?, disabled? }[]	—	The choices, in order.
label	string	—	The group’s visible name.
hint	string	—	Short context, right of the label.
help	string	—	Guidance under the options.
error	boolean \| string	false	A string replaces the help as the message.
orientation	'vertical' \| 'horizontal'	'vertical'	Stack or row.
variant	'plain' \| 'card'	'plain'	Card adds an outline, a selected tint and padding.
size	'sm' \| 'lg'	'sm'	Radio diameter: 18 or 24px.
disabled	boolean	false	Disables every option.
name	string	—	Posts the value with a form.
ariaLabel	string	—	Accessible name when there’s no visible label.

Tokens

Token	Value	Where it lands
--global-blue-1000	#1877F2	Chosen radio, unchosen hover, focus ring.
--global-blue-1100	#0C296A	Chosen hover, unchosen press.
--global-blue-1200	#081B45	Chosen press.
--global-neutral-grey-900	#7F7D83	Resting radio ring.
--global-neutral-grey-700	#C9C9CC	Disabled ring, card outline on hover.
--global-neutral-grey-500	#E6E6E6	Resting card outline.
--global-blue-300	#BDEDFF	Ring around a chosen card.
--global-blue-100	#EBFAFF	Ground of a chosen card.
--global-red-800	#E12121	Error ring and message.
--global-red-300	#FFC9C9	Card outline in the error state.
--global-neutral-grey-1300	#0A090B	Option labels.
--global-neutral-grey-1100	#2D2B32	Sub-lines.
--global-neutral-grey-1000	#4F4D55	Group label, hint and help.
--radius-lg	8px	Card corners.