Ravox KitFormulário
Opções
Grupo de radios de verdade, em lista simples ou em cartão com título e descrição. Setas do teclado, name nativo e envio no formulário vêm do navegador.
Ajustes
Variante
Direção
Instalação
O shadcn cria components/ui/opcoes.tsx no seu projeto e instala o tema junto. O arquivo é seu: edite à vontade.
npx shadcn@latest add https://ui.ravoxlabs.com/r/opcoes.jsonOpções
| Opção | Tipo | Padrão | O que faz |
|---|---|---|---|
| variante | "lista" | "cartao" | "lista" | Bolinha + texto, ou bloco clicável com título e descrição (Opcoes). |
| direcao | "vertical" | "horizontal" | "vertical" | Uma embaixo da outra, ou lado a lado quebrando linha (Opcoes). |
| legenda | ReactNode | — | Título do grupo, vira a <legend> (Opcoes). |
| valor / aoTrocar | string / (valor: string) => void | — | Modo controlado (Opcoes). |
| padrao | string | — | Marcada no começo, modo não controlado (Opcoes). |
| name / dica / erro | string / ReactNode | — | Name dos radios (gerado se faltar) e a nota embaixo do grupo (Opcoes). |
| valor, titulo, descricao, fim | string / ReactNode | — | Cada opção (Opcao). Os outros props vão no <input type="radio">: {...register("cargo")} funciona. |