Our Insights About Modern Technology

Toggles

En esta sección se agrupan los componentes que permiten al usuario seleccionar, activar o desactivar opciones dentro de una interfaz.

Son controles que representan estados definidos y permiten una interacción clara y directa. En esta categoría se incluyen:

Anatomía del componente

Aunque cada toggle tiene una representación visual distinta, comparten una estructura base.

Componente en grupo

Cuando se presentan varias opciones dentro de un mismo contexto, los toggles pueden agruparse en un único bloque para facilitar la comprensión y la toma de decisiones.

En este caso, el grupo comparte un label principal que describe la categoría de selección y puede acompañarse, de manera opcional, de un placeholder que orienta al usuario sobre la elección que debe realizar.

Checkbox

Permite seleccionar una o múltiples opciones dentro de un conjunto.

Uso recomendado

  • Selección múltiple.
  • Listas de opciones independientes.
  • Aceptación de términos y condiciones.
  • Selección parcial en estructuras jerárquicas.

Radio Button

Permite seleccionar una sola opción dentro de un grupo.

Uso recomendado

  • Opciones mutuamente excluyentes.
  • Cuando todas las opciones deben estar visibles.

Permite seleccionar una sola opción dentro de un grupo.

Uso recomendado

  • Opciones mutuamente excluyentes.
  • Cuando todas las opciones deben estar visibles.

Switch

Permite activar o desactivar una configuración de manera inmediata.

Uso recomendado

  • Configuraciones rápidas.
  • Cambios que se aplican automáticamente.
  • Estados binarios (On/Off, Activo/Inactivo).

Consideraciones generales

  • Todos los toggles deben incluir un label claro y descriptivo.
  • Los estados deben mantenerse consistentes en comportamiento y estilo en toda la plataforma.
  • No reemplaces un tipo de toggle por otro sin tener en cuenta su propósito y forma de uso.
Toggles - PreviousSelectsNext - TogglesSlider