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.

Label: describe de forma clara la información solicitada.
Selection controls: elemento interactivo visual (checkbox, radio button o switch).
Placeholder: texto descriptivo asociado al control. Puede ubicarse a la derecha o izquierda.
Helper text (opcional): ofrece orientación adicional o aclaraciones.

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.

Label: describe de forma clara la información solicitada.
Grupo de opciones: conjunto de checkboxes, radio buttons o switches, organizados horizontal o verticalmente según el caso de uso.
Helper text (opcional): ofrece orientación adicional o aclaraciones.

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.

Default: no seleccionado.
Checked: seleccionado.
Hover: indica interactividad.
Disabled: no interactivo.
Indeterminate: selección incompleta.

Radio Button

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

Uso recomendado

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

Default: no seleccionado.
Selected: seleccionado.
Hover: indica interactividad.
Selected disabled: seleccionado no interactivo.
Disabled: no interactivo.

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

Uso recomendado

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

Nota

Siempre deben utilizarse en grupo y compartir el mismo label.

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).

Default: no seleccionado.
Selected: seleccionado.
Selected disabled: seleccionado no interactivo.

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.