Ravox KitFormulário
Autocompletar
Campo que filtra uma lista enquanto a pessoa digita. Busca sem acento ("sao" acha São Paulo), seleção única ou múltipla com etiquetas, grupos, estado vazio, carregando para busca no servidor e "Criar …" quando nada combina.
O frete é calculado a partir dela.
Ajustes
Seleção
Tamanho
Exemplos
Etiquetas com limite
BugUrgente
Até 3 por chamado.
Criar categoria nova
Digite uma categoria que não existe, como “Canecas”.
Busca no servidor
Grupos e opção travada
Instalação
O shadcn cria components/ui/autocompletar.tsx no seu projeto e instala o tema junto. O arquivo é seu: edite à vontade.
npx shadcn@latest add https://ui.ravoxlabs.com/r/autocompletar.jsonOpções
| Opção | Tipo | Padrão | O que faz |
|---|---|---|---|
| opcoes | { valor, rotulo, descricao?, grupo?, termos?, desabilitada? }[] | — | A lista. `termos` entra na busca (sigla, apelido); opções com o mesmo `grupo` aparecem juntas sob um título. |
| multiplo | boolean | false | Várias escolhas: viram etiquetas dentro do campo, a lista fica aberta e Backspace no campo vazio tira a última. |
| valor / padrao | string | null (único) · string[] (múltiplo) | — | Valor controlado ou inicial. |
| aoTrocar | (valor: string | null) => void · (valores: string[]) => void | — | Chamado a cada escolha, conforme o modo. |
| aoBuscar | (texto: string) => void | — | Chamado a cada letra, para buscar no servidor (faça o debounce do seu lado). Com ele, a lista não é filtrada aqui. |
| filtrar | boolean | true sem aoBuscar | Filtra a lista pelo texto digitado. |
| carregando | boolean | false | Mostra "Buscando…" e o giro, e marca aria-busy na lista. |
| vazio | ReactNode | "Nada encontrado para “…”." | O que aparece quando nada combina. |
| aoCriar | (texto: string) => string | void | — | Liga a opção "Criar “texto”". Devolva o valor novo para ele já sair escolhido. |
| maximo | number | — | Com multiplo: quantas escolhas no máximo; as outras opções travam. |
| rotulo · dica · erro | ReactNode | — | Rótulo, ajuda e erro ligados ao campo (aria-describedby, aria-invalid). |
| tamanho | "pequeno" | "medio" | "grande" | "medio" | Altura mínima: 32, 40 ou 48px (a caixa cresce com as etiquetas). |
| aoSair | () => void | — | Foco saiu do campo (o onBlur do Controller). |
| name | string | — | Manda o valor em <input type="hidden"> (um por escolha no múltiplo). |
| ...props | ComponentProps<"input"> | — | Vão para o <input> (placeholder, disabled, ref…). className vai na caixa; classeBloco e classeLista nos outros níveis. |