Ravox KitFormulário
Caixa de seleção
Checkbox de verdade com rótulo, descrição e erro, estado indeterminado para o "selecionar todos" e um grupo com legenda. Manda name/value no formulário e aceita o register() do React Hook Form direto.
Ajustes
Estado
Exemplos
Selecionar todos
Grupo em formulário comum
Com React Hook Form
Lado a lado
Instalação
O shadcn cria components/ui/caixa.tsx no seu projeto e instala o tema junto. O arquivo é seu: edite à vontade.
npx shadcn@latest add https://ui.ravoxlabs.com/r/caixa.jsonOpções
| Opção | Tipo | Padrão | O que faz |
|---|---|---|---|
| rotulo | ReactNode | — | Texto ao lado da caixa; a linha inteira é clicável. Sem rótulo, passe aria-label. |
| descricao | ReactNode | — | Linha de apoio embaixo do rótulo, lida junto com a caixa (aria-describedby). |
| erro | ReactNode | — | Mensagem de erro embaixo: pinta a borda e marca aria-invalid. |
| indeterminado | boolean | false | O traço de "alguns marcados". O leitor de tela anuncia como misto. |
| aoMarcar | (marcado: boolean) => void | — | Atalho para o onChange: recebe só se ficou marcada. |
| classeBloco | string | — | Classes do bloco de fora; className vai no input. |
| ...props | ComponentProps<"input"> | — | Tudo o que um checkbox aceita (name, value, checked, defaultChecked, ref): {...register("termos")} funciona. |
| CaixaGrupo legenda | ReactNode | — | Título do grupo (<fieldset> + <legend>). |
| CaixaGrupo name | string | — | name de todas as caixas; o formulário recebe um valor por caixa marcada (FormData.getAll). |
| CaixaGrupo valor / padrao / aoTrocar | string[] | — | Valores marcados (controlado ou no começo); cada <Caixa> precisa de value. |
| CaixaGrupo direcao | "vertical" | "horizontal" | "vertical" | Uma embaixo da outra ou lado a lado (quebra linha). |
| CaixaGrupo dica / erro | ReactNode | — | Nota embaixo do grupo; com erro, todas as caixas desmarcadas ficam com a borda de erro. |