Preview

Code

                                                        
                                                        
                                                            <usln-radio-button-group
                                                             checked-option="0"
                                                             (uslnRadioButtonGroupChanged)="doSomething($event.detail.radioId)"
                                                        >
                                                          <div slot="radio-buttons">
                                                            <usln-radio-button
                                                              label-text="Option 1"
                                                              description="This is a great option"
                                                            >
                                                            </usln-radio-button>
                                                            <usln-radio-button
                                                               label-text="Option 2"
                                                            >
                                                            </usln-radio-button>
                                                          </div>
                                                        </usln-radio-button-group>
                                                        
                                                            

Guidelines

Radio buttons belong to the family of selectors and are used to choose one option among two or more available options in a list. We use the component in multiple places across Portal and Editor, but currently not in Player.

Use this component:

• in form UIs,
• for standalone settings,
• for filtering views.

Radio buttons versus checkboxes

Radio buttons are used to select a single option from a list of mutually exclusive ones. Checkboxes allow users to select multiple options at once.

Radio buttons versus dropdowns

Radio buttons allow to display options on the first level, therefore can be preferred over dropdowns, as they save users a click and increase visibility. Dropdowns are preferrable in case of lists with many options (generally, more than 3).

Radio buttons versus toggles

Toggles indicate a binary choice between two states: on and off (active and inactive), most commonly when enabling a setting. Toggles are also generally used for a single, immediately effective action. Radio buttons should be used when selecting an option, if two or more are available, or when the users move through a longer flow (such as filling out a form).

Usage

Standalone setting

Radio buttons can be used as standalone setting selectors, in which case they require a heading using the following typography token:

Form element

Radio buttons are most commonly used in forms. They can't be used without a text label.

Behaviour

Pre-selection of options

• A radio button can take a pre-selected state, when the selected option is a reasonable default (or an optimal choice for the user), or when the functionality would break without a pre-selection.
• If all options are equal and none is preferred, pre-selection isn't necessary.
• Pre-selection should be avoided in contexts where it could potentially introduce bias, such as certain types of forms or surveys.

Selection

• Change of state to "selected" is instant. However, applying the selection usually requires confirmation, such as clicking a "Submit" button.
• The entire component (radio button icon and the label) should be clickable.

Sorting

Options can be sorted according to:

• most to least common choice
• lowest to highest risk
• simplest to most complex choice

Alphabetical sorting should be used when the other options are not applicable.

Error display

When a required selection was not performed, error text should be displayed directly below the list of options. The options themselves should take on the error state.

Content

• Use labels that are short, direct, unambiguous and unchanging.
• Avoid offering more than 5 options.
• Capitalise the label, do not use full stops.
• For items with descriptions, the latter should be capitalised and end with a full stop. Keep the descriptions as short as possible (single-line description is ideal). Otherwise, consider other options of conveying the information, such as intro text or a message box.
• If a text label overflows its container, it should be wrapped. Avoid labels wrapping into more than 2 lines.

Do's and dont's

Variants

Default

The correct variant for most cases.

With description

To be used when all selection options require an additional explanation for the user to accomplish their action.