Casilla de verificación y botón de opción Bootstrap 5

Cuadro de verificación

Si desea que el usuario seleccione una cantidad arbitraria de opciones de la lista de opciones predeterminada, utilice el cuadro de verificación.

Ejemplo

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="check1" name="option1" value="algo" checked>
  <label class="form-check-label">Opción 1</label>
</div>

Prueba personal

Ejemplo de explicación

Si desea configurar el estilo del cuadro de verificación, utilice class="form-check" para asegurar que la etiqueta y el cuadro de verificación tengan el margen adecuado.

Luego, utilice el elemento de embalaje de .form-check-label Añadir la clase a los elementos de etiqueta y luego .form-check-input Añadir a .form-check dentro del contenedor para configurar correctamente el estilo de la casilla de verificación.

Si desea que la casilla de verificación esté seleccionada por defecto, utilice checked Atributos.

Botones de opción

Si desea limitar la selección del usuario a una de las opciones de lista predeterminada, utilice botones de opción.

Ejemplo

<div class="form-check">
  <input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked> Opción 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"> Opción 2
  <label class="form-check-label" for="radio2"></label>
</div>
<div class="form-check">
  <input type="radio" class="form-check-input" disabled> Opción 3
  <label class="form-check-label"></label>
</div>

Prueba personal

Interruptor

Si desea que el casilla de verificación tenga el estilo de interruptor de conmutación, configure .form-switch Clase y .form-check Uso conjunto de contenedores:

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">Modo oscuro</label>
</div>

Prueba personal