Pular para o conteúdo principal

Autocomplete

Dica

Se não tiver necessidade de exibir uma lista grande de opções, utilize o Select.

O Autocomplete é um input que sugere uma lista de opções baseadas no termo digitado. Essas opções devem ser atualizadas a cada tecla digitada. Utilize quando for necessário encontrar uma opção dentro de um volume muito grande de informações.

Tipos de opções

info

No momento, não é possível personalizar os estilos das opções de um Autocomplete.

Texto auxiliar

Você pode aplicar um texto principal para descrever a opção e, se necessário, um texto de apoio pode complementar o principal.

Com ícone

Dica

Os ícones adicionam complexidade e podem impactar na leitura das opções, por isso, use somente em casos realmente necessários.

Ícones são elementos decorativos opcionais que reforçam o significado de uma opção e aparecem sempre à esquerda do texto principal.

Com o componente Tag

Utilize o componente Tag quando precisar destacar alguma opção.

Separadores

Divisor com linha

Use o divisor com estilo de linha quando precisar criar uma separação visual entre as opções.

Agrupador com texto

Quando a intenção for criar um agrupamento de opções, utilize o agrupador com texto, nele você pode adicionar um nome para o grupo de opções.

Limpar campo

Padrão

Para limpar o campo, é só clicar no "x" localizado à direita do campo do Autocomplete. O "x" aparece após algum valor ser digitado.

Múltipla selecção

Para remover todas as opções selecionadas de uma única vez, é só clicar no "x" localizado à direita do campo do Autocomplete. Também é possível remover individualmente cada opção selecionada, clicando no "x" de cada opção.

Quando a quantidade de opções selecionadas for maior que o tamanho do campo, as tags são reorganizadas. O Autocomplete de múltipla seleção é o único componente de entrada de dados que permite a alteração da altura.

Sem resultados

Quando nenhuma opção for encontrada, por padrão nenhuma mensagem deve ser exibida. Uma mensagem pode ser adicionada e personalizada se tiver necessidade.

Você pode adicionar uma nova opção à lista alterando o estado de opções que está sendo renderizado. Para mais detalhes acesse nossa aba de exemplos.

Carregamento

Quando o Autocomplete tiver carregamento assíncrono, é possível adicionar a propriedade loading para que o Spinner apareça dentro do campo.

Feedback