Switch — Sinapse Design System

Default

Click no label ou no track toggla. ARIA role="switch".

Receber notificações

<Switch name="notif">Receber notificações</Switch>

<template>
<label class="inline-flex items-center gap-3 cursor-pointer">
  <span class="relative inline-flex h-6 w-12">
    <input type="checkbox" name="notif" role="switch" class="peer sr-only" />
    <span class="absolute inset-0 rounded-full bg-muted peer-checked:bg-primary transition-colors"></span>
    <span class="absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-background shadow transition-transform peer-checked:translate-x-6"></span>
  </span>
  <span class="text-sm text-foreground">Receber notificações</span>
</label>
</template>

<label className="inline-flex items-center gap-3 cursor-pointer">
<span className="relative inline-flex h-6 w-12">
  <input type="checkbox" name="notif" role="switch" className="peer sr-only" />
  <span className="absolute inset-0 rounded-full bg-muted peer-checked:bg-primary transition-colors"></span>
  <span className="absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-background shadow transition-transform peer-checked:translate-x-6"></span>
</span>
<span className="text-sm text-foreground">Receber notificações</span>
</label>

<label class="inline-flex items-center gap-3 cursor-pointer">
<span class="relative inline-flex h-6 w-12">
  <input type="checkbox" name="notif" role="switch" class="peer sr-only" />
  <span class="absolute inset-0 rounded-full bg-muted peer-checked:bg-primary transition-colors"></span>
  <span class="absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-background shadow transition-transform peer-checked:translate-x-6"></span>
</span>
<span class="text-sm text-foreground">Receber notificações</span>
</label>

Estados

Default, checked, disabled, disabled+checked.

Default Ativado Desabilitado Desabilitado + Ativado

<Switch>Default</Switch>
<Switch checked>Ativado</Switch>
<Switch disabled>Desabilitado</Switch>
<Switch checked disabled>Desabilitado + Ativado</Switch>

Quando usar Switch vs Checkbox

Switch	Checkbox
Preferência booleana com efeito imediato (“ativar 2FA”)	Item de lista ou consentimento (“aceito termos”)
Não precisa de submit/save explícito	Precisa de submit do form
Geralmente único	Geralmente em grupos

Acessibilidade

role="switch" no input nativo
Click em qualquer parte do label toggla
peer-focus-visible exibe outline 2px no foco por teclado
Handle anima 24px quando checked (transladado direita)

Props

Prop	Tipo	Default	Descrição
`id`	`string`	—	ID do `<input>`.
`name`	`string`	—	name HTML para form submit.
`value`	`string`	—	Valor submetido quando checked.
`checked`	`boolean`	`false`	Estado inicial.
`disabled`	`boolean`	`false`	Bloqueia interação.
`class`	`string`	—	Classes adicionais.