Radio — Cayuse Design System

Examples

Radio group

Submission type New proposal Renewal of an existing award Resubmission after review Administrative supplement (requires an active award)

html

<fieldset class="cds-choice-group">
  <legend class="cds-field__label">Submission type</legend>
  <label class="cds-choice">
    <input class="cds-choice__control" type="radio" name="submission" checked> New proposal
  </label>
  <label class="cds-choice">
    <input class="cds-choice__control" type="radio" name="submission"> Renewal
  </label>
</fieldset>

Horizontal layout, for two or three short options

Include indirect costs Yes No

html

<fieldset class="cds-choice-group cds-choice-group--horizontal">…</fieldset>

Figma properties

Property	Values	Notes
`Radio`	Selected · Unselected	Selection state.
`State`	Default · Disabled · Focused · Error	Runtime state.

Usage

When to use it

Use for 2–5 mutually exclusive options that the user should be able to compare at a glance.
Give every group a <legend> stating the question.
Set a sensible default where one exists; leave all unselected where the choice is consequential and there is no safe default.
Add an explicit “None” or “Not applicable” option rather than expecting the user to leave the group empty.

When not to use it

Do not use where more than one answer is valid — that is Checkbox.
Do not use for more than about five options — use a Select.
Do not use a radio group for on/off — use a Toggle.
Do not make the group impossible to undo: once a radio is selected, the user cannot return to nothing selected without a “None” option.

Accessibility

All radios in a group share one name. Without it, they are unrelated controls that merely look like a group.
A radio group is one tab stop. Tab enters the group at the selected option; arrow keys move between options and change the selection. This is native behaviour — do not override it.
The <legend> is announced with each option, so it should read naturally in front of the option text.
Because arrowing changes the value, never wire a radio to an irreversible action.

Tokens consumed

Token	Applied to	Resolves to
`--primary-brand-color`	Selected fill	`#0076b6`
`--error-border`	Error outline	`--color-red-500`
`--disabled-text`	Disabled label	`#888c8c`