Skip to main content

Radios

Information: Documentation incomplete

This component still requires documentation.

Use the radio component to allow users to choose a single option from a list of options.

Examples

Default

Open example in a new window
View HTML 
<div class="uhb-o-form-group">
  <fieldset class="uhb-c-fieldset">
    <legend class="uhb-c-fieldset__legend">
      What is your prefered contact method?
    </legend>
    <ul class="uhb-c-radio">
      <li class="uhb-c-radio__item">
        <input class="uhb-c-radio__input" id="prefered-contact-method-email" name="prefered-contact-method" type="radio" value="email">
        <label class="uhb-c-label uhb-c-radio__label" for="prefered-contact-method-email">
          Email
        </label>
      </li>
      <li class="uhb-c-radio__item">
        <input class="uhb-c-radio__input" id="prefered-contact-method-phone" name="prefered-contact-method" type="radio" value="phone">
        <label class="uhb-c-label uhb-c-radio__label" for="prefered-contact-method-phone">
          Phone
        </label>
      </li>
      <li class="uhb-c-radio__item">
        <input class="uhb-c-radio__input" id="prefered-contact-method-text" name="prefered-contact-method" type="radio" value="text">
        <label class="uhb-c-label uhb-c-radio__label" for="prefered-contact-method-text">
          Text message
        </label>
      </li>
    </ul>
  </fieldset>
</div>