Radio Buttons

Overview

Radio buttons allow users to select one option from a list

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.


Default radio button

<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>

When you should use this component

Use the radio button component when users can only select one item from a list of options.

When you should consider something else

Do not use the radio button component if users can select more than one option. If you require users to select multiple options, then using the checkbox component would be more appropriate.


Stacked Radio Buttons

<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 you should use this component

Inline radio buttons can sometimes be difficult to scan, as users may find it difficult to differentiate which label the option belongs to: the one before or after the option. By arranging the radio buttons in a vertical block as above, this helps to eliminate possible confusion.


Feedback

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

Chat with the team