Combobox
Select com busca para listas longas. O gatilho tem o visual do SelectTrigger e a lista usa o cmdk: digite para filtrar, use as setas para andar e Enter para escolher. A busca considera o nome, a descrição e as palavras-chave.
Escolher signatário na lista
Busque por nome ou e-mail.
O envelope precisa de uma testemunha.
Palavras-chave
Digite aluguel ou sigilo: as palavras-chave encontram o modelo mesmo sem aparecer no nome.
Tamanhos e desabilitado
Props
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| options | ComboboxOption[] | — | { value, label, description?, keywords?, disabled? }. value precisa ser único. |
| value | string | — | Valor escolhido, controlado. |
| onValueChange | (value: string) => void | — | Recebe o value da opção. Não depende da normalização do cmdk. |
| placeholder | ReactNode | "Selecione" | Texto do gatilho vazio. |
| searchPlaceholder | string | "Buscar" | Placeholder e rótulo do campo de busca. |
| emptyMessage | ReactNode | "Nenhum resultado encontrado." | Mostrado quando a busca não encontra nada. |
| size | "sm" | "md" | "lg" | "md" | Altura igual à do SelectTrigger. |
| align | "start" | "center" | "end" | "start" | Alinhamento da lista. A largura acompanha o gatilho. |
| open / defaultOpen / onOpenChange | boolean / (open) => void | — | Controle de abertura do Popover. |
| contentClassName | string | — | Classe extra da lista, por exemplo para outra largura. |
<Combobox
options={[{ value: "marina-costa", label: "Marina Costa", description: "marina.costa@exemplo.com.br" }]}
value={signer}
onValueChange={setSigner}
searchPlaceholder="Buscar por nome ou e-mail"
emptyMessage="Nenhum contato com esse nome ou e-mail."
aria-label="Signatário"
/>