Switch
Interruptor que liga ou desliga um ajuste, e o efeito vale na hora. Para escolhas que esperam um botão Salvar, use um Checkbox.
Instalação
Configure o Camaleo uma vez (Instalação) e importe o que precisar. Envolva o switch num Label que dê nome ao ajuste.
import { Switch, Label } from "@camaleo/react";Anatomia
Um trilho com um botão que desliza até o fim quando está ligado. As duas partes têm um data-slot que você pode usar no CSS.
Exemplos
Cada exemplo é um arquivo real que você pode copiar. Todos usam o estilo, o modo e a cor escolhidos na barra acima.
Resposta automática desligada.
Vale na hora
Clique. O switch faz efeito assim que muda, então confirme o que mudou numa linha de status em vez de um botão Salvar.
Ajuda a encontrar falhas. Nunca coletamos o que você digita.
Com descrição
Explique o que o ajuste faz embaixo do rótulo e ligue com aria-describedby, para o nome continuar curto.
Lista de ajustes
Switches relacionados ficam num Fieldset com uma legenda que funciona como o começo de cada rótulo.
Só a sua equipe vê seu perfil.
Salvando no servidor
Clique. Quando a mudança demora um pouco, mantenha o foco no switch com readOnly e anuncie "Salvando…" e o resultado.
Ajustes dependentes
Desligue o primeiro. Os ajustes filhos ficam desativados, não escondidos, para a pessoa ver o que vai recuperar.
Disponível no plano Empresa.
Desativado, com o motivo
Diga por que não dá para ligar e ligue o motivo com aria-describedby.
Em contexto
Switches moram nas telas de ajustes. São pedaços inteiros de interface para copiar, no estilo que você escolheu.
Notificações
Enviadas para o app da loja no seu celular.
Assim que o cliente paga.
Quando um produto fica com menos de 5 unidades.
Uma vez por dia, às 9h.
Labs
Teste recursos antes do lançamento. As mudanças valem na hora.
Empresa
R$ 119 por pessoa / mês, cobrado anualmente
Boas práticas
O modo escuro liga assim que o switch se move.
Parece feito, mas não está. Num formulário que se envia, use um Checkbox.
O próprio switch mostra ligado ou desligado; o leitor de tela anuncia pelo aria-checked.
"Ativado" muda a cada clique e nunca diz o que está ativado.
Props
defaultChecked.Os atributos nativos passam direto para o trilho, um <span role="switch"> com um input escondido para formulários.
Styling hooks
Mude o visual sem copiar o componente: use os atributos ou defina os tokens num elemento pai, num estilo ou no próprio switch.
Atributos
Tokens que ele lê
Cor
Forma e tamanho
Tipografia e movimento
Só deste componente
Acessibilidade
- Ele tem role="switch" e aria-checked, então o leitor de tela diz "ligado" ou "desligado", não "marcado".
- Clicar no texto do rótulo também muda o switch, o que dá uma área de toque bem maior que o trilho.
- Quando o efeito não aparece na tela, confirme numa mensagem com role="status".
- Um switch desativado continua mostrando ligado ou desligado, então a pessoa ainda lê o ajuste.