componentes / formulário

Switch

Alterne uma opção com resposta imediata.

660 B gzip client componentbase ui · switch

email notifications compact mode

switch-default.tsx

import { Switch } from "@/components/ui/switch";

export default function SwitchDefault() {
  return (
    <div className="flex flex-col gap-4 text-sm">
      <label className="flex items-center justify-between gap-6">
        email notifications <Switch defaultChecked />
      </label>
      <label className="flex items-center justify-between gap-6">
        compact mode <Switch />
      </label>
    </div>
  );
}

Instalação

$ npx shadcn@latest add https://cd-ui.vercel.app/r/switch.json

primeira vez? configure o components.json e o tema antes: veja instalação.

Uso

import { Switch, SwitchRow } from "@/components/ui/switch"

<Switch defaultChecked />

<SwitchRow title="Weekly digest" description="A summary, once a week." />

Exemplos

Linha de configuração

SwitchRow coloca título, descrição e interruptor num <label>: a linha inteira é clicável e o título dá nome ao interruptor.

Weekly digestA summary of activity, once a week.Security alertsOnly for sign-ins from a new device.Priority supportUnavailable on your plan.

switch-row.tsx

import { SwitchRow } from "@/components/ui/switch";

export default function SwitchRowExample() {
  return (
    <div className="flex w-full max-w-sm flex-col divide-y">
      <SwitchRow className="py-3" defaultChecked description="A summary of activity, once a week." title="Weekly digest" />
      <SwitchRow className="py-3" description="Only for sign-ins from a new device." title="Security alerts" />
      <SwitchRow className="py-3" description="Unavailable on your plan." disabled title="Priority support" />
    </div>
  );
}

API

SwitchRow

Linha com título, descrição e interruptor. className vai na linha; as demais props vão no Switch. Tem anel de foco na linha e estado desativado.

prop	tipo	padrão
`title` Texto principal da linha.	`ReactNode`	-
`description` Texto secundário, abaixo do título.	`ReactNode`	-
`className` Classes extras, mescladas com `cn` (a sua vence).	`string`	-

Switch

Base UI · Switch.Root

Interruptor. Use para efeito imediato; para "aplicar depois", prefira Checkbox.

prop	tipo	padrão
`checked · defaultChecked` Estado controlado ou inicial.	`boolean`	-
`onCheckedChange` Chamado ao alternar.	`(checked: boolean) => void`	-
`className` Classes extras, mescladas com `cn` (a sua vence).	`string`	-

Teclado

tecla	ação
`SpaceEnter`	Alterna.

import { Switch } from "@/components/ui/switch"; export default function SwitchDefault() { return ( <div className="flex flex-col gap-4 text-sm"> <label className="flex items-center justify-between gap-6"> email notifications <Switch defaultChecked /> </label> <label className="flex items-center justify-between gap-6"> compact mode <Switch /> </label> </div> ); }

Exemplos

Linha de configuração

SwitchRow coloca título, descrição e interruptor num <label>: a linha inteira é clicável e o título dá nome ao interruptor.

Weekly digestA summary of activity, once a week.Security alertsOnly for sign-ins from a new device.Priority supportUnavailable on your plan.

switch-row.tsx

import { SwitchRow } from "@/components/ui/switch";

export default function SwitchRowExample() {
  return (
    <div className="flex w-full max-w-sm flex-col divide-y">
      <SwitchRow className="py-3" defaultChecked description="A summary of activity, once a week." title="Weekly digest" />
      <SwitchRow className="py-3" description="Only for sign-ins from a new device." title="Security alerts" />
      <SwitchRow className="py-3" description="Unavailable on your plan." disabled title="Priority support" />
    </div>
  );
}

API

SwitchRow

Linha com título, descrição e interruptor. className vai na linha; as demais props vão no Switch. Tem anel de foco na linha e estado desativado.

prop	tipo	padrão
`title` Texto principal da linha.	`ReactNode`	-
`description` Texto secundário, abaixo do título.	`ReactNode`	-
`className` Classes extras, mescladas com `cn` (a sua vence).	`string`	-

Switch

Base UI · Switch.Root

Interruptor. Use para efeito imediato; para "aplicar depois", prefira Checkbox.

prop	tipo	padrão
`checked · defaultChecked` Estado controlado ou inicial.	`boolean`	-
`onCheckedChange` Chamado ao alternar.	`(checked: boolean) => void`	-
`className` Classes extras, mescladas com `cn` (a sua vence).	`string`	-

tecla

ação

SpaceEnter

Alterna.