Overview
Overview
Radio buttons are a type of control input that allow users to select one item from a predefined set of mutually exclusive options.
Default example
Vertically stacked radio buttons.
Vanilla example
Palette
<!-- This code displays a fieldset containing a list of radio buttons -->
<!-- The fieldset contains a legend element to provide a description of the radio buttons -->
<fieldset class="qld__fieldset" aria-describedby="radio-example-hint">
<legend class="qld__fieldset__legend">
<abbr title="required">*</abbr>Label
</legend>
<!-- The hint text provides instructions for the user -->
<span class="qld__hint-text" id="radio-example-hint">Select an option</span>
<!-- The radio buttons are contained in a group with a qld custom class 'qld_form-field' -->
<div class="qld_form-field qld__control-group">
<!-- Radio option 1 -->
<div class="qld__control-input qld__control-input--block">
<input class="qld__control-input__input" type="radio" name="1-radio-ex" id="1-rb-laptop" role="radio"
aria-checked="false">
<label class="qld__control-input__text" for="1-rb-laptop">Laptop</label>
</div>
<!-- Radio option 2 -->
<div class="qld__control-input qld__control-input--block">
<input class="qld__control-input__input" type="radio" name="1-radio-ex" id="1-rb-phone" role="radio"
aria-checked="false">
<label class="qld__control-input__text" for="1-rb-phone">Phone</label>
</div>
<!-- Radio option 3 -->
<div class="qld__control-input qld__control-input--block">
<input class="qld__control-input__input" type="radio" name="1-radio-ex" id="1-rb-tablet" role="radio"
aria-checked="false">
<label class="qld__control-input__text" for="1-rb-tablet">Tablet</label>
</div>
</div>
</fieldset>
<!-- This code displays a fieldset containing a list of radio buttons -->
<!-- This list uses the class 'qld__control-input--small' to make the radio buttons smaller and more compact -->
<!-- The fieldset contains a legend element to provide a description of the radio buttons -->
<fieldset class="qld__fieldset" aria-describedby="radio-example-hint">
<legend class="qld__fieldset__legend">
<abbr title="required">*</abbr>Label
</legend>
<!-- The hint text provides instructions for the user -->
<span class="qld__hint-text" id="radio-example-hint">Select an option</span>
<!-- The radio buttons are contained in a group with a qld custom class 'qld_form-field' -->
<div class="qld_form-field qld__control-group qld__margin-t-p">
<!-- Radio option 1 -->
<div class="qld__control-input qld__control-input--small qld__control-input--block">
<input class="qld__control-input__input" type="radio" name="1-radio-ex-sm" id="1-rb-laptop-sm" role="radio"
aria-checked="false">
<label class="qld__control-input__text" for="1-rb-laptop-sm">Laptop</label>
</div>
<!-- Radio option 2 -->
<div class="qld__control-input qld__control-input--small qld__control-input--block">
<input class="qld__control-input__input" type="radio" name="1-radio-ex-sm" id="1-rb-phone-sm" role="radio"
aria-checked="false">
<label class="qld__control-input__text" for="1-rb-phone-sm">Phone</label>
</div>
<!-- Radio option 3 -->
<div class="qld__control-input qld__control-input--small qld__control-input--block">
<input class="qld__control-input__input" type="radio" name="1-radio-ex-sm" id="1-rb-tablet-sm" role="radio"
aria-checked="false">
<label class="qld__control-input__text" for="1-rb-tablet-sm">Tablet</label>
</div>
</div>
</fieldset>
Valid and invalid states
Adds a border around the control inputs to indicate valid or invalid selections.
Vanilla example
Palette
<!-- This code snippet is an HTML structure containing two sets of radio buttons, one with a valid state and the other with an invalid state. -->
<div class="container">
<div class="row">
<div class="col-xs-6">
<!-- Start of the fieldset element-->
<fieldset class="qld__fieldset">
<!-- Fieldset legend describing the purpose of the radio buttons -->
<legend class="qld__fieldset__legend" id="legend-valid"><abbr title="required">*</abbr>Radio valid <span class="qld__label--optional">(Optional)</span></legend>
<!-- Success message with SVG icon -->
<span id="radio-field-success-message" class="qld__input--success">
<!-- Inline SVG as example -->
<svg class="qld__icon qld__icon--lead qld__icon--sm" role="img" aria-label="Success: ">
<use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#status-success">
</svg>Success message
</span>
<!-- Start of the form field container with a qld custom class 'qld_form-field' -->
<div class="qld_form-field qld__control-group">
<!-- Radio option 1-->
<div class="qld__control-input qld__control-input--block">
<input class="qld__control-input__input qld__input--valid" aria-describedby="radio-field-success-message" type="radio" name="2-radio-ex" id="2-rb-laptop" role="radio">
<label class="qld__control-input__text" for="2-rb-laptop">Laptop</label>
</div>
<!-- Radio option 2-->
<div class="qld__control-input qld__control-input--block">
<input class="qld__control-input__input" type="radio" name="2-radio-ex" id="2-rb-phone" role="radio">
<label class="qld__control-input__text" for="2-rb-phone">Phone</label>
</div>
<!-- Radio option 3-->
<div class="qld__control-input qld__control-input--block">
<input class="qld__control-input__input" type="radio" name="2-radio-ex" id="2-rb-tablet" role="radio">
<label class="qld__control-input__text" for="2-rb-tablet">Tablet</label>
</div>
</div>
</fieldset>
</div>
<div class="col-xs-6">
<!-- Start of the fieldset element-->
<fieldset class="qld__fieldset" aria-describedby="radio-error-example-hint radio-field-error-message">
<!-- Fieldset legend describing the purpose of the radio buttons -->
<legend class="qld__fieldset__legend" id="legend-error"><abbr title="required">*</abbr>Radio error</legend>
<!-- Error message with SVG icon -->
<span id="radio-field-error-message" class="qld__input--error">
<!-- Inline SVG as example -->
<svg class="qld__icon qld__icon--lead qld__icon--sm" role="img" aria-label="Error: ">
<use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#status-error">
</svg>
Error message
</span>
<!-- Hint text providing instructions for the user -->
<span class="qld__hint-text" id="radio-error-example-hint">Select an option</span>
<!-- Start of the form field container with a qld custom class 'qld_form-field' -->
<div class="qld_form-field qld__control-group">
<!-- Radio option 1-->
<div class="qld__control-input qld__control-input--block">
<input class="qld__control-input__input qld__input--error" type="radio" name="3-radio-ex" id="3-rb-laptop" role="radio">
<label class="qld__control-input__text" for="3-rb-laptop">Laptop</label>
</div>
<!-- Radio option 2-->
<div class="qld__control-input qld__control-input--block">
<input class="qld__control-input__input qld__input--error" type="radio" name="3-radio-ex" id="3-rb-phone" role="radio">
<label class="qld__control-input__text" for="3-rb-phone">Phone</label>
</div>
<!-- Radio option 3-->
<div class="qld__control-input qld__control-input--block">
<input class="qld__control-input__input qld__input--error" type="radio" name="3-radio-ex" id="3-rb-tablet" role="radio">
<label class="qld__control-input__text" for="3-rb-tablet">Tablet</label>
</div>
</div>
</fieldset>
</div>
</div>
</div>
Disabled control inputs
Disabled control inputs can be used to indicate inputs that are no longer valid or expired.
Vanilla example
Palette
<!-- Start of the fieldset element-->
<fieldset class="qld__fieldset" aria-describedby="radio-disabled-example-hint">
<!-- Fieldset legend describing the purpose of the radio buttons -->
<legend class="qld__fieldset__legend" id="legend-disabled">Label</legend>
<!-- Hint text providing instructions for the user -->
<div class="qld__hint-text" id="radio-disabled-example-hint">Select an option</div>
<!-- Start of the form field container with a qld custom class 'qld_form-field' -->
<div class="qld_form-field qld__control-group">
<!-- Radio option 1-->
<div class="qld__control-input qld__control-input--block">
<input class="qld__control-input__input" disabled type="radio" name="4-radio-ex" id="4-rb-laptop" role="radio" aria-disabled="true">
<label class="qld__control-input__text" for="4-rb-laptop">Laptop</label>
</div>
<!-- Radio option 2-->
<div class="qld__control-input qld__control-input--block">
<input class="qld__control-input__input" disabled type="radio" name="4-radio-ex" id="4-rb-phone" role="radio" aria-disabled="true">
<label class="qld__control-input__text" for="4-rb-phone">Phone</label>
</div>
<!-- Radio option 3-->
<div class="qld__control-input qld__control-input--block">
<input class="qld__control-input__input" disabled type="radio" name="4-radio-ex" id="4-rb-tablet" role="radio" aria-disabled="true">
<label class="qld__control-input__text" for="4-rb-tablet">Tablet</label>
</div>
</div>
</fieldset>
Usage guidelines
When to use
- Use radio buttons when you want users to choose only one option from a set of 2 to 7 related, mutually exclusive options.
- Use radio buttons when the available options are static and don't change dynamically.
- Use radio buttons when you want to display all available options at once, making it easy for users to compare and choose.
When not to use
- Don't use radio buttons if users might need to select more than one option. In this case, you should use the checkboxes component instead.
- Don't use radio buttons if there's only one option, as it doesn't make sense for the user to choose between one option.
- Don't use radio buttons when the list of options is too long (more than 7). Use a dropdown menu or another selection method instead.
How to use
Size
Use the default-sized radios in most cases. However, smaller versions can be useful when you want to make them less visually prominent. For instance, on a search results page, using smaller radios can let users change search filters without distracting them from the main content.
Include "None of the above"
Users should be able to deselect an option if they change their mind. Therefore, it's essential to include a "None of the above" or "I do not know" option if they're valid choices.
Don't preselect
Don't pre-select an option for users, as it can confuse them and lead to incorrect answers. Let users choose for themselves.Setting a default value can influence user decisions or come across as pushy. Only use default selection if you have data to back it up.
Group radio buttons
Group radio buttons together using a <fieldset> with a <legend> that describes them. Make sure the grouping is meaningful and logical.
Use label as target
Make sure users can select either the text label or the radio button to choose an option.
List items vertically
Listing options vertically makes them easier to read than when they're listed horizontally, which can cause confusion.
Use a logical order
Organise the selection options in a meaningful way, such as alphabetical or most-frequent to least-frequent, to help users find what they're looking for quickly.
Headings
If you're asking one question per page, use the contents of the <legend> as the page heading. This is good practice, especially for screen readers, as it means users will only hear the contents once.
Smaller radio buttons
In most cases, the large checkbox and radio inputs provided in our design system should be used to ensure accessible target areas for users on touch devices or with mobility impairments. These larger inputs are based on best practices developed by GOV.UK. However, smaller versions are also available for use in layouts where the standard size may not be practical.
Further guidelines
For more guidelines on how to structure and lay out radio buttons see Australian Government Style Manual.