Ravox KitFormulário
Seletor
Select no padrão combobox da WAI-ARIA: setas, Home/End, Enter, Esc e digitar para pular. A lista abre na camada de cima, então nenhum overflow: hidden corta. Manda o valor no formulário pelo name.
Dá para trocar de plano quando quiser.
Ajustes
Tamanho
Instalação
O shadcn cria components/ui/seletor.tsx no seu projeto e instala o tema junto. O arquivo é seu: edite à vontade.
npx shadcn@latest add https://ui.ravoxlabs.com/r/seletor.jsonOpções
| Opção | Tipo | Padrão | O que faz |
|---|---|---|---|
| opcoes | { valor, rotulo, descricao?, desabilitada? }[] | — | As opções. A descrição aparece embaixo do rótulo, só na lista. |
| valor / aoTrocar | string / (valor: string) => void | — | Modo controlado (e o jeito de ligar no Controller do React Hook Form). |
| padrao | string | — | Valor no começo (modo não controlado). |
| name | string | — | Cria um <input type="hidden"> com o valor, para formulário comum. |
| aoSair | () => void | — | Foco saiu do seletor (o onBlur do Controller). |
| placeholder | string | "Escolha…" | Texto enquanto nada está escolhido. |
| rotulo / dica / erro | ReactNode | — | Iguais aos do Campo: rótulo ligado, nota por aria-describedby, erro com aria-invalid. |
| tamanho | "pequeno" | "medio" | "grande" | "medio" | Altura do botão. |
| mostrar | (opcao) => ReactNode | — | Como a escolhida aparece no botão (padrão: o rótulo). |