Campos tipo «radio» como botones en Bootstrap 4

Hace poco agregué un artículo sobre como convertir las casillas de verificación (checkboxes) en botones usando Bootstrap 4. Ahora quiero comentar algo muy parecido pero para los «radio buttons». Los campos de tipo «radio» se pueden convertir fácilmente en botones usando Bootstrap 4.

Los estilos por defecto que tienen los navegadores para los campos de tipo «radio» son muy sosos.

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

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

La idea que voy a ilustrar en este artículo es crear varios elementos o inputs de tipo «radio» dentro de un grupo de botones y, a su vez, cada elemento 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 inputs tipo «radio» en el que estoy mostrando 2 opciones que permiten al usuario indicar si es «Hombre» o «Mujer». Recuerda que los elementos tipo «radio» no son como las casillas de verificación. En este caso, solo se puede seleccionar una opción del grupo de opciones.

Fíjate en el código siguiente:

Source code

<div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-info">
        <input type="radio" name="gender" value="hombre" autocomplete="off"> Hombre
    </label>
    <label class="btn btn-info active">
        <input type="radio" name="gender" value="mujer" autocomplete="off"> Mujer
    </label>
</div>

Código simple 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. La opción seleccionada es recibida con PHP en el servidor.

Conclusión

La diferencia en cuanto a aspecto es notable. Creo que vale la pena usarlo. Programar los elementos de tipo «radio» 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 los elementos tipo radio solo se puede seleccionar una de las opciones propuestas. Si necesitas hacer lo mismo con varias opciones seleccionadas deberás ver el tutorial para las casillas de verificación.

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

Ver demo Descargar