Switch Interruptor
Introduction
Un control de conmutación binario inspirado en iOS que alterna entre habilitar/deshabilitar una configuración independiente. Común en paneles de ajustes, preferencias de perfil o conmutadores de suscripción. Enfatiza visualmente la semántica de activado/desactivado más que una casilla estándar.
El componente Switch está totalmente integrado como bloque switch en el Page Builder, permitiendo a los autores configurar fácilmente etiqueta, texto de ayuda, color de énfasis de marca, escala de tamaño y estado predeterminado.
Usage
Estos ejemplos ilustran cómo los editores de contenido enlazan y estructuran controles de interruptor.
1. Interruptor activado por defecto con texto de ayuda (variante Line)
Un interruptor activado por defecto con texto de ayuda explicativo. Muestra la fluida variante line y una paleta de marca verde asignada al estado activo.
{
"type": "switch",
"label": "Airplane Mode",
"helperText": "Disable wireless connections",
"colorPalette": "green",
"type": "line",
"size": "md",
"defaultChecked": true,
"interactive": true
}
2. Interruptor compacto apagado por defecto (énfasis rojo)
El estado activo de acciones destructivas debe usar acentos de peligro como el rojo. Esta demo usa el nivel de tamaño compacto sm.
{
"type": "switch",
"label": "Delete History",
"helperText": "Permanently erase activity logs",
"colorPalette": "red",
"type": "line",
"size": "sm",
"defaultChecked": false,
"interactive": true
}
3. Interruptor deshabilitado con icono en línea
Demuestra estados de interacción combinados: un interruptor deshabilitado pero que muestra su valor seleccionado.
{
"type": "switch",
"label": "Beta Features",
"helperText": "Currently locked by admin",
"disabled": true,
"defaultChecked": true,
"interactive": true
}
Props
| Propiedad | Tipo de campo CMS | Predeterminado | Descripción / opciones admitidas |
|---|---|---|---|
Texto de etiqueta (label) | string | - | Título descriptivo junto a la pista del interruptor. |
Texto de ayuda (helperText) | string | - | Nota contextual ligera bajo el interruptor. |
Color de énfasis de marca (colorPalette) | select | "blue" | Paleta visual del relleno de la pista en estado activo. • Opciones: blue, green, red, purple, orange, amber, cyan, slate. |
Variante visual (variant) | select | "line" | Estilo visual de la pista. • Opciones: "line", "surface", "subtle", "flushed". |
Escala de tamaño (size) | select | "md" | Controla el tamaño general de la pista. • Opciones: "xs", "sm", "md", "lg", "xl". |
Marcado por defecto (defaultChecked) | boolean | false | Si es true, el componente inicia en estado activado. |
Deshabilitado (disabled) | boolean | false | Desactiva la interacción y aplica una capa atenuada. |
Forzar interactivo (interactive) | boolean | true | Hidrata el interruptor para enlazar eventos de teclado y conmutación. |
Developer Notes & Accessibility
- Navegación por teclado: El control admite interacción nativa — con el foco,
SpaceoEnterconmutan el estado. El anillo de foco sigue nuestros tokens de diseño. - Cumplimiento WAI-ARIA: Compila como interruptor semántico (
role="switch",aria-checked), permitiendo a los lectores de pantalla anunciar el estado binario exacto. - Isla de hidratación: Como diseño avanzado que captura eventos de conmutación, cercado de foco y gestión de estado accesible, Switch opera como una isla condicional de Nivel 2 (
"interactive": true).