Radio

An input component that allows selecting a single option from a group. Useful for mutually exclusive choices like payment methods, subscription levels, or preferences.

Basic Usage

To implement a radio button, use the input component with type radio. Additionally, the field and radio classes should be used as container classes.

Star Wars

Harry Potter

<div class="field radio">
  <input type="radio" name="moview" id="radio1" />
  <label for="radio1">Star Wars</label>
</div>

<div class="field radio">
  <input type="radio" name="moview" id="radio2" />
  <label for="radio2">Harry Potter</label>
</div>

Other Cases

Preview

¿Cuál es tu saga favorita?

Escoger con sabiduría tu debes

Star Wars

Harry Potter

Mad Max

Code

<div class="is-stack">
  <div>
    <div class="is-font-bold">¿Cuál es tu saga favorita?</div>
    <div class="is-font-size-7 is-text-outline">
      Escoger con sabiduría tu debes
    </div>
  </div>
  <div class="is-stack is-gap-1">
    <div class="field radio">
      <input type="radio" name="moview2" id="radio2-1" />
      <label for="radio2-1">Star Wars</label>
    </div>

    <div class="field radio">
      <input type="radio" name="moview2" id="radio2-2" />
      <label for="radio2-2">Harry Potter</label>
    </div>

    <div class="field radio">
      <input type="radio" name="moview2" id="radio2-3" />
      <label for="radio2-3">Mad Max</label>
    </div>
  </div>
</div>