Componentes

Switch

Alternar configuração on/off imediata.

Campos e formulários

Carregando demonstração…

Código da demo
"use client";

import * as React from "react";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";

export function Demo() {
  const [on, setOn] = React.useState(true);

  return (
    <div className="flex items-center gap-fe-2">
      <Switch id="airplane" checked={on} onCheckedChange={setOn} />
      <Label htmlFor="airplane">Modo avião</Label>
    </div>
  );
}

Use

  • Ligar ou desligar algo com efeito imediato.
  • Rótulo diz o que liga: “Notificações por e-mail”.

Não use

  • Não use em formulário que só vale ao enviar: use Checkbox.
  • Não use para escolher entre duas opções nomeadas: use ToggleGroup.
Acessibilidade
Label associado; estado checked anunciado.
Importar
import { Switch } from "@financeequity/ui/switch"

Neste repositório:

import { Switch } from "@/components/ui/switch"
Dependências
radix-ui