Radio Button

Examples

<div class="row">
    <div class="col">
        <div class="form-check">
            <input class="form-check-input" type="radio" value="" id="radioDefault" />
            <label class="form-check-label" for="radioDefault">
                Default
            </label>
        </div>
    </div>
    <div class="col">
        <div class="form-check">
            <input class="form-check-input" type="radio" value="" id="radioActive" checked />
            <label class="form-check-label" for="radioActive">
                Active
            </label>
        </div>   
    </div>
    <div class="col">
        <div class="form-check">
            <input class="form-check-input" type="radio" value="" id="radioDisabled" disabled />
            <label class="form-check-label" for="radioDisabled">
                Disabled
            </label>
        </div>
    </div>
</div>

Anatomy

1. Radio: Allows users to select and deselect the radio button.
2. Label: Informs the user what the option is for the radio button.

Spacing

Within the radio button
Ensure that there is at least 8px of horizontal spacing between the radio button and the label.

Usage guidelines

Best practices:

1. The list of options should be structured in a logical order, such as from the simplest operation to most complex, or least risk to most.
2. Avoid nesting radio buttons with other radio buttons or checkboxes.

Radio buttons should be used when:

1. You want users to only select one item from a list of options.

Radio buttons should not be used when:

1. You want users to select multiple options. Using the checkbox component would be more appropriate.

Usability guidelines

List available options vertically
It is advisable to display options in a vertical list, as horizontal arrangements can confuse users and make it harder to identify which label corresponds to each option.

Use logical labels
Ensure that labels for radio buttons and groups are clear to the user.

Logical ordering
Ensure that options provided are organised in a meaningful way as this would help users to find the options easily.

Ensure there is enough spacing
Space options out and ensure there is adequate space for touch devices or mobile screens.

Behaviour
Space options out and ensure there is adequate space for touch devices or mobile screens.

Accessibility guidelines

Aria attributes

1. Each radio element is labelled by its content, has a visible label referenced by aria-labelledby, or has a label specified with aria-label or has a label specified with for attribute which points to the radio element's id attribute.
2. If elements providing additional information about either the radio group or each radio button are present, those elements are referenced by the radiogroup element or radio elements with the aria-describedby property.

Keyboard accessibility

1. Tab or Shift-Tab to move focus into and out of the radio group. When focus moves into a radio group:
   1. If a radio button is checked, focus is set on the checked button.
   2. If none of the radio buttons are checked, focus is set on the first
2. Space checks the focused radio button if it is not already checked.
3. ↓, → move focus to the next radio button in the group, uncheck the previously focused button, and check the newly focused button. If focus is on the last button, focus moves to the first button.
4. ↑, ← move focus to the previous radio button in the group, uncheck the previously focused button, and check the newly focused button. If focus is on the first button, focus moves to the last button.

Focus indicator

1. Ensure that radio buttons have a clear, visible focus indicator to help users identify which element is currently focused.
2. Group radio buttons within a fieldset and provide a legend to describe the group contextually. Ensure logical focus order within the group.

Radio button design tokens

$form-check-input-width: 1.125em !default;
$form-check-min-height: $font-size-base * $line-height-base !default;
$form-check-padding-start: $form-check-input-width+.5em !default;
$form-check-margin-bottom: .125rem !default;
$form-check-label-color: null !default;
$form-check-label-cursor: null !default;
$form-check-transition: null !default;
$form-check-input-active-filter: brightness(90%) !default;
$form-check-input-bg: $input-bg !default;
$form-check-input-border: 1px solid rgba($black, .25) !default;
$form-check-input-border-radius: .25em !default;
$form-check-radio-border-radius: 50% !default;
$form-check-input-focus-border: $input-focus-border-color !default;
$form-check-input-focus-box-shadow: $input-btn-focus-box-shadow !default;
$form-check-input-checked-color: $component-active-color !default;
$form-check-input-checked-bg-color: $component-active-bg !default;
$form-check-input-checked-border-color: $form-check-input-checked-bg-color !default;
$form-check-input-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='#{$form-check-input-checked-color}' viewBox='0 0 16 16'><path d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/></svg>") !default;
$form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>") !default;
$form-check-input-indeterminate-color: $component-active-color !default;
$form-check-input-indeterminate-bg-color: $component-active-bg !default;
$form-check-input-indeterminate-border-color: $form-check-input-indeterminate-bg-color !default;
$form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") !default;
$form-check-input-disabled-opacity: .5 !default;
$form-check-label-disabled-opacity: $form-check-input-disabled-opacity !default;
$form-check-btn-check-disabled-opacity: $btn-disabled-opacity !default;
$form-check-inline-margin-end: 1rem !default;