Ravox KitFormulário
Alternar
Botão que fica pressionado (aria-pressed): negrito, fixar, silenciar. Pressionado, fica cheio na cor do texto. Um checkbox escondido ao lado leva name, value e ref, então funciona em formulário comum e com o register() do React Hook Form.
Ajustes
Variante
Tamanho
Conteúdo
Exemplos
Controlado, com o ícone trocando
Barra de estilo com React Hook Form
Formulário comum
Fantasma e contorno
Instalação
O shadcn cria components/ui/alternar.tsx no seu projeto e instala o tema junto. O arquivo é seu: edite à vontade.
npx shadcn@latest add https://ui.ravoxlabs.com/r/alternar.jsonOpções
| Opção | Tipo | Padrão | O que faz |
|---|---|---|---|
| pressionado | boolean | — | Estado atual (modo controlado). |
| padrao | boolean | false | Pressionado no começo (modo não controlado). |
| aoTrocar | (pressionado: boolean) => void | — | Quando alterna. |
| variante | "fantasma" | "contorno" | "fantasma" | Sem borda (barras de ferramenta) ou com borda (sozinho na tela). |
| tamanho | "pequeno" | "medio" | "grande" | "icone" | "icone-pequeno" | "medio" | Os de ícone são quadrados: dê um aria-label. |
| name / value | string | — | Pressionado, o formulário recebe o value (ou "on"); solto, nada. |
| ref / onChange / onBlur | do checkbox escondido | — | É o que o register() usa: {...register("negrito")} devolve true/false. |
| refBotao | Ref<HTMLButtonElement> | — | Ref do <button> visível. |
| ...props | ComponentProps<"button"> | — | O resto vai para o <button> (aria-label, onClick, disabled). |