Interruptor

Um comutador acessível construído no React Aria - semântica nativa, suporte ao teclado e um anel visível em foco. Duas formas (pílula e retângulo) em três tamanhos. O no estado usa o gradiente primário com um anel de inserção e um pequeno chip azul gravado no polegar, combinando Figma 1:1.

Instalação

Você pode adicionar este componente de switch usando o nosso CLI ou manualmente:

Modo escuro pronto - este componente segue tokens semânticos BoardUI automaticamente. Configurar a mudança de tema.

CLI

Manual

O CLI copia a fonte do componente (com suas dependências internas) em seu projeto e instala quaisquer pacotes npm necessários.

npx boardui@latest add switch

Usando um pacote de UI compartilhado ou aliases de importação personalizados? Configure seus caminhos de instalação antes de executar o CLI. Exemplos de copy-paste usam as importações padrão.

Formas

Duas formas através do shape Prop. pill (o incumprimento) é totalmente arredondado; rectangle usos radius/md na via e radius/xs No polegar, ambos escalados por tamanho. O chip interno do polegar segue a mesma forma.

<Switch shape="pill" defaultSelected /> {/* fully rounded (default) */}

Tamanhos

Três tamanhos através do size aderente - lg (56×32), md (42×24, o padrão) e sm (28×16). O polegar, estofamento, distância de viagem e o anel no estado todos escalam juntos.

<Switch size="lg" defaultSelected /> {/* 56 × 32 */}

Estados & rótulos

Utilização isSelected + onChange para um interruptor controlado, ou defaultSelected para descontrolado. isDisabled reduz o controle para 50%. Passe children para uma legenda - React Aria associa-a com a entrada, por isso, clicar no texto comuta o interruptor.

{/* Controlled */}<Switch isSelected={enabled} onChange={setEnabled} />
{/* Disabled */}<Switch isDisabled defaultSelected />
{/* With label (react-aria associates it automatically) */}<Switch>Auto-sync to cloud</Switch>

Cartão

Carta de configuração selecionável - um ícone opcional de 24×24, um título e uma descrição curta à esquerda, e o interruptor à direita. A carta inteira comuta e mostra um fundo de cursor, a contrapartida de mudança para CheckboxCard. Passe qualquer ícone Remix via icon para SwitchCard.

Notificações de envioAlertas para atividade importante.Digerir semanalmenteUma recapitulação todas as segundas.Modo escuro

import { RiNotification4Line, RiMoonLine } from "@remixicon/react";import { SwitchCard } from "@/components/base/switch/switch-card";
export function Example() {  return (    <div className="flex max-w-md flex-col gap-4">      <SwitchCard        icon={RiNotification4Line}        title="Push notifications"        description="Get notified when something needs your attention."        defaultSelected      />      {/* icon is optional - pass the component reference, not <RiMoonLine /> */}      <SwitchCard icon={RiMoonLine} title="Dark mode" />    </div>  );}