Checkbox como un botón en Bootstrap 4

Hoy he querido dedicar un artículo entero para hablar sobre la conversión de los inputs tipo checkbox a un estilo similar a un botón usando Bootstrap 4.

Los estilos por defecto que tienen los navegadores para las casillas de verificación (checkboxes) son muy sosos.

Bootstrap lo sabe y por se ha creado una forma rápida para darle un formato mucho mejor para su visualización.

En este caso, los inputs tipo checkbox se pueden mostrar como un botón.

La idea que voy a ilustrar en este artículo es crear varias casillas de verificación (checkboxes) dentro de un grupo de botones y cada casilla de verificación dentro de una etiqueta label con estilos de botón.

Bootstrap nos permite agregar una estructura HTML para conseguir un diseño más apreciable para esto.

En el ejemplo en funcionamiento vas a poder ver un grupo de botones que tienen la funcionalidad de casilla de verificación (checkbox) en el que estoy mostrando unos cuantos países de Europa a los que puedes hacer clic para seleccionarlos.

Fíjate en el código siguiente:

Source code

<div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-primary">
        <input type="checkbox" name="countries[]" value="España" autocomplete="off"> España
    </label>
    <label class="btn btn-primary">
        <input type="checkbox" name="countries[]" value="Francia" autocomplete="off"> Francia
    </label>
    <label class="btn btn-primary">
        <input type="checkbox" name="countries[]" value="Portugal" autocomplete="off"> Portugal
    </label>
    <label class="btn btn-primary">
        <input type="checkbox" name="countries[]" value="Italia" autocomplete="off"> Italia
    </label>
    <label class="btn btn-primary">
        <input type="checkbox" name="countries[]" value="Alemania" autocomplete="off"> Alemania
    </label>
</div>

Para conseguir como resultado:

Por defecto (sin Bootstrap), se vería de la siguiente forma en Google Chrome:

Fíjate que gran diferencia! y con tan poco código.

En el ejemplo en funcionamiento, he agregado un botón «Enviar» como extra para que puedas enviar la selección al servidor. Los países seleccionados son recibidos con PHP.

Conclusión

La diferencia en cuanto a aspecto es notable. Creo que vale la pena usarlo. Programar los checkboxes para que funcionen así costaría mucho tiempo de programación. Por suerte, Bootstrap ya lo ha hecho por ti, ¿porqué no aprovecharlo?

Debido a que son botones, también se les puede cambiar el tamaño, colores, bordes, etc. Ver tutorial sobre botones en Bootstrap 4.

Recuerda que las casillas de verificación o checkboxes el usuario puede seleccionar más de una opción. Por ese motivo, en el ejemplo en funcionamiento puse como name de los inputs un array «countries[]» para enviar al servidor todos los valores seleccionados.

Para usar estas opciones tienes que tener bien instalado Bootstrap conjuntamente con sus archivos correspondientes para que pueda funcionar el JavaScript.

Ver demo Descargar