Switch Interruptor
Introduction
Um controle de alternância binário inspirado no iOS que alterna entre habilitar/desabilitar uma configuração independente. Comum em painéis de configurações, preferências de perfil ou interruptores de assinatura. Enfatiza visualmente a semântica ligado/desligado mais do que uma caixa de seleção padrão.
O componente Switch está totalmente integrado como bloco switch no Page Builder, permitindo que os autores configurem facilmente rótulo, texto de ajuda, cor de ênfase de marca, escala de tamanho e estado padrão.
Usage
Estes exemplos ilustram como os editores de conteúdo vinculam e estruturam controles de interruptor.
1. Interruptor ativado por padrão com texto de ajuda (variante Line)
Um interruptor ativado por padrão com texto de ajuda explicativo. Mostra a variante fluida line e uma paleta de marca verde atribuída ao estado ativo.
{
"type": "switch",
"label": "Airplane Mode",
"helperText": "Disable wireless connections",
"colorPalette": "green",
"type": "line",
"size": "md",
"defaultChecked": true,
"interactive": true
}
2. Interruptor compacto desligado por padrão (ênfase vermelha)
O estado ativo de ações destrutivas deve usar acentos de perigo como o vermelho. Esta demonstração usa o nível de tamanho compacto sm.
{
"type": "switch",
"label": "Delete History",
"helperText": "Permanently erase activity logs",
"colorPalette": "red",
"type": "line",
"size": "sm",
"defaultChecked": false,
"interactive": true
}
3. Interruptor desabilitado com ícone embutido
Demonstra estados de interação combinados: um interruptor desabilitado mas que exibe seu valor selecionado.
{
"type": "switch",
"label": "Beta Features",
"helperText": "Currently locked by admin",
"disabled": true,
"defaultChecked": true,
"interactive": true
}
Props
| Propriedade | Tipo de campo CMS | Padrão | Descrição / opções suportadas |
|---|---|---|---|
Texto do rótulo (label) | string | - | Título descritivo ao lado da trilha. |
Texto de ajuda (helperText) | string | - | Nota contextual leve sob o interruptor. |
Cor de ênfase de marca (colorPalette) | select | "blue" | Paleta visual do preenchimento no estado ativo. • Opções: blue, green, red, purple, orange, amber, cyan, slate. |
Variante visual (variant) | select | "line" | Estilo visual da trilha. • Opções: "line", "surface", "subtle", "flushed". |
Escala de tamanho (size) | select | "md" | Controla o tamanho geral da trilha. • Opções: "xs", "sm", "md", "lg", "xl". |
Marcado por padrão (defaultChecked) | boolean | false | Se true, o componente inicia ativado. |
Desabilitado (disabled) | boolean | false | Desativa a interação e aplica uma camada atenuada. |
Forçar interativo (interactive) | boolean | true | Hidrata o interruptor para vincular eventos de teclado e alternância. |
Developer Notes & Accessibility
- Navegação por teclado: O controle suporta interação nativa — com foco,
SpaceouEnteralterna o estado. O anel de foco segue nossos tokens de design. - Conformidade WAI-ARIA: Compila como interruptor semântico (
role="switch",aria-checked), permitindo que leitores de tela anunciem o estado binário exato. - Ilha de hidratação: Como um layout avançado que captura eventos de alternância, cercamento de foco e gerenciamento de estado acessível, o Switch opera como uma ilha condicional de Nível 2 (
"interactive": true).