Botones Selectores

La selección múltiple (checkbox) o selección única (botón radial) para uno o más elementos de un conjunto.

Ya sea para una selección única o múltiple, existen dos alternativas de interfaz de usuario que permiten seleccionar entre un grupo de opciones.

El checkbox o casilla de verificación, permite a los usuarios seleccionar o deseleccionar opciones de forma sencilla y clara, utilizado para inputs de múltiples opciones, lo que proporciona una representación visual del estado de cada opción: en formularios, configuraciones de preferencias y otras situaciones donde se requiere una elección binaria o múltiple.

Por otro lado el Botón Radial permite a los usuarios seleccionar una única opción de un conjunto de opciones mutuamente excluyentes. Los botones radiales se presentan como círculos pequeños con un indicador en forma de punto o marcador que se activa cuando se selecciona una opción. Al hacer clic o tocar en un botón radial, se selecciona y deselecciona automáticamente cualquier otra opción del mismo grupo.

Ambos tienen las siguiente funcionalidad:

  • Agrupación: Los checkboxes y botones radiales se pueden agrupar para permitir a los usuarios seleccionar múltiples opciones o una opción única respectivamente, dentro de un conjunto de opciones. Los usuarios pueden marcar o desmarcar varios checkboxes según sus preferencias o necesidades. Por otro lado pueden marcar un botón radial a la vez por grupo.

  • Contexto: Dependiendo del tipo de selección puedes utilizar el checkbox para una selección múltiple o un botón radial para una selección única. En ambos casos estos botones selectores se pueden como lista vertical y tambien dentro de un menú desplegable.

    • Checkbox: Utiliza los checkboxes para capturar la entrada del usuario en forma de selecciones o preferencias: en formularios en línea, preferencias, intereses o configuraciones. Este componente se utiliza para incluir múltiples selecciones en un mismo grupo, por lo tanto permite seleccionar más de una alternativa.


    • Botón Radial: Utilízalos para permitir al usuario seleccionar una única opción de un conjunto de opciones mutuamente excluyentes. Los botones radiales son círculos pequeños con un indicador en forma de punto o marcador que se activa cuando se selecciona una opción. Al hacer clic o tocar en un botón radial, se selecciona y deselecciona automáticamente cualquier otra opción del mismo grupo.

  • Visualización: El estado del checkbox (marcado, desmarcado o mixto) se refleja visualmente en la interfaz, mediante una marca de verificación dentro de un cuadrado. El botón radial se indica visualmente cuál opción está seleccionada mediante el punto dentro del círculo. En ambos casos permite a los usuarios ver claramente si una o más opciones está seleccionada o no.

  • Accesibilidad: Los checkboxes y botones radiales también son compatibles con la interacción con teclado, lo que significa que los usuarios pueden tocar o hacer clic en ellos en dispositivos móviles o táctiles. Además, ambos suelen ser accesibles para usuarios con discapacidades visuales o de movilidad, ya que los navegadores y las tecnologías de asistencia pueden interpretar y comunicar su estado correctamente.

Lista de Botones radiales

HTML

<div class="radio-group">
<label class="checkbox-radio" for="checkbox-radio-toggle1">
<img class="radio-img-vacio" src="iconos/radial_vacio_lineal.svg" alt="" width="32" height="32">
<img class="radio-img-lleno" src="iconos/radial_marcado_lineal.svg" alt="" width="32" height="32">
Opción 1 <input type="radio" class="input-checkbox-radio" id="checkbox-radio-toggle1" name="grupo-radio-btn" value="1">
</label>
<label class="checkbox-radio" for="checkbox-radio-toggle2">
<img class="radio-img-vacio" src="iconos/radial_vacio_lineal.svg" alt="" width="32" height="32">
<img class="radio-img-lleno" src="iconos/radial_marcado_lineal.svg" alt="" width="32" height="32">
Opción 2 <input type="radio" class="input-checkbox-radio" id="checkbox-radio-toggle2" name="grupo-radio-btn" value="2">

</label>

<label class="checkbox-radio" for="checkbox-radio-toggle3">
<img class="radio-img-vacio" src="iconos/radial_vacio_lineal.svg" alt="" width="32" height="32">
<img class="radio-img-lleno" src="iconos/radial_marcado_lineal.svg" alt="" width="32" height="32">
Opción 3 <input type="radio" class="input-checkbox-radio" id="checkbox-radio-toggle3" name="grupo-radio-btn" value="3">

</label>

<label class="checkbox-radio" for="checkbox-radio-toggle4">
<img class="radio-img-vacio" src="iconos/radial_vacio_lineal.svg" alt="" width="32" height="32">
<img class="radio-img-lleno" src="iconos/radial_marcado_lineal.svg" alt="" width="32" height="32">
Opción 4 <input type="radio" class="input-checkbox-radio" id="checkbox-radio-toggle4" name="grupo-radio-btn" value="3">

</label>
</div>

CSS

.radio-group {
position: relative;
}

.radio-group .checkbox-radio,
.checkbox-group .checkbox {
font-family: 'Montserrat';
position: relative;
color: #024588;
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 26px;
cursor: pointer;
width: 170px;
display: flex;
align-items: center;
padding: 9px 20px 9px 10px;
gap: 10px;
height: 50px;
background: #FFFFFF;
mix-blend-mode: normal;
border-radius: 0px;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
}

.radio-group .checkbox-radio:first-child,
.checkbox-group .checkbox:first-child {
border-radius: 10px 10px 0 0 !important;
}

.radio-group .checkbox-radio:last-child,
.checkbox-group .checkbox:last-child {
border-radius: 0 0 10px 10px !important;
}

.check-box-activo {
background: #D7E5F4 !important;
}

input.input-checkbox-radio {
position: absolute;
opacity: 0;
cursor: pointer;
}

input.input-checkbox {
position: absolute;
opacity: 0;
cursor: pointer;
}

.checkbox-radio .radio-img-lleno,
.checkbox .checkbox-img-lleno {
display: none;
}
.radio-group .checkbox-radio:first-child,
.checkbox-group .checkbox:first-child {
border-radius: 10px 10px 0 0 !important;
}

.radio-group .checkbox-radio:last-child,
.checkbox-group .checkbox:last-child {
border-radius: 0 0 10px 10px !important;
}

JS

const elementos = document.querySelectorAll(".radio-group .checkbox-radio");
// Agregar un event listener a cada elemento elementos.forEach((elemento) => {
elemento.addEventListener("click", function () {

elementos.forEach((boton) => {
var imagen1 = boton.querySelector(".radio-img-vacio");
var imagen2 = boton.querySelector(".radio-img-lleno");
if (boton != elemento) {
boton.classList.remove("check-box-activo");
imagen1.classList.remove("esconder");
imagen2.classList.remove("mostrar");
}
});

var imagen1 = elemento.querySelector(".radio-img-vacio");
var imagen2 = elemento.querySelector(".radio-img-lleno");
imagen1.classList.add("esconder");
imagen2.classList.add("mostrar");
elemento.classList.add("check-box-activo");

});
});

Lista de Checkbox

HTML

<div class="checkbox-group pos-relative">
<label class="checkbox" for="checkbox-toggle1">
<img class="checkbox-img-vacio" src="iconos/checkbox_vacio_lineal.svg" alt="" width="32" height="32">
<img class="checkbox-img-lleno" src="iconos/checkbox_ok_lineal.svg" alt="" width="32" height="32">
Opción 1 <input type="checkbox" class="input-checkbox" id="checkbox-toggle1" name="grupo-radio-btn" value="1">
</label>

<label class="checkbox" for="checkbox-toggle2">
<img class="checkbox-img-vacio" src="iconos/checkbox_vacio_lineal.svg" alt="" width="32" height="32">
<img class="checkbox-img-lleno" src="iconos/checkbox_ok_lineal.svg" alt="" width="32" height="32">
Opción 2 <input type="checkbox" class="input-checkbox" id="checkbox-toggle2" name="grupo-radio-btn" value="2">
</label>

<label class="checkbox" for="checkbox-toggle3">
<img class="checkbox-img-vacio" src="iconos/checkbox_vacio_lineal.svg" alt="" width="32" height="32">
<img class="checkbox-img-lleno" src="iconos/checkbox_ok_lineal.svg" alt="" width="32" height="32">
Opción 3 <input type="checkbox" class="input-checkbox" id="checkbox-toggle3" name="grupo-radio-btn" value="3">
</label>
</div>

CSS

.checkbox-group {
position: relative;
}

.radio-group .checkbox-radio,
.checkbox-group .checkbox {
font-family: 'Montserrat';
position: relative;
color: #024588;
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 26px;
cursor: pointer;
width: 170px;
display: flex;
align-items: center;
padding: 9px 20px 9px 10px;
gap: 10px;
height: 50px;
background: #FFFFFF;
mix-blend-mode: normal;
border-radius: 0px;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
}

.radio-group .checkbox-radio:first-child,
.checkbox-group .checkbox:first-child {
border-radius: 10px 10px 0 0 !important;
}

.radio-group .checkbox-radio:last-child,
.checkbox-group .checkbox:last-child {
border-radius: 0 0 10px 10px !important;
}

.check-box-activo {
background: #D7E5F4 !important;
}

input.input-checkbox-radio {
position: absolute;
opacity: 0;
cursor: pointer;
}

input.input-checkbox {
position: absolute;
opacity: 0;
cursor: pointer;
}

.checkbox-radio .radio-img-lleno,
.checkbox .checkbox-img-lleno {
display: none;
}
.radio-group .checkbox-radio:first-child,
.checkbox-group .checkbox:first-child {
border-radius: 10px 10px 0 0 !important;
}

.radio-group .checkbox-radio:last-child,
.checkbox-group .checkbox:last-child {
border-radius: 0 0 10px 10px !important;
}

JS

const checkbox = document.querySelectorAll(".checkbox-group .checkbox");
// Agregar un event listener a cada elemento

checkbox.forEach((elemento) => {
elemento.addEventListener("click", function (event) {
// console.log(elemento);
event.preventDefault();
var imagen1 = elemento.querySelector(".checkbox-img-vacio");
var imagen2 = elemento.querySelector(".checkbox-img-lleno");

if (elemento.classList.contains("check-box-activo")) {
imagen1.classList.remove("esconder");
imagen2.classList.remove("mostrar");
elemento.classList.toggle("check-box-activo");
} else {
elemento.classList.toggle("check-box-activo");
imagen1.classList.add("esconder");
imagen2.classList.add("mostrar");
}

});
});

Código copiado al portapapeles