Interruptor
Um botão de ligar/desligar para ajustes instantâneos — notificações, modo escuro, sinalizadores de recursos — com aquele visual neobrutalista de bordas e sombras.
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
O switch é um alternador de dois estados — ligado ou desligado, aplicado no momento em que vira, sem botão de enviar. Construído sobre o componente Base UI Switch e estilizado com a receita neobrutalista: bordas grossas, sombras duras e tipografia em negrito.
Quando usar:
- Painéis de configurações — notificações, modo escuro, reprodução automática: preferências que entram em vigor na hora.
- Feature flags — habilite um recurso beta ou alterne entre cobrança mensal e anual.
- Controles por linha — ative ou pause itens em uma tabela ou lista sem abrir um formulário.
Instalação#
pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/switch.jsonnpx shadcn@latest add https://neobrutalism.com/r/base/switch.jsonyarn dlx shadcn@latest add https://neobrutalism.com/r/base/switch.jsonbunx --bun shadcn@latest add https://neobrutalism.com/r/base/switch.json
Instale as seguintes dependências:
pnpm add @base-ui/reactnpm install @base-ui/reactyarn add @base-ui/reactbun add @base-ui/react
Copie e cole o código a seguir no seu projeto.
"use client"
import * as React from "react"
import { Switch as SwitchPrimitive } from "radix-ui"
import { cn } from "@/lib/utils"
function Switch({
className,
size = "default",
...props
}: React.ComponentProps<typeof SwitchPrimitive.Root> & {
size?: "sm" | "default"
}) {
return (
<SwitchPrimitive.Root
data-slot="switch"
data-size={size}
className={cn(
"peer group/switch relative inline-flex shrink-0 cursor-pointer items-center border-2 border-foreground transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary aria-invalid:border-destructive data-[size=default]:h-6 data-[size=default]:w-11 data-[size=sm]:h-5 data-[size=sm]:w-9 data-checked:bg-primary data-disabled:cursor-not-allowed data-disabled:opacity-50",
className
)}
{...props}
>
<SwitchPrimitive.Thumb
data-slot="switch-thumb"
className="pointer-events-none mx-0.5 block border-2 border-foreground bg-primary transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-5 group-data-[size=sm]/switch:data-checked:translate-x-4 data-checked:bg-background data-unchecked:translate-x-0"
/>
</SwitchPrimitive.Root>
)
}
export { Switch }
Ajuste os caminhos de importação conforme a configuração do seu projeto.
Uso#
import { Switch } from "@/components/ui/switch"<Switch />Exemplos#
Descrição#
import {
Field,
FieldContent,Cartão de opção#
Seleção em formato de cartão, onde FieldLabel envolve todo o Field para criar um padrão de cartão clicável.
import {
Field,
FieldContent,Desativado#
Adicione a prop disabled ao componente Switch para desativar o interruptor. Adicione a prop data-disabled ao componente Field para aplicar estilos.
import { Field, FieldLabel } from "@/components/ui/field"
import { Switch } from "@/components/ui/switch"
Inválido#
Adicione a prop aria-invalid ao componente Switch para indicar um estado inválido. Adicione a prop data-invalid ao componente Field para aplicar estilos.
import {
Field,
FieldContent,Tamanho#
Use a prop size para alterar o tamanho do interruptor.
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Switch } from "@/components/ui/switch"
RTL#
Para ativar o suporte a RTL no Neobrutalism, consulte o guia de configuração de RTL.
"use client"
import * as React from "react"Acessibilidade#
O switch segue o padrão Switch do WAI-ARIA: ele renderiza um botão de verdade com role="switch" e aria-checked, além de um input oculto para que o valor seja enviado com o formulário ao redor.
Interações de teclado:
| Tecla | Ação |
|---|---|
Tab / Shift + Tab | Move o foco para o switch / para fora dele |
Space | Alterna o switch |
Enter | Alterna o switch |
Referência da API#
Consulte a documentação do Base UI Switch.