Radio buttons

When to use radio buttons

Use radios buttons when users can only select one option from a list.

When not to use radio buttons

Do not use radio buttons if users might need to select more than one option, use checkboxes instead.

How radio buttons work

Radio buttons contain an input (the circle) and a <label> (the text). Users can click both the input and the <label> to select an option.

Once a user has selected an option, they cannot go back to having no options selected unless they refresh their browser.

<fieldset class="p-form__fieldset">
  <legend class="p-form__fieldset-legend">Legend</legend>
  <div class="p-form__radio-group">
    <div class="p-form__radio-item">
      <input
        type="radio"
        name="radio-standard"
        id="radio-standard-option-1"
        value="option-1"
      />
      <label for="radio-standard-option-1" class="p-form__radio-item-label">
        Option 1
      </label>
    </div>
    <div class="p-form__radio-item">
      <input
        type="radio"
        name="radio-standard"
        id="radio-standard-option-2"
        value="option-2"
      />
      <label for="radio-standard-option-2" class="p-form__radio-item-label">
        Option 2
      </label>
    </div>
    <div class="p-form__radio-item">
      <input
        type="radio"
        name="radio-standard"
        id="radio-standard-option-3"
        value="option-3"
      />
      <label for="radio-standard-option-3" class="p-form__radio-item-label">
        Option 3
      </label>
    </div>
  </div>
</fieldset>

Hint text

Radio button groups can display hint text. Use hint text when you need to help users understand the options and choose the most appropriate one.

Using hint text is optional.

<fieldset class="p-form__fieldset">
  <legend class="p-form__fieldset-legend">Legend</legend>
  <span class="p-form__hint">Hint text</span>
  <div class="p-form__radio-group">
    <div class="p-form__radio-item">
      <input
        type="radio"
        name="radio-hint"
        id="radio-hint-option-1"
        value="option-1"
      />
      <label for="radio-hint-option-1" class="p-form__radio-item-label">
        Option 1
      </label>
    </div>
    <div class="p-form__radio-item">
      <input
        type="radio"
        name="radio-hint"
        id="radio-hint-option-2"
        value="option-2"
      />
      <label for="radio-hint-option-2" class="p-form__radio-item-label">
        Option 2
      </label>
    </div>
  </div>
</fieldset>

How to write hint text

Keep hint text to a single short sentence, without any full stops.

Do not include links within hint text. While screen readers will read out the link text when describing the field, they will not tell users that the text is a link.

Do not assume that users will know that they can only select one option. If needed, add a hint explaining this, for example, ‘Select one option’.

Error messages

Radio button groups can display an error message. It appears below the legend or hint text. This creates a clear link between the error and:

• what is being asked
• any guidance on what information is required
• how to enter the information

Only display error messages after a user submits the form or clicks to continue to the next step.

<fieldset class="p-form__fieldset">
  <legend class="p-form__fieldset-legend">Legend</legend>
  <span class="p-form__hint">Hint text</span>
  <span class="p-form__error">Error message text</span>
  <div class="p-form__radio-group">
    <div class="p-form__radio-item">
      <input
        type="radio"
        name="radio-error"
        id="radio-error-option-1"
        value="option-1"
      />
      <label for="radio-error-option-1" class="p-form__radio-item-label">
        Option 1
      </label>
    </div>
    <div class="p-form__radio-item">
      <input
        type="radio"
        name="radio-error"
        id="radio-error-option-2"
        value="option-2"
      />
      <label for="radio-error-option-2" class="p-form__radio-item-label">
        Option 2
      </label>
    </div>
  </div>
</fieldset>

If your product is already handling errors in a different way

If you work in Parliament and need advice on presenting errors in this way, contact the Improving User Experience team on the #design-system Slack channel.

How to write error text

Error messages must explain what went wrong and how to fix it.

Make sure to follow the error message guidance or use the specific error messages below to help your users.

Specific error messages for specific error states

If it is a ‘yes’ or ‘no’ question

Say ‘Select yes if [whatever it is true]’. For example, ‘Select yes if you work remotely’.

If there are two options which are not ‘yes’ and ‘no’

Say ‘Select if [whatever it is]’. For example, ‘Select if you are full-time or part-time’.

If there are more than two options

Say ‘Select [whatever it is]’. For example, ‘Select the day of the week that is your non-working day’.

How to use radio buttons

Update the relevant fields

To create a clear and accessible relationship between the <label> and the input:

• you must use the <label> element to clearly associate text with the input
• the for attribute of the <label> must exactly match the id of the input
• the id used for the <label> must also be unique from other form elements on the page

You must wrap a group of radio buttons in a <fieldset> and provide a <legend> to describe the group of inputs. You must also give each input the same <name> attribute this groups the radio buttons together.

Layout and arrangement

You must arrange radio buttons in a vertical list. This makes it easier for users to scan the list of options. Never arrange them in a horizontal layout.

Arrange them in alphabetical order unless you have research that supports using a different order. Arrange them in numerical order if the options contain numbers.

Do not use the disabled state attribute

Do not use the disabled state attribute as it can cause issues for users. Disabled inputs are often not distinguishable from active ones, and they do not tell users why they cannot interact with them.

Instead, allow users access to all inputs, even if that means that after trying to submit or continue with a form it fails. Use error messages to then help users understand what they need to do to fix the problem. Using error messages also follows best practice guidance for creating accessible interfaces.

If users must submit information in a specific order, consider using a multistep form.

Displaying previously submitted information

Do not use the disabled state to display previously submitted information. This can confuse users as they may not realise that they cannot change the information.

Instead, consider displaying the information as standard text.