Default

Bordered

 

Overview

The Radio Input component enables marketers to make single selections from a list of options, facilitating data input and configuration processes. This component enhances user experience by providing a clear and intuitive way to choose from mutually exclusive options.

Design

Structure

Group label: A label that provides the description for the for the list of items

Description (optional): This can be included below the label if there is additional context or information that should be provided to the marketer

Indicator: Used to indicate whether the item in the list is selected or not

Item label: A label that follows the indicator to describe the item

 

Radio item

The radio item is an individual selection within a radio group.

Default

 

Bordered

 

Additional properties

 

Radio group

Variants

Radio groups are collection of radio items that stack vertically by default. Stacking horizontally should be avoided when possible. At least one item in the group should always be selected by default.

Default

 

Orientation

Depending on the number of options and structure of the form, the input group can structured vertically (preferred) or horizontally.

Guidelines

Limit options

The base component includes 4 radio button options. If more than 4 options are allowed, a select is preferred over a radio group.

 

 

Avoid more than 3 horizontally

While it is preferred to stack the radio group vertically, if there is a scenario where space is a concern and there are three options or less—it is acceptable to stack the radio group horizontally.

 

 

Radio group orientation

Radio group should stack items vertically by default. In cases where options may need to stacked horizontally, the options should be limited to 2 radio items per row. If there are more than 4 options, an input select is preferred.

Vertical bordered checkbox variants should flex on smaller displays.

 

Miscellaneous

• Make the the safest, lowest risk option the default selection. If risk is not a concern, make the most likely selection the default.
• Prefer radio buttons to select menus when there are fewer than ~5 options to choose from.
• Prefer aligning items vertically, rather than horizontally, to make them more scannable.
• To emphasize the significance and impact of a radio option within a form, use a the bordered variant.​
• A badge should be used sparingly between options and should be used in a way to indicate a preferred or recommended option.

 

• Make the the safest, lowest risk option the default selection. If risk is not a concern, make the most likely selection the default.
• Radio lists should stack horizontally if more than 3 options
• When bordered, the width of the radio items should be 100% of the radio list’s width
• If using icons or descriptions, all radio items in the radio group should also have them enabled.

 

• Radio items should not contain a nested child instance of a radio group.
• Don’t create custom configurations of Radio items, use the built-in component properties or reach out in #design-system if the current structure doesn’t fit your needs.

 

Content

• Sentence case the radio button group’s title, and the options within the radio button list.​
• Radio item description should be a brief sentence. If additional explanation is needed, consider using a help tip, popover, or link to external support documentation.

Accessibility

• Clicking the label should check its input.
• The label should have a for attribute matching the input’s id, to work with assistive technologies.
• Radio button groups should be focusable by tabbing, and the selection should be changeable with arrow keys. (This is native behavior with correct markup.)
• Use semantic HTML elements and appropriate ARIA attributes to enhance screen reader compatibility and provide context for the Radio Input component.
• Provide sufficient color contrast and visual indicators to highlight selected options and improve visibility for users with low vision or color vision deficiencies.

Health

Default

 

Bordered