COMPONENTS

Radio

Radio buttons allow users to make a single selection from a set of options.

View GSUI Toolkit Documentation (Internal Only)
View in Figma (Internal Only)
radio-intro.png
Anatomy
radio-anatomy.png
  1. Radio Button
  2. Label
Variations

Radio buttons are always displayed as a part of a group of two or more options. Radio buttons can be grouped one of two ways — horizontally inline or vertically stacked.

radio-variations.png
Appearance
Label Placement

Label placement is to the right of the button by default, however, the labels can also be placed on the left.

radio-label-placement.png
Behaviors
States

Radio buttons have four states — unselected, selected, disabled or error. Only one button within a group of radio buttons can be selected. For scenarios where the user can select more than one option use Checkbox or Select Multiple.

radio-states.png
Sizes

Radio can be displayed in large, medium and small sizes.

radio-sizes.png
Guidelines
  • No more than one option from a radio group can be be selected.
  • Present the options in a logical order for the best context. Some examples include alphabetically or by priority.
  • Always provide a label for a radio button.
  • Write labels in sentence case.
  • If there are two options showing an on/off setting, consider using Switch.
  • For lists with more than ten options, consider using a Select.
  • When there are only two or three options with short labels, consider using a Button Select.
    • Related Content

    Checkbox

    Checkboxes allow multiple selections from a set of options.

    Select

    Select allows users to choose items from a list shown in a dropdown menu.

    Button

    Buttons allow users to take an action.

    Switch

    Switch toggles a single option on or off.

    Terms of UseGive FeedbackRegulatory DisclosuresPrivacy and CookiesSecurity