Caixa combo

As caixas de combinação unem uma entrada de texto com um menu seletor, permitindo que os usuários filtrem listas mais longas apenas para as seleções correspondentes a uma consulta.

Opções

#Etiqueta

As caixas de combinação devem sempre ter um rótulo;
Em casos raros em que o contexto é suficiente e um especialista em acessibilidade revisou o design, o rótulo pode ficar indefinido.

#Posição da etiqueta

As etiquetas podem ser colocadas na parte superior ou na lateral;
Os rótulos superiores são o padrão e são recomendados porque funcionam melhor com textos longos, localização e layouts responsivos;
As etiquetas laterais são mais úteis quando o espaço vertical é limitado.

#Valor

O valor mostra o texto inserido de um usuário ou a opção selecionada.

#Largura

A largura de uma caixa de combinação pode ser personalizada adequadamente para seu contexto.

#Tamanho

As caixas de combinação vêm em quatro tamanhos diferentes: pequeno, médio, grande e extra grande. O tamanho médio é a opção padrão e mais usada;
Use os outros tamanhos com moderação;
Eles devem ser usados para criar uma hierarquia de importância dentro da página.

#Silêncio

Por padrão, as caixas de combinação têm um plano de fundo visível;
Esse estilo funciona melhor em uma matriz densa de controles em que o plano de fundo ajuda a separar a entrada do contêiner ao redor ou a dar visibilidade a botões isolados;
Alternativamente, caixas de combinação silenciosas não podem ter um fundo visível;
Esse estilo funciona melhor quando um layout claro (pilha vertical, tabela, grade) facilita a análise dos botões;
Muitos componentes silenciosos em um espaço pequeno podem ser difíceis de ler.

#Obrigatório ou opcional

As caixas de combinação podem ser marcadas como opcionais ou obrigatórias, dependendo da situação. Para caixas de combinação obrigatórias, há duas opções de estilo: um rótulo “(obrigatório)” ou um asterisco. Se você usar um asterisco, certifique-se de incluir um texto de dica para explicar o que o asterisco significa. As caixas de combinação opcionais são indicadas com texto adicionado ao final do rótulo — “(opcional)” — ou não têm nenhuma indicação.
O asterisco usado neste componente é um ícone que possui espaçamento específico do texto do rótulo — não faz parte do próprio texto do rótulo.

#Autocompletar

As caixas de combinação podem completar automaticamente os resultados sugeridos no campo de entrada.

#Erro

Uma caixa de combinação pode ser marcada como tendo um erro para mostrar que um valor precisa ser inserido para avançar ou que um valor inserido é inválido.

#Desativado

Uma caixa de combinação em estado desabilitado mostra que existe um campo de entrada, mas não está disponível nessa circunstância;
Isso pode ser usado para manter a continuidade do layout e comunicar que pode ser disponibilizado posteriormente.

#Somente leitura

As caixas de combinação têm uma opção somente leitura para quando o conteúdo no estado desabilitado ainda precisa ser exibido;
Isso permite que o conteúdo seja copiado, mas não interagido ou alterado;
Uma caixa de combinação não tem uma opção somente leitura se nenhuma seleção tiver sido feita.

#Texto de ajuda (descrição e mensagem de erro)

Uma caixa de combinação pode ter um texto de ajuda abaixo do campo de entrada para fornecer contexto ou instruções extras sobre o que um usuário deve inserir;
A área de texto de ajuda tem duas opções: uma descrição e uma mensagem de erro;
A descrição comunica uma dica ou informações úteis, como requisitos específicos sobre o que escolher;
A mensagem de erro comunica um erro quando os requisitos de entrada não são atendidos, solicitando que o usuário ajuste o que havia selecionado originalmente.

#Largura mínima

A largura mínima para uma caixa combo é 2× a altura do botão utilizado na composição;
Isso garante que os pequenos seletores sejam legíveis e fáceis de segmentar em todos os dispositivos.

#Estouro de texto

Quando o rótulo do campo e o texto do menu são muito longos para o espaço horizontal disponível, eles se quebram para formar outra linha;
O próprio texto do campo fica truncado no final, mas o texto pode ser mostrado por completo no menu.

#Estouro de texto de ajuda

Quando o texto de ajuda é muito longo para o espaço horizontal disponível, ele é quebrado para formar outra linha.

#Altura do menu

O menu da caixa de combinação seletor pode ser tão alto quanto necessário para mostrar o maior número possível de opções no espaço disponível;
Não há altura máxima.