Negocios

Switch

Toggle de liga/desliga. Use para configurações binárias que têm efeito imediato, sem necessidade de confirmar.

Visão geral

O Switch é semanticamente diferente do Checkbox — indica ativação imediata, não seleção em formulário.

Estados

Import

import { Switch } from "@/components/ui/switch" import { Label } from "@/components/ui/label"

Switch vs Checkbox

Use Switch para configurações que têm efeito imediato (ex: ativar notificações). Use Checkbox para seleções em formulários que são confirmadas ao enviar.

Padrão de implementação

Snippets para uso do Switch.

Switch controlado

"use client"
import { useState } from "react"

export function NotificacoesSwitch() {
  const [ativo, setAtivo] = useState(false)

  return (
    <div className="flex items-center gap-3">
      <Switch
        id="notif"
        checked={ativo}
        onCheckedChange={setAtivo}
      />
      <Label htmlFor="notif">
        Notificações {ativo ? "ativadas" : "desativadas"}
      </Label>
    </div>
  )
}

MN Design System · Primary #5FC318 · Brand Green #AFF000 · Font: Inter