Radio buttons

Overview

Radio buttons are used for mutually exclusive choices, not for multiple choices. Only one radio button can be selected at a time. When a user chooses a new item, the previous choice is automatically deselected.

When to use

• In forms on a full page, in overlayers,...
• To change from one setting to another
• To choose a single item within data tables or lists.

If a user can select only one option from a list, radio buttons should be used instead of checkboxes. Checkboxes allow the user to select multiple items in a set whereas radio buttons allow the user to select only one option.

---

States

1. Default state - Unselected
   State visible by default with no option selected.
2. Hover/Focused state
   State visible when the cursor hovers the button and triggered by keyboard navigation or click. Cursor becomes a pointer.
3. Selected state
   State visible with option is selected.
4. Disabled state
   State visible if the radio button is not clickable. All elements are displayed but they are greyed out in order to signify the change of state.
5. Error state
   State visible when a radio button should be checked and it’s not the case. All elements are displayed in another colour in order to signify the state.

---

Anatomy

1. Legend (optional)
   Communicates what needs to be selected below.
2. Input
   A radio button input indicating the appropriate state. By default it is unselected.
3. Label
   Labels indicates the option that will be selected when clicked.

---

Alignment

Radio button labels are positioned to the right of their inputs. If there is a radio button grouping, they are laid out vertically. Vertical listings are easier for the reader to identify which radio button is related to which label.

---

Content

Legend

• If necessary, a legend can accompany a set of checkboxes to provide further context or clarity.
• A group label (legend) can either state the category of the grouping or describe what actions to take below.
• Regardless of whether the label is visible in the interface, a group label is always needed in code as from 2 checkboxes. See the radio button code tab for more information.

Label

• Always use clear and concise labels for checkboxes.
• Be explicit about the results that will follow if the radio button is selected.
• Labels appear to the right of radio button inputs.
• We recommend radio button labels being fewer than three words.
• Do not truncate radio button label text with an ellipsis.

---

Related elements

Radio button vs checkbox

Whereas radio buttons represent a group of mutually exclusive choices, users can select one or more checkboxes from a group. In use cases where multiple selection of a group is allowed, use the checkboxes component instead of the radio buttons.
More info about checkboxes

Radio button vs. switch

Generally, toggle switches are preferred when the resulting action will be instantaneously applied, without the need for further confirmation. Checkboxes generally represent one input in a larger flow which requires a final confirmation step.
More info about switch

Radio button vs. select

If available options can be collapsed, consider using a select menu instead, as it uses less space.
More info about select

Radio button vs selected boxes

Selectable boxes allow the user to select unique or multiple options.
More info about selectable boxes

Sizes and colors

Configuration metadata (DSRadioComponent)

Selector: ds-radio

Class: DSRadioComponent

e2e testing Id: None

Use case example

Inputs

Name	Type	Default	Required	Description
error	boolean	false	No	Applies the error CSS class
errorMessage	string	null	No	The text in case ot an error
label	string	null	No	Control label
legend	string	null	No	Control legend
negative	boolean	false	No	Defines light/dark style of the component
id	string	undefined	Yes	Component unique id
disabled	boolean	false	No	Defines if the control is disabled
selected	boolean	false	No	Defines if the control is selected
name	string	null	No	Defines name attribute of the control

Outputs

Name	Type	Description
onSelect	EventEmitter	Emits when the control is selected

Models

None

---

Configuration metadata (DSRadioButtonComponent)

Selector: ds-radio-button

Class: DSRadioButtonComponent

e2e testing Id: None

Use case example

Inputs

Name	Type	Default	Required	Description
config	IRadioButtonConfig	{ choices: [], errorMessage: '' }	No	The component configuration
error	boolean	false	No	Applies the error CSS class

Outputs

None

Models

        export interface IRadioButtonConfig {
            choices: IRadioButtonChoice[];
            preselected?: string;
            legend?: string;
            legendNgClass?: string;
            errorMessage?: string;
            negative?: boolean;
            fieldsetNgClass?: string;
        }

        export interface IRadioButtonChoice {
            id?: string;
            label: string;
            value?: string;
            disabled?: boolean;
        }