RadioButton
RadioButton is an extension to standard radio button element with theming.
When to use
- Radio buttons are used when there is a list of two or more options that are mutually exclusive and the user must select exactly one choice. In other words, clicking a non-selected radio button will deselect whatever other button was previously selected in the list.
Guidelines
General
- Do not pre-select radio options. Users may not realise a question has been missed and submit the wrong answer.
- Users can only select one option from a list of radios. Do not assume that users will know how many options they can select based on the visuals alone. If needed, add a hint explaining this, for example, ‘Select one option’.
- Users cannot go back to having no option selected once they have selected one, without refreshing their browser window. Therefore, include ‘None of the above’ or ‘I do not know’ options if valid.
Layout
- Always position radios to the left of their labels. This makes them easier to find, especially for users of screen magnifiers.
- When there are more than 2 options, radios should be stacked.
- If there are only 2 options, either stack the radios or display them inline.
- Use standard-sized radios by default. However, smaller versions work well in some situations:
- For example, on a page of search results, the primary user need is to see the results. Using smaller radios lets users see and change search filters without distracting them from the main content.
Ordering
- Order radio options alphabetically or numerically by default.
- In some cases, it can be helpful to have a particular order based on context. However, care should be taken not to introduce bias into any findings.
Basic
By default, radio button has type=radio attribute and its value, which allows users to select one option from a set of options.
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" >
<label class="form-check-label" for="inlineRadio3">3 </label>
</div>
Multiple
Radios can be grouped with fieldset & legend tags. Small radios can be defined with input-sm class.
<fieldset><legend>Standard radios</legend>
<form>
<div class="form-check">
<div class="d-flex align-items-center mb-2">
<input class="form-check-input" type="radio" name="RadioOptions" id="Radio1" value="option1">
<label class="form-check-label" for="Radio1">Cheese</label>
</div>
<div class="d-flex align-items-center mb-2">
<input class="form-check-input" type="radio" name="RadioOptions" id="Radio2" value="option2">
<label class="form-check-label" for="Radio2">Mushroom</label>
</div>
<div class="d-flex align-items-center mb-2">
<input class="form-check-input" type="radio" name="RadioOptions" id="Radio3" value="option3" disabled>
<label class="form-check-label" for="Radio3">Disabled</label>
</div>
<div class="d-flex align-items-center mb-2">
<input class="form-check-input" type="radio" name="RadioOptions" id="Radio4" value="option4" disabled checked>
<label class="form-check-label" for="Radio4">Disabled Preselected</label>
</div>
</div>
</form>
</fieldset>
<fieldset><legend>Small radios</legend>
<form>
<div class="form-check">
<div class="d-flex align-items-center mb-2">
<input class="form-check-input input-sm" type="radio" name="RadioOptions" id="Radio5" value="option5">
<label class="form-check-label" for="Radio5">Cheese</label>
</div>
<div class="d-flex align-items-center mb-2">
<input class="form-check-input input-sm" type="radio" name="RadioOptions" id="Radio6" value="option6">
<label class="form-check-label" for="Radio6">Mushroom</label>
</div>
<div class="d-flex align-items-center mb-2">
<input class="form-check-input input-sm" type="radio" name="RadioOptions" id="Radio7" value="option7" disabled>
<label class="form-check-label" for="Radio7">Disabled</label>
</div>
<div class="d-flex align-items-center mb-2">
<input class="form-check-input input-sm" type="radio" name="RadioOptions" id="Radio8" value="option8" disabled checked>
<label class="form-check-label" for="Radio8">Disabled Preselected</label>
</div>
</div>
</form>
</fieldset>
Disabled
When disabled is present, the element cannot be edited.
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
Invalid
The 'invalid' class is used to add an invalid state style to indicate a failed validation.
<input class="form-check-input invalid" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" >
Accessibility
- The component uses semantic markup and therefore it should be accessible if it does not have semantic markup then for its accessibility use role= “radio”
- A group of radio buttons takes a single tab stop. The user changes the selected radio button using the arrow keys (up/down or left/right). Pressing Tab again will move the focus out of the radio button group to the next component.