Ravox KitFormulário

Interruptor

Liga e desliga para ajustes que valem na hora. É um checkbox com role="switch": Espaço alterna, o formulário recebe "on" quando ligado e o register() do React Hook Form devolve true/false. Com rótulo antes ou na ponta da linha.

Mostrar centavos nos relatóriosVale só para a sua conta.

Ajustes

Tamanho

Lado

DescriçãoDesabilitado

Exemplos

Linha de ajustes

Aceitar PixO QR aparece no fim da compra.

Aceitar cartãoAté 12x, com juros por conta do cliente.

Loja em manutençãoA loja está aberta.

Formulário comum

Com React Hook Form

Tamanhos e desabilitado

Compacto

Médio

Plano Equipe (só no anual)

Instalação

O shadcn cria components/ui/interruptor.tsx no seu projeto e instala o tema junto. O arquivo é seu: edite à vontade.

npx shadcn@latest add https://ui.ravoxlabs.com/r/interruptor.json

Opções

Opção	Tipo	Padrão	O que faz
rotulo	ReactNode	—	Texto do <label>; a linha inteira é clicável. Sem rótulo, passe aria-label.
descricao	ReactNode	—	Linha de apoio embaixo do rótulo, lida junto com o interruptor.
erro	ReactNode	—	Mensagem de erro embaixo (ex.: aceite obrigatório).
lado	"inicio" \| "fim"	"inicio"	fim: texto à esquerda e interruptor na ponta, como numa lista de ajustes.
tamanho	"pequeno" \| "medio"	"medio"	Trilho de 28 ou 36px.
aoTrocar	(ligado: boolean) => void	—	Atalho para o onChange: recebe só se ficou ligado.
classeBloco	string	—	Classes do bloco de fora; className vai no trilho (o input).
...props	ComponentProps<"input">	—	Tudo o que um checkbox aceita (name, value, checked, defaultChecked, ref).