Radio

Componente de entrada que permite seleccionar una sola opción dentro de un grupo. Útil para elecciones excluyentes como métodos de pago, niveles de suscripción o preferencias.

Uso básico

Para implementar radio usar el componente input y tipo radio además se debe utilizar las clases field y radio como clase contenedora.

Star Wars

Harry Potter

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

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

Otros casos

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" id="radio2-1" name="moview2" />
      <label for="radio2-1">Star Wars</label>
    </div>

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

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