Radio buttons
Sample HTML
<fieldset>
<legend>Was this page useful?</legend>
<p class="ds_hint-text">Select an option</p>
<div class="ds_field-group">
<div class="ds_radio">
<input class="ds_radio__input" id="useful-yes" name="feedback-type" type="radio" value="yes">
<label class="ds_radio__label" for="useful-yes">Yes</label>
</div>
<div class="ds_radio">
<input class="ds_radio__input" id="useful-no" name="feedback-type" type="radio" value="no">
<label class="ds_radio__label" for="useful-no">No</label>
</div>
<div class="ds_radio">
<input class="ds_radio__input" id="useful-maybe" name="feedback-type" type="radio" value="maybe">
<label class="ds_radio__label" for="useful-maybe">Maybe</label>
</div>
</div>
</fieldset>About this component
Radio buttons are a form component that allows users to select a single item from a list of options.
Why we use this component
We use this component when we want users to be able to only pick one option from a list.
If there are lots of options, you should think about whether a select component would work better.
If users need to be able to pick more than one option from a list, use the checkboxes component instead.
Other versions of this component
Radio buttons with hint text
You can add hint text to radio buttons, the same as you can with any other form component.
Sample HTML
<fieldset>
<legend>How will the payments be paid in?</legend>
<div class="ds_field-group">
<div class="ds_radio">
<input class="ds_radio__input" id="payment-advance" name="payment-type" type="radio" value="advance">
<label class="ds_radio__label" for="payment-advance">Advance</label>
<p class="ds_hint-text">This means you're paid for the period coming up, i.e. the month ahead</p>
</div>
<div class="ds_radio">
<input class="ds_radio__input" id="payment-arrears" name="payment-type" type="radio" value="arrears">
<label class="ds_radio__label" for="payment-arrears">Arrears</label>
<p class="ds_hint-text">This means you're paid for the time that's just passed, i.e. for the last month</p>
</div>
</div>
</fieldset>Small radio buttons
Small radio buttons look smaller but their actual size is the same as normal radio buttons. This keeps them easy for users to select.
Sample HTML
<fieldset>
<legend>Is a letting agency managing the property?</legend>
<div class="ds_field-group">
<div class="ds_radio ds_radio--small">
<input class="ds_radio__input" id="letting-agent-yes" name="letting-agent" type="radio" value="yes">
<label class="ds_radio__label" for="letting-agent-yes">Yes</label>
</div>
<div class="ds_radio ds_radio--small">
<input class="ds_radio__input" id="letting-agent-no" name="letting-agent" type="radio" value="no">
<label class="ds_radio__label" for="letting-agent-no">No</label>
</div>
</div>
</fieldset>Error messages
The error state for radio buttons marks the entire fieldset.
Sample HTML
<div class="ds_question ds_question--error" id="error-id-one">
<fieldset aria-invalid="true">
<legend>Did this resolve your issue?</legend>
<p class="ds_hint-text">Hint text</p>
<p class="ds_question__error-message">This field is required</p>
<div class="ds_field-group">
<div class="ds_radio">
<input class="ds_radio__input" id="resolve-yes" name="resolve" type="radio" value="yes">
<label class="ds_radio__label" for="resolve-yes">Yes</label>
</div>
<div class="ds_radio">
<input class="ds_radio__input" id="resolve-no" name="resolve" type="radio" value="no">
<label class="ds_radio__label" for="resolve-no">No</label>
</div>
</div>
</fieldset>
</div>Revealing more questions
You can make more questions display in response to the selection of a radio option.
This will:
- make the related questions easier to answer by grouping them together
- make the form simpler for users who do not need to complete the related questions
Sample HTML
<div class="ds_question">
<fieldset id="landlord-improvements-query">
<legend>Has the landlord improved the property since you moved in?</legend>
<div class="ds_field-group">
<div class="ds_radio">
<input checked="" id="landlord-improvements-yes" value="yes" name="landlord-improvements-query" class="ds_radio__input" type="radio">
<label for="landlord-improvements-yes" class="ds_radio__label">Yes</label>
<div class="ds_reveal-content">
<div class="ds_question">
<label class="ds_label" for="landlord-improvements-details">What work has your landlord done to improve the property?</label>
<textarea id="landlord-improvements-details" name="landlord-improvements-details" class="ds_input" rows="4" data-validation="requiredField" aria-required="true"></textarea>
</div>
</div>
</div>
<div class="ds_radio">
<input id="landlord-improvements-no" value="no" name="landlord-improvements-query" class="ds_radio__input" type="radio">
<label for="landlord-improvements-no" class="ds_radio__label">No</label>
</div>
</div>
</fieldset>
</div>Inline radio buttons
In some cases you can display radio buttons beside one another.
Only use inline radio buttons when:
- the question only has two options
- the text for both options is short
If you are using an inline display for a yes/no choice, make ‘Yes’ the first option.
Inline radio buttons have some limitations. You cannot use ‘hint text’ with inline radio buttons. You cannot use inline radio buttons to reveal more questions or content.
Sample HTML
<fieldset>
<legend>Is a letting agency managing the property?</legend>
<div class="ds_field-group ds_field-group--inline">
<div class="ds_radio">
<input class="ds_radio__input" id="letting-agent-yes" name="letting-agent" type="radio" value="yes">
<label class="ds_radio__label" for="letting-agent-yes">Yes</label>
</div>
<div class="ds_radio">
<input class="ds_radio__input" id="letting-agent-no" name="letting-agent" type="radio" value="no">
<label class="ds_radio__label" for="letting-agent-no">No</label>
</div>
</div>
</fieldset>Website analytics
You can track radio buttons through the original page path and a data attribute showing the question type and value selected.
The Design System’s “tracking” script adds this data attribute.
Accessibility
We use a custom style for radio buttons. They are larger and easier to use than the standard radio buttons defined by the browser. We also make their focussed and selected states clearer.
Feedback, help and support
If you need help or support you can e-mail us at designsystem@gov.scot
There is a problem
Thanks for your feedback