Autocomplete
Campo de texto que sugere opções enquanto a pessoa digita. Use o Select para listas curtas, em que bater o olho basta; o Combobox para listas longas em que a pessoa primeiro abre a lista e depois busca; e o Autocomplete quando ela já sabe o que procura e quer digitar direto no campo, quando as opções vêm do servidor ou quando um texto livre também vale.
Buscar signatário por nome ou e-mail
A busca ignora acentos e maiúsculas e considera nome, e-mail e papel. Digite joao, @exemplo ou fiador. A primeira sugestão já vem destacada: Enter escolhe.
Contas suspensas aparecem, mas não podem ser escolhidas.
Valor: rafael-antunes
Agrupadas por região. Busque por cidade ou UF.
Valor: vazio
Busca no servidor
Com minChars, a lista só abre a partir de 2 caracteres. onInputChange dispara a busca, loading mostra o carregamento e shouldFilter desligado deixa o filtro com o servidor. Experimente locação ou ENV-2026-03.
Busca entre os envelopes enviados nos últimos 90 dias.
Valor: vazio
Valor livre
Com allowCustomValue, as sugestões ajudam, mas o texto digitado também é aceito. Nenhuma sugestão vem destacada: Enter ou sair do campo mantém o que foi escrito.
Aparece no e-mail enviado aos signatários.
Valor: vazio
Estados
Definido pela conta que enviou o envelope.
O envelope precisa de uma testemunha.
Digite qualquer coisa para ver o estado vazio.
Tamanhos
Teclado
- Seta para baixo ou para cima: abre a lista e move o destaque, pulando opções desabilitadas.
- Enter: escolhe a opção destacada.
- Esc: fecha a lista. Com a lista fechada, limpa o campo.
- Tab: fecha a lista e mantém o valor escolhido.
- Home e End: vão para o início e o fim do texto.
Props
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| options | AutocompleteOption[] | — | { value, label, description?, keywords?, group?, icon?, disabled? }. value precisa ser único. |
| value / defaultValue | string | — | Valor escolhido, controlado ou não. Vazio quando o campo é limpo. |
| onValueChange | (value: string) => void | — | Recebe o value da opção, ou o texto digitado com allowCustomValue. |
| onInputChange | (text: string) => void | — | Chamado a cada tecla. Use para buscar opções no servidor. |
| emptyMessage | ReactNode | "Nenhum resultado encontrado." | Mostrado quando a busca não encontra nada. |
| loading | boolean | false | Mostra o carregamento no campo e na lista. |
| loadingMessage | ReactNode | "Buscando opções..." | Texto da lista durante o carregamento. |
| minChars | number | 0 | Quantidade mínima de caracteres para abrir a lista. |
| shouldFilter | boolean | true | Desligue quando o servidor já devolve as opções filtradas. |
| allowCustomValue | boolean | false | Aceita texto livre. Sem ele, sair do campo devolve o label da opção escolhida. |
| clearable | boolean | true | Mostra o botão Limpar quando há texto ou valor. |
| size | "sm" | "md" | "lg" | "md" | Mesma altura do Input e do SelectTrigger. |
| contentClassName | string | — | Classe extra da lista, por exemplo para outra largura. |
<Field label="Signatário">
{(control) => (
<Autocomplete
{...control}
options={[{ value: "marina-costa", label: "Marina Costa", description: "[email protected]" }]}
value={signer}
onValueChange={setSigner}
placeholder="Nome ou e-mail do signatário"
emptyMessage="Nenhum contato com esse nome ou e-mail."
/>
)}
</Field>