Overview

Radio buttons allow the user to select one option from a set while seeing all available options.

Radio buttons are typically part of a group, where only one radio button in a group can be selected at one time. Use the same name attribute to group multiple radio <input> elements.


Types

1) Default Radio Buttons

<div class="field">
  <div class="control">
    <label class="radio">
      <input type="radio" name="accept" />
      Yes
    </label>
    <label class="radio">
      <input type="radio" name="accept" />
      No
    </label>
  </div>
</div>

2) Stacked Radio Buttons

Inline radio buttons can sometimes be difficult to scan. Users may find it difficult to differentiate which label the option belongs to: the one before or after the option.

Note: Arranging the radio buttons in a vertical block (seen below) helps to eliminate possible confusion.

<div class="field">
  <div class="control">
    <label class="radio">
      <input type="radio" name="choice" />
      Yes
    </label>
  </div>
  <div class="control">
    <label class="radio">
      <input type="radio" name="choice" />
      No
    </label>
  </div>
</div>

When to use

Radio buttons should be used:
  • When users can only select one item from a list of options.
Radio buttons should not be used:
  • If you want users to select multiple options.
    • Using the checkbox component would be more appropriate.

Feedback

Having troubles with the guide? Please give us more details and we'll get back to you soon.

Chat with the team