Bootstrap5 casillas de verificación y botones de opción

Si desea que los usuarios seleccionen cualquier número de opciones de una lista predefinida de opciones, puede utilizar casillas de verificación:

Ejemplo

<div class="form-check"> <input class="form-check-input" type="checkbox" id="check1" name="option1" value="something" checked> <label class="form-check-label">Option 1</label> </div>

Pruébalo »

Las casillas de verificación usan class="form-check" para asegurar un margen adecuado entre la etiqueta y la casilla.

La clase .form-check-label se agrega al elemento de etiqueta, y la clase .form-check-input se agrega dentro del contenedor .form-check para establecer el estilo de la casilla de verificación.

El atributo checked se utiliza para establecer la opción seleccionada por defecto.

Botones de opción

Si desea que los usuarios seleccionen una opción de una lista predefinida, puede utilizar botones de opción:

Ejemplo

<div class="form-check"> <input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked>Option 1 <label class="form-check-label" for="radio1"></label> </div> <div class="form-check"> <input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">Option 2 <label class="form-check-label" for="radio2"></label> </div> <div class="form-check"> <input type="radio" class="form-check-input" disabled>Option 3 <label class="form-check-label"></label> </div>

Pruébalo »

Interruptor de alternancia

Si desea convertir una casilla de verificación en un interruptor de alternancia, puede.form-checkusar dentro del contenedor.form-switchla clase:

Ejemplo

<div class="form-check form-switch"> <input class="form-check-input" type="checkbox" id="mySwitch" name="darkmode" value="yes" checked> <label class="form-check-label" for="mySwitch">Dark Mode</label> </div>

Pruébalo »
Otras extensiones