Carregando…Carregando…Carregando…Carregando…Toggle switch with label, description, intents and label position control.
$ npx kikitocn add switch@/lib/utilsimport { Switch } from "@/components/ui/cn/switch/Switch";
export function SwitchExample() {
return (
<div className="flex flex-col gap-3">
<Switch label="Notificações por e-mail" defaultChecked />
<Switch label="Modo escuro" />
<Switch label="Opção desabilitada" disabled />
</div>
);
}| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
checked | boolean | undefined | Estado ligado/desligado (controlled) |
defaultChecked | boolean | false | Estado inicial (uncontrolled) |
onChange | (checked: boolean) => void | undefined | Callback quando o estado muda |
label | string | undefined | Texto ao lado do switch |
description | string | undefined | Texto de apoio abaixo do label |
size | 'sm' | 'md' | 'lg' | 'md' | Tamanho do switch |
intent | 'primary' | 'secondary' | 'success' | 'destructive' | 'warning' | 'info' | 'primary' | Cor quando ligado |
labelPosition | 'left' | 'right' | 'right' | Posição do label em relação ao switch |
disabled | boolean | false | Desabilita o switch |
Controlled switches
All intents (on)
Left · right
sm · md · lg