Radio Group

ready

Labelled set of radio options, e.g. a Yes / No question.

The Radio Group presents a small set of mutually exclusive options under a label. The default options are Yes / No, as used for the record’s boolean questions.

Anatomy

Veteran *
  1. 1 Group label — the question; rendered as a legend
  2. 2 Required marker — red asterisk when an answer is mandatory
  3. 3 Radio control — one selectable circle per option
  4. 4 Option label — the choice text beside each control

Variants

Default (Yes / No)

Veteran 
<RadioGroup label="Veteran" name="veteran" />

Custom options

Preferred contact 
<RadioGroup label="Preferred contact" name="contact" options={["Email", "Phone", "Mail"]} value="Email" />

States

Veteran

Unselected

No option chosen yet.

Veteran

Selected

One option active.

Veteran *

Required

Shows the asterisk.

Usage

✓ Do
Preferred contact

Use radios for 2–5 visible, mutually exclusive options.

✕ Don't
State

Don't use radios for long lists — switch to a Select.

Accessibility

  • All options share one name, so they behave as a single keyboard-navigable group.
  • The group label is exposed as a legend describing the choice.
  • Required groups render a visual *; pair it with required.
  • Arrow keys move selection within the group, as with native radios.

Content

  • Phrase the label as the question or attribute (“Veteran”, “Preferred contact”).
  • Keep option text short and parallel (“Email”, “Phone”, “Mail”).
  • Order options logically; put the safest or most common choice first.

Props

PropTypeDefaultNotes
labelstring—Group label (legend).
namestring—Shared radio name (required for grouping).
optionsstring[]["Yes", "No"]The choices.
valuestring—The initially selected option.
requiredbooleanfalseRenders the red * marker.
  • Select — for larger or space-constrained choice sets.
  • Text Field — for free-form input.