Radio

Radio buttons allow users to select a single option from a group of related items.

Key Points

• Use the radio buttons when users can only select one option from a list
• Use checkboxes if users require to select multiple options from a list
• Use this input type along with other form guidelines
• Radio buttons should be vertically stacked
• Only use boxed radio buttons when a substantial amount of body text surrounds a form control and requires some visual separation—it's generally advised not to use this.
• Radio buttons shouldn't be pre-selected when initially loaded on the page

Usage

Orientation

Radio buttons, and all form controls should be vertically stacked.

Optional radio button group

Users cannot go back to having no option selected once they have selected one, without refreshing their browser window. Therefore, you should include ‘None of the above’ or ‘I do not know’ if they are valid options.

Radio button orientation (vertically stacked)

                                                        
                                                        
                                                            <fieldset aria-describedby="helper-text">
                                                          <legend>How would you prefer to be contacted</legend>
                                                        
                                                          <!-- Helper text -->
                                                          <p id="helper-text">Select one option.</p>
                                                        
                                                          <div>
                                                            <input id="email" name="email" type="radio" value="Email">
                                                            <label for="email">Email</label>
                                                          </div>
                                                        
                                                          ...
                                                        </fieldset>
                                                        
                                                            

Boxed radio buttons

Avoid using boxed radio buttons; use radio groups instead, as this is an established pattern. Only use boxed radio buttons when substantial body text surrounds the form control and requires visual separation. It’s generally advised not to use this.

Good & bad practice using enhanced radio buttons

Progressive disclosure

You can ask the user a related question when they select a particular radio option, so they only see the question when it’s relevant to them.

This might make two related questions easier to answer by grouping them on the same page. For example, you could reveal a phone number input when the user selects the ‘Contact me by phone’ option.

Behaviour

Pre-selecting the radio button

Avoid pre-selecting the radio button. Users might submit the wrong answer or not realise they’ve missed a question.

Size and contact area

• Establish interaction by selecting the radio button, label or the surrounding interactive area

Radio button size and interactive area

Validation

An example of radio button validation

Replace the value of aria-describedby from the fieldset to match the id of the error element. This will help screen readers understand what is happening on the form when an error occurs.

                                                        
                                                        
                                                            <fieldset aria-describedby="error-msg">
                                                          <legend>How would you prefer to be contacted</legend>
                                                        
                                                          <!-- Helper text -->
                                                          <p id="helper-text">Select one option.</p>
                                                        
                                                          <!-- Error message -->
                                                          <p id="error-msg">Select an option</p>
                                                        
                                                          <div>
                                                            <input id="email" name="email" type="radio" value="Email">
                                                            <label for="email">Email</label>
                                                          </div>
                                                        
                                                          ...
                                                        </fieldset>
                                                        
                                                            

Keyboard

Radio buttons:

• Get a focus interaction using the 'tab' ⇥ key
• Navigatable using the 'up' ↑ and 'down' ↓ keys
• Selected by using the 'up' ↑ and 'down' ↓ keys