Autocomplete

Um campo de seleção múltipla com busca, que permite filtrar e escolher várias opções de uma lista usando checkboxes.

Exemplos

Padrão

Tamanhos

Assim como no Select, o size fica na raiz Autocomplete e o AutocompleteTrigger lê o valor dela. O lg é o padrão: 48px de altura, texto de 16px e ícone de 24px. O md tem 40px, texto de 14px e ícone de 20px. As opções da lista ficam um tamanho abaixo do campo: no lg, texto de 14px e 40px de altura; no md, texto de 12px e 32px.

Desabilitado

Inválido

Com texto de ajuda

Com rodapé

API

AutocompleteWrapper

Container (div) que agrupa o Label, o Autocomplete e o AutocompleteText em coluna, com espaçamento entre eles. Aceita todas as props nativas de div.

Propriedade	Tipo	Padrão	Descrição
className	string	-	Classes CSS adicionais para o container.
...props	Todas as props nativas de div	-	Permite passar qualquer outra propriedade padrão do elemento div.

Autocomplete

Contém todas as partes do autocomplete. Gerencia o estado de aberto/fechado e os valores selecionados.

Propriedade	Tipo	Padrão	Descrição
defaultValues	string[]	[]	Valores selecionados iniciais no modo não controlado.
values	string[]	-	Valores selecionados no modo controlado. Use junto com onValuesChange.
onValuesChange	(values: string[]) => void	-	Função chamada quando os valores selecionados mudam.
open	boolean	-	Estado de abertura do dropdown no modo controlado.
onOpenChange	(open: boolean) => void	-	Função chamada quando o estado de abertura muda.
disabled	boolean	false	Quando true, impede o usuário de interagir com o autocomplete.
invalid	boolean	false	Quando true, aplica o estilo de erro no trigger e no texto de ajuda.
size	"md" | "lg"	"lg"	Tamanho do trigger: lg com 48px de altura e md com 40px, como no Select. As opções ficam um tamanho abaixo: 40px no lg e 32px no md. Fica exposto em data-size no trigger.

AutocompleteTrigger

O botão que abre e fecha o dropdown. Exibe o conteúdo de children quando informado; sem children, exibe o placeholder. O texto não muda sozinho com a seleção: para mostrar os itens escolhidos, passe-os como children a partir dos valores controlados. Aceita as demais props nativas de button.

Propriedade	Tipo	Padrão	Descrição
placeholder	string	"Selecione uma opção"	Texto exibido no botão do trigger quando não há children.
children	ReactNode	-	Conteúdo exibido no lugar do placeholder, por exemplo os itens selecionados.
className	string	-	Classes CSS adicionais para o botão do trigger.

AutocompleteContent

O painel do dropdown que contém o campo de busca e a lista de opções.

Propriedade	Tipo	Padrão	Descrição
searchPlaceholder	string	"Buscar..."	Texto do placeholder do campo de busca dentro do dropdown.
emptyMessage	string	"Nenhum resultado encontrado"	Mensagem exibida quando nenhum item corresponde à busca.
className	string	-	Classes CSS adicionais para o container do conteúdo.

AutocompleteItem

Uma opção selecionável dentro do dropdown. Exibe um checkbox que alterna ao selecionar. O dropdown continua aberto depois que você seleciona um item.

Propriedade	Tipo	Padrão	Descrição
value	string	-	Identificador único do item, usado para controlar a seleção. Pode ser um ID. Obrigatório.
name	string	-	Nome de exibição opcional usado na busca/filtro. Útil quando value é um ID opaco que não bateria com o que o usuário digita. Quando omitido, a busca compara com value e com o texto dentro de children, incluindo elementos aninhados. Passe name quando o texto vier de um componente que o recebe por props em vez de children.
disabled	boolean	false	Quando true, impede o usuário de selecionar o item.
className	string	-	Classes CSS adicionais para o item.

AutocompleteGroup

Agrupa itens relacionados dentro do conteúdo.

Propriedade	Tipo	Padrão	Descrição
heading	ReactNode	-	Título opcional renderizado acima dos itens do grupo.
className	string	-	Classes CSS adicionais para o container do grupo.

AutocompleteText

Texto de ajuda exibido abaixo do trigger. Mostra o estilo de erro automaticamente quando o Autocomplete tem invalid={true}.

Propriedade	Tipo	Padrão	Descrição
className	string	-	Classes CSS adicionais para o texto de ajuda.
children	ReactNode	-	Conteúdo de texto. Fica com estilo de erro (feedback-error-foreground) quando inválido; caso contrário, usa a cor normal (gray-foreground).

AutocompleteContentFooter

Rodapé opcional renderizado na parte de baixo do painel do dropdown, com os botões de ação Cancelar e Concluir. Coloque-o como filho de AutocompleteContent. Cancelar desfaz as marcações feitas desde que o dropdown abriu (chama onValuesChange com os valores de antes) e fecha o dropdown. Fechar clicando fora ou com Esc mantém a seleção.

Propriedade	Tipo	Padrão	Descrição
cancelLabel	string	"Cancelar"	Label do botão de cancelar.
confirmLabel	string	"Concluir"	Label do botão de confirmar.
onCancel	() => void	-	Função chamada quando o botão de cancelar é clicado. Antes dela, as marcações feitas desde que o dropdown abriu são desfeitas (com onValuesChange recebendo os valores de antes), e depois o dropdown fecha.
onConfirm	(values: string[]) => void	-	Função chamada quando o botão de confirmar é clicado. Recebe os valores selecionados atuais e fecha o dropdown automaticamente.
className	string	-	Classes CSS adicionais para o container do rodapé.