Radio

A round control for picking exactly one option from a set. Like the checkbox it comes as the control, a label row or a card, neutral or brand, flat or with a shadow.

StarterTeamScale

import { Radio, RadioLabel } from '@orvain/react';
 
<fieldset>
  <legend>Plan</legend>
  <RadioLabel name="plan" value="free" label="Free" description="For personal projects." defaultChecked />
  <RadioLabel name="plan" value="pro" label="Pro" description="For teams." />
</fieldset>
 
// Bare control: name it with aria-label
<Radio name="size" value="s" aria-label="Small" />

Add an unselected neutral Orvain Radio, no shadow.

Orvain MCPIncluded with the library

When to use#

For two to six mutually exclusive options that benefit from being compared: a plan, a delivery speed.
As cards when each option needs a picture or a description.

When not to use

Use a Dropdown for long lists or where space is tight.
Use Checkboxes when several options can be selected.

Anatomy#

1Circle

16px inside a 20px frame, with a white dot when Active; the click target is 24px.

2Label row

Label, sub-label, badge, description and link, as for the checkbox.

3Card

A bordered card with the circle on the right; avatars or logos optional.

States#

Default and Active?

Empty ring, or filled with the dot.

Hover

The ring darkens one step.

Focused

The focus ring, on keyboard focus only.

Disabled

Muted and inert.

Brand? and Shadow?

Brand fills in #005cf8; Shadow adds the soft drop.

Source#

Preview – final code pending

The Radio is available in the Figma library with every variant and state shown above. The React and Vue source, props table and install command will be added to this page when the code library is released.

Get notified when the source is published Get notified when the source is published

Used in these blocks

radio groups forms