Radio button · Sprout — Aceve Design System

Exactly one option is selected at all times once a group has a default — never zero, and never more than one. If the user genuinely needs to select none, add an explicit "None" option rather than leaving every radio unchecked.

Anatomy

Size

Three sizes from the Figma component — 12 / 14 / 16px. 14px (medium) is the Sprout default.

States

Default, hover and disabled, each either unselected or selected — the full state set from the Figma component.

Radio group

Three or more mutually exclusive options, sharing one name so the browser and screen readers treat them as a single group — arrow keys move the selection, and selecting one clears the others automatically.

Do's & Don'ts

Preferred contact method?

EmailPhonePost

Use for exactly one choice from a short, visible list of options

Which modules do you use?

QuotingInvoicing

Don't

Don't use radio buttons when more than one answer is allowed — use checkboxes

Standard delivery

Always ship a group with a sensible default already selected

Standard deliveryExpress delivery

Don't

Don't leave every option unchecked — that reads as a bug, not a neutral choice. Add an explicit “None” option if that's genuinely needed

Spec

Circle size12x12px (small), 14x14px (medium, default), 16x16px (large)

Circle radiusFull — always a circle

Inner dot~50% of the circle diameter, same colour as the border when selected

Border1px, var(--ink-2) unselected, var(--accent) selected, var(--line-strong) disabled

Label gap8px between circle and label

Label colourvar(--ink-1), var(--sprout-states-disabled) when disabled

Focus2px var(--accent-deep) outline, 2px offset, on the painted circle (the real input is visually hidden)

Accessibility

Real <input>Each AceveRadio renders a real, visually-hidden type="radio" input — never a div styled to look like one. Keyboard, screen readers and forms all work for free.

GroupingEvery option in a group shares the same name, wrapped in a <fieldset> with a <legend> naming the question — screen readers announce both the group and the count ("2 of 4").

KeyboardArrow keys move selection within a native radio group; Tab moves to and from the group as one stop, not once per option.

Focus indicatorVisible on the painted circle via :focus-visible, since the real input is opacity:0 and would otherwise show no focus ring at all.

Never zero selectedA group should always have a default. An all-unchecked group reads as broken, not neutral — add an explicit option instead.

Radio button.