Radio Group
<gcds-radio-group>

Also called: radio button, radio.

The radio group is a set of options for a single selection.

• GitHub
• Figma

Radio group anatomy - with fieldset

1. The fieldset legend acts as a heading to identify the grouped radios. Legend text is left aligned and in sentence case (only the initial letter is capitalized).
2. The fieldset hint text communicates specific requirements for the radio grouping to support task success.
3. The radio button shows, by the presence or absence of the checked button, whether an option has been selected or not.
4. The checked button shows that an option has been selected.
5. The radio label states the choice the radio button represents. Label text is in sentence case.
6. The radio hint text gives a person additional information about the choice.

Design and accessibility for radio group

Make radios visible and options clear

• Limit the number of options to 6-7.
• Limit text for each option to a few words or a short phrase and include hint text for more context.
• Generally, order options alphabetically. In some cases, it can be helpful for you to order them from most to least common.
• When possible, include an option like "None" or "None of the above" to avoid forcing an incorrect selection. With radio groups, if a person accidentally selects an option, it cannot be de-selected, or reversed.

Help a person understand how to use radios

• Avoid assuming a person will know how to use a radio group.
• Use the fieldset's hint text to include a cue for people unfamiliar with radio groups to specify they can only make a single selection. For example, "Select the response that best applies".
• Avoid pre-selecting a radio group option. This makes it more likely that a person will miss a question and submit a wrong answer.