Radio

Radios are a type of form input that allows the user to select a single option from a given list. To allow the user to select multiple options, use the Checkbox component.

Variants

Option 1

Option 2

Option 3

Radio without Container

Use this radio button to achieve a cleaner layout. In addition to the default state, this variant has hover, focus, select, error and disable states. Each state affects the radio input. Some states also affect the text label.

<div class="c-radio-group">
  <div class="c-radio__container--none">
    <input type="radio" name="option" id="option1"/>
    <label for="option1">Option 1</label>
  </div>
  <div class="c-radio__container--none">
    <input type="radio" name="option" id="option2"/>
    <label for="option2">Option 2</label>
  </div>
  <div class="c-radio__container--none">
    <input type="radio" name="option" id="option3"/>
    <label for="option3">Option 3</label>
  </div>
</div>

Copy

Option 1

Option 2

Option 3

Radio with Container

Use this variant to distinguish a list of options in a busier layout. Options are individually delineated and stacked in a stroked container. In addition to the default state, this variant has hover, focus, select, error and disable states. Each state affects the radio input. Some states also affect the container and text label.

<div class="c-radio-group">
  <div class="c-radio__container">
    <input type="radio" name="container" id="option1-container"/>
    <label for="option1-container">Option 1</label>
  </div>
  <div class="c-radio__container">
    <input type="radio" name="container" id="option2-container"/>
    <label for="option2-container">Option 2</label>
  </div>
  <div class="c-radio__container">
    <input type="radio" name="container" id="option3-container"/>
    <label for="option3-container">Option 3</label>        
  </div>
</div>

Copy

Yes

Maybe

Radio Buttons - Legacy

The following code has been deprecated in favor of Radio with Container. It is still supported but will not be maintained by Currency. Best practice is to use the optimized code above.

<div class="c-radio-group">
  <div class="c-radio__container">
    <input
      class="c-radio__input"
      type="radio"
      name="example3"
      value="yes"
      id="radio3"
    />
    <label class="c-radio" for="radio3">
      Yes
      <span class="c-radio__button"></span>
    </label>
  </div>
  <div class="c-radio__container">
    <input
      class="c-radio__input"
      type="radio"
      name="example3"
      value="no"
      id="radio4"
    />
    <label class="c-radio" for="radio4">
      No
      <span class="c-radio__button"></span>
    </label>
  </div>
  <div class="c-radio__container">
    <input
      class="c-radio__input"
      type="radio"
      name="example3"
      value="maybe"
      id="radio5"
    />
    <label class="c-radio" for="radio5">
      Maybe
      <span class="c-radio__button"></span>
    </label>
  </div>
</div>

Copy