Skip to main content

Radio buttons

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

Don't use radio buttons if users might need to select more than one option, use checkboxes instead.

If your list has 4 or more options, consider using a dropdown instead.

With label​

When did you take your bins out?
<fieldset class="field field--set">
  <legend class="field__label field__label--block">When did you take your bins out?</legend>
  <div class="bcc-form-block">
    <input class="field__input" type="radio" name="options" id="before-six" />
    <label class="field__label field__label--block has-mb-2" for="before-six">Before 6am on collection day</label>
    <input class="field__input" type="radio" name="options" id="after-six" />
    <label class="field__label field__label--block has-mb-2" for="after-six">After 6am on collection day</label>
  </div>
</fieldset>

With label and hint​

Do you agree to these terms?
Choose one
<fieldset class="field field--set">
  <legend class="field__label field__label--block">
    Do you agree to these terms?
    <h6 class="field__instructions">Choose one</h6>
  </legend>
  <div class="bcc-form-block">
    <input class="field__input" type="radio" name="options" id="yes" />
    <label class="field__label field__label--block" for="yes">Yes</label>
    <input class="field__input" type="radio" name="options" id="no" />
    <label class="field__label field__label--block" for="no">No</label>
  </div>
</fieldset>

Inline radio buttons​

In some cases, you can choose to display radios ‘inline’ beside one another (horizontally).

Do you agree to these terms?
<fieldset class="field field--set">
  <legend class="field__label field__label--block">
  Do you agree to these terms?
  </legend>
  <div class="bcc-form-inline">
    <input class="field__input" type="radio" name="options" id="yes" />
    <label class="field__label field__label--block" for="yes">Yes</label>
    <input class="field__input" type="radio" name="options" id="no" />
    <label class="field__label field__label--block" for="no">No</label>
  </div>
</fieldset>

With error​

Display an inline error when there's something wrong.

Make sure:

  • The form control has the aria-describedby attribute and references an associated error message
  • The associated error message has a unique ID

Remove the error state when the radio buttons are updated, to avoid confusing users.

To do this:

  • Remove the field--error class
  • Remove the <div> element with the class field__message field__message--error

Refresh this page to reset the error state in this example.

Do you agree to these terms?
This field is required
<fieldset aria-describedby="terms-error" id="terms" class="field field--set field--error">
  <legend class="field__label field__label--block">Do you agree to these terms?</legend>
  <div class="bcc-form-block">
    <input class="field__input" type="radio" name="options" id="yes" />
    <label class="field__label field__label--block" for="yes">Yes</label>
    <input class="field__input" type="radio" name="options" id="no" />
    <label class="field__label field__label--block" for="no">No</label>
  </div>
  <div id="terms-error" class="field__message field__message--error">This field is required</div>
</fieldset>