Radio buttons

Library integration

Use the codes below to add this component to your project. Download the latest version of the library to easily implement our full range of components.

Angular

<cpc-ds-radio-button 
            *ngFor="let country of countries; let i=index" 
            formArrayName="selectedCountries" 
            id="country_radio_{{i}}" 
            name="country_radio" 
            [text]="country.name" 
            [value]="country.value" 
            
            [disabled]="(i === 3) ? true : false" 
            (change)="onCheckboxChange($event)">

</cpc-ds-radio-button> 

HTML

<script src="[JS-PLACE-HOLDER]"></script> 

<div role="radiogroup" aria-labelledby="radio-names">
                    <p class="radio" id="radio-names">Select a radio:</p>
                    <div class="checkbox-container">
                        <input class="by-keyboard" checked id="one" name="radio" type="radio">
                        <label for="one">A quick brown fox jumps over a lazy dog. A quick brown fox jumps over a lazy dog.</label>
                    </div>

                    <div class="checkbox-container">
                        <input class="by-keyboard" id="two" name="radio" type="radio">
                        <label for="two">Radio button item 2</label>
                    </div>

                    <div class="checkbox-container">
                        <input class="by-keyboard" id="three" name="radio" type="radio">
                        <label for="three">Radio button item 3</label>
                    </div>

                    <div aria-disabled="true" class="checkbox-container disabled">
                        <input class="by-keyboard" disabled id="dis" name="radio" type="radio">
                        <label for="dis">Radio disabled</label>
                    </div>

</div>

<div role="radiogroup" aria-labelledby="radio-disabled-names">
                    <p class="radio" id="radio-disabled-names">Disabled radio:</p>
                    <div aria-disabled="true" class="checkbox-container disabled">
                        <input disabled class="by-keyboard" id="dis" name="radio2" type="radio" checked="checked">
                        <label for="dis">Radio button item 1</label>
                    </div>
                    <div aria-disabled="true" class="checkbox-container disabled">
                        <input disabled class="by-keyboard" id="dis2" name="radio2" type="radio">
                        <label for="dis2">Radio button item 1</label>
                    </div>
  </div>

General guidelines

Radio buttons allow users to choose one option from a group of related options.

These choices are mutually exclusive, meaning that the user can’t select more than one option.

If you’d like to allow users to select more than one option, use checkboxes.

Radio buttons are ideal for allowing users to select from a range of available options quickly and conveniently.

Interaction

Users can only select one radio button. If they pick another, the previously selected button is automatically deselected.

Using keyboards and assistive technologies, users navigate to a radio button group with tab and select an option with arrow keys.

States

1. Unselected:
   In this state, a radio button is empty. Clicking on the radio button will select it.
2. Selected:
   Only one radio button can be selected at a time.
3. Focus:
   In this state, a radio button will be surrounded by a blue box and activated by pressing spacebar.
4. Disabled:
   In this state radio button items cannot be selected, deselected, or activate a focus state.

Accessibility considerations

Using a mouse, radio buttons activate when a user clicks the icon or its label.

Using a keyboard or assistive technology, users can tab to the radio button grouping and use arrow keys to navigate selections.

Ensure there is enough vertical spacing between radio buttons to prevent selection errors.

Use the HTML tags <div role=”radiogroup”> to wrap the radio button groups. These tags help assistive technologies interpret your groupings in a way users can easily navigate.

Use headers to title radio button groupings.

Error messages

When there is an error message, place it under the last radio button item.

Design specs

General guidelines

Radio buttons should be clearly labelled to avoid any confusion when users pick an option. Write clear, concise and comprehensive labels in sentence case. Explain exactly what will happen if a selection leads to a specific action or change.

Best practices

• A radio button should belong to a group of 2 or more selections.
• Radio buttons are grouped by setting the “name” to all associated items.
• A radio button should be accompanied by a label containing a descriptive value.
• Clicking the label should also select the associated radio button.

Guidelines

Keyboard interaction

When a radio button inside a radio group has focus

• Space: Checks the radio button if it's not checked.
• Up / Left arrow: Moves focus to the preceding radio button in the radio group and checks it. If the currently focused radio button is the first in the radio group, the focus moves to the last one.
• Down / Right arrow: Moves focus to the next radio button in the radio group and checks it. If the currently focused radio button is the last in the radio group, the focus moves to the first one.
• Tab: Focus moves out of the radio group and onto the next focusable element on the page.
• Shift + Tab: Focus moves out of the radio group to the preceding focusable element on the page.

When focus is on the focusable element preceding the radio group on the page

• Tab: focus moves to the radio group:
  • If none of the radio buttons are checked, focus moves to the first radio button in the group, which remains not checked
  • If a radio button is checked, then focus moves to it

When focus is on the focusable element that follows the radio group on the page

• Shift + Tab: focus moves to the radio group
  • If none of the radio buttons in the group are checked, focus moves to the last radio button in the group, which remains not checked
  • If a radio button is checked, then focus moves to it

Aria properties

The radio button component can have following ARIA properties:

• Role of "radio". There is no need to add the role attribute if using native <input type=”radio”/>.
• Each radio group can have the role of "radiogroup".
• Each radio button can be labelled by its content (label).
• The state indication property, aria-checked, should be set to "true" when checked, and "false" when not checked.
• The group label and group error text can be associated with the radio group using the aria-labelledby property. This property takes the ID of the group label and group error text as input.

Testing

When testing a radio button, the tester must ensure:

• The radio button is fully keyboard operable
• Indications for focused and hovered states are clear and prominent
• The state change (checked/not checked) is clear and doesn't rely on colour alone
• Radio buttons exist in a group, and that only one radio button out of the group can be selected at a time
• A radio button has the role of "radio"
• The screen reader announces the radio button label, role, and state (checked / not checked)
• The screen reader announces the radio group label and error text (if any) when entering the group

Related content

• Dropdown menus
• Checkboxes