Switch

Definición de criterios de construcción de iconos para seguir escalando el sistema.

La funcionalidad de un switch se centra en permitir a los usuarios alternar entre dos estados diferentes, proporcionar retroalimentación visual clara, cambiar configuraciones o preferencias, ofrecer interacción táctil, persistencia de estado y acciones inmediatas. Los switches son ampliamente utilizados en aplicaciones y sitios web para permitir a los usuarios tomar decisiones rápidas y cambiar configuraciones con facilidad.

Los switches, también conocidos como interruptores de alternancia o toggles tienen las siguientes funcionalidades:

Estado: La funcionalidad principal de un switch es permitir a los usuarios cambiar entre dos estados diferentes, generalmente representados como "encendido" y "apagado", o "activado" y "desactivado". Al interactuar con el switch, el usuario puede alternar entre estos dos estados.

Retroalimentación: Los switches proporcionan una retroalimentación visual clara sobre su estado actual. Normalmente, un switch tiene una posición o color diferente para indicar si está en el estado "encendido" o "apagado". Esto permite a los usuarios comprender rápidamente el estado actual del switch.

Contexto: Los switches se utilizan comúnmente para permitir a los usuarios cambiar una configuración o preferencia específica. Por ejemplo, en una aplicación de configuración, un switch puede activar o desactivar una opción como "Notificaciones push" o "Modo oscuro".

Persistencia: Los switches suelen recordar y mantener su estado incluso después de que el usuario cierre o vuelva a abrir la aplicación o sitio web. Esto permite que las preferencias o configuraciones seleccionadas por el usuario se conserven y se apliquen en futuras interacciones.

Acción: A menudo, los cambios de estado de un switch tienen un efecto inmediato en la interfaz o en una función específica. Por ejemplo, al encender un switch que controla las notificaciones, el usuario puede comenzar a recibir notificaciones en tiempo real.

Accesibilidad: Los switches son compatibles con la interacción táctil, lo que significa que los usuarios pueden tocarlos o hacer clic en ellos en dispositivos móviles o táctiles. Además, los switches 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.

Switch Activado / Desactivado

HTML

CSS

.switch-container {
background: transparent;
padding: 9px 10px;
border-radius: 30px;
}

.switch-container:hover {
background: #EBF2F9;
}

.switch-container:active {
background: #D7E5F4;
}

.switch {
position: relative;
display: inline-block;
width: 62px;
height: 36px;
}

.switch input {
opacity: 0;
width: 0;
height: 0;
}

.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #FFFFFF;
-webkit-transition: .4s;
transition: .4s;
border: 1px solid #024588;
}

.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: #A3C5E6;
-webkit-transition: .4s;
transition: .4s;
}

input:checked+.slider {
background-color: #FFFFFF;
}

input:checked+.slider:before {
background-color: #27BB22;
}

input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}

.slider.round {
border-radius: 34px;
}

.slider.round:before {
border-radius: 50%;
}

.slider-disabled {
position: absolute;
cursor: not-allowed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #FFFFFF;
-webkit-transition: .4s;
transition: .4s;
border: 1px solid #B6AFAF;
}

.slider-disabled:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: #B6AFAF;
-webkit-transition: .4s;
transition: .4s;
}

.slider-disabled.round {
border-radius: 34px;
}

.slider-disabled.round:before {
border-radius: 50%;
}

Switch

Switch Activado / Desactivado

HTML

CSS

JS

Switch