GC Design System Components
Home Start to use Page templates overview Basic page Components overview Breadcrumbs Button Card Checkboxes Container Date input Date modified Details Error message Error summary Fieldset File uploader Footer Grid Header Heading Icon Input Language toggle Link Notice Pagination Radios Screenreader-only Search Select Side navigation Signature Stepper Text Textarea Theme and topic menu Top navigation CSS shortcuts overview Reset styles Responsive layout State Box sizing Container sizing Display Overflow Position Visibility Font Font family Font size Font style Font weight Line height Link colour Link size Link text decoration List style Text align Text colour Text overflow Text transform Word break Margin Padding Align content Align items Align self Flex Flex direction Flex grow Flex shrink Flex wrap Gap Grid columns Grid rows Justify content Justify items Justify self Order Place content Place items Place self Background colour Border colour Border radius Border style Border width Icon names Icon size Image Cursor Pointer events Transition Styles overview Design tokens Colour tokens Spacing tokens Typography tokens Contact us Get involved Find a demo

Radios
<gcds-radios>

Also called: radio button, radio.

Radios provide a set of options for a single response.

  • GitHub
  • Figma

Radios component preview

Radio group anatomy - with fieldset

  1. The legend for radios 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 hint text for radios gives specific requirements for selecting the appropriate response.
  3. The radio button indicates the state of the selection.
  4. The checked button shows what option has been selected.
  5. The option label describes the selection. Label text is in sentence case.
  6. The option hint text gives additional information about the selection.
Radios anatomy showing the labels “legend” at the top followed by “hint text” underneath. Under that are two stacked circles with labels and hint text beside them. One of the circles is filled in with a smaller black circle.

Design and accessibility for radios

Make selections clear

  • Limit the number of options to 7.
  • Limit text for each option to a few words or a short phrase. Include hint text if more context is needed.
  • Order options in a logical way. This could mean alphabetically or from most to least common.
  • When possible, include a "None of the above" option to avoid forcing an incorrect selection. A selection can't be unselected unless another option is selected.

Make instructions clear

  • Don't assume a person will know they can only select one answer.
  • Use the hint text to specify they can only make one selection. For example, "Select the response that best applies”.
  • Avoid pre-selecting a radio option. This makes it more likely that a person will miss a question and submit the wrong answer.

Help us improve

Have questions or a request? Give feedback on our contact form.

Something's wrong? Raise it through GitHub with an account. You'll have access to the team's direct responses, progress made on your issue, and issues raised by others.

Give feedback Report an issue on GitHub
2025-06-04