Select / Autocomplete

Tipo: Core

DesignersFigma Design System 2.0
Devs · HTML/CSSmds-styles Storybook com classes e exemplos
Devs · Angularmds-angular Storybook com inputs e outputs

Definição Funcional

O Select permite ao usuário escolher uma ou mais opções de uma lista predefinida. Ele possui funcionalidade de busca integrada (autocomplete), facilitando a localização de itens em listas extensas através da digitação.

Diretrizes de Comportamento

Busca Integrada: O campo deve filtrar as opções em tempo real conforme o usuário digita.
Texto de Marcação (Placeholder): Indique que o campo é interativo. Não use reticências.
- Certo: Pesquisar transportadora ou Selecione o estado
Feedback de Busca: Se a digitação não encontrar resultados, exiba a mensagem: Nenhum resultado encontrado.
Rótulos (Labels): Devem ser curtos e descritivos. Use Caixa de Sentença.
Seleção Múltipla: Se o componente permitir escolher mais de um item, utilize tags (chips) dentro do campo para indicar o que já foi selecionado.

Exemplos de Escrita (Dos & Don’ts)

Contexto Logístico	Estilo Incorreto (Prolixo)	Estilo UX (Conciso/Direto)
Filtro de Veículo	Escolha qual o veículo da frota…	Veículo
Localidade	Digite o nome da cidade para buscar	Cidade de destino
Status	Qual o estado atual desta carga?	Status da carga

Sugestão de Padronização

O termo Dropdown no Figma, causa conflito com o “Menu de Ações”. O termo Autocomplete descreve apenas uma funcionalidade do campo. Select descreve o objetivo (selecionar um dado).
Ação: Padronizar como Select. No documento, deixe claro que o Select possui a função de busca (autocomplete) integrada.

Para desenvolvedores

Tudo abaixo é lido do código (stories, SCSS e componentes Angular) a cada npm run docs:sync — se algo estiver diferente do que você vê no projeto, o código é quem manda.

HTML/CSS (mds-styles)

Exemplo

Story Default do Storybook:

<div class="mds-input">
  <div class="mds-input__content ">
    <input class="mds-input__field" id="mds-input-example" type="text" placeholder="Digite algo..." value="undefined"  >
    <label class="mds-input__label" for="mds-input-example">Label do Campo</label>
  </div>
  <div class="helper-text">Informação de ajuda ao usuário.</div>
</div>

Variações e opções

Opções do painel de controles do Storybook — escolha um valor lá para ver o resultado ao vivo. As classes CSS correspondentes estão na lista abaixo.

Opção	Valores	Padrão no exemplo
`placeholder`	—	`Digite algo...`
`value`	—	—
`helperText`	—	`Informação de ajuda ao usuário.`
`type`	`text` `password` `email` `number` `date`	`text`
`variant`	`default` `success` `danger` `warning`	—
`disabled`	`true` · `false`	—
`required`	`true` · `false`	—
`icon`	—	—
`hasButton`	`true` · `false`	—

Classes CSS

Lidas do SCSS (src/scss) — só aparece aqui o que realmente existe.

Tipo	Classes
Bloco	`.form-check` `.form-check-inline` `.form-check-input` `.form-check-label` `.mds-control-group` `.mds-input`
Elementos	`.mds-btn__icon` `.mds-input__content` `.mds-input__field` `.mds-input__group` `.mds-input__helper` `.mds-input__icon` `.mds-input__label`
Modificadores	`.mds-btn--active` `.mds-btn--emphasis` `.mds-input__number-btn--decrease` `.mds-input__number-btn--increase` `.mds-input--active` `.mds-input--danger` `.mds-input--lg` `.mds-input--md` `.mds-input--required` `.mds-input--sm` `.mds-input--with-step-buttons` `.mds-input--xs`

Angular (mds-angular)

Seletor

mds-select

O Select dá aos usuários a capacidade de fazer uma única seleção ou várias seleções de uma série de opções.

Inputs

Input	Tipo	Padrão	Descrição
`formControl`	`UntypedFormControl`	`new UntypedFormControl()`	FormControl do campo
`placeholder`	`string \| null`	`null`	Label do campo. * só esse componente utiliza o placeholder para label
`size`	`'sm' \| 'md'`	`'md'`	Tamano do Campo
`mode`	`'input' \| 'button'`	`'input'`	Modo de exibição do input
`loading`	`boolean`	`false`	Exibe loading no campo
`items`	`unknown[]`	`[]`	Itens do campo
`qtdMaxExibidos`	`number \| null`	`20`	Qtd max de labels exibidas no select multiple
`valueMember`	`string \| null`	`'value'`	Campo de referencia no objeto do item para o valor
`labelMember`	`string \| null`	`'label'`	Campo de referencia no objeto do item para o label
`colorMember`	`string \| null`	`null`	Campo de referencia no objeto do item para informação de cor
`colorTitleMember`	`string \| null`	`null`	Titulo para o campo de cor
`labelDescription`	`string`	`'description'`	Campo de referencia no objeto do item para descrição utilizada na dropdown
`phoneMember`	`string`	`'telefone'`	Campo de referencia no objeto do item para o telefone utilizada na dropdown
`emailMember`	`string`	`'email'`	Campo de referencia no objeto do item para o e-mail utilizado na dropdown
`imgMember`	`string \| null`	`'img'`	Campo de referencia no objeto do item para imagem de avatar
`iconMember`	`string \| null`	`'icon'`	Campo de referencia no objeto do item para icone do item
`iconAlias`	`boolean`	`true`	Por padrão renderiza o icone por alias, se false, usa o modelo [‘fal’, ‘icone’]
`addrMember`	`string \| null`	`null`	Campo de referencia no objeto do item para informação de endereço utilizada na dropdown
`driverMember`	`string`	`'motorista'`	Campo de referencia no objeto do item para nome do motorista utilizada na dropdown
`driverPhoneMember`	`string`	`'motoristaTelefone'`	Campo de referencia no objeto do item para telefone do motorista utilizada na dropdown
`templateType`	`'default' \| 'custom'`	`'default'`	Tipo de template utilizado para exibir as opções
`customOptionTemplate`	`TemplateRef<unknown \| null`	`null`	Template utilizado para exibir as opções, será exposto a propriedade ‘option’
`templateTagType`	`'default' \| 'custom'`	`'default'`	Tipo de template utilizado para exibir as tags
`customTagTemplate`	`TemplateRef<unknown \| null`	`null`	Template utilizado para exibir as tags, será exposto a propriedade ‘option’
`templateTag`	`'default' \| 'contact' \| 'vehicle' \| 'withIcon' \|…`	`'default'`	Template utilizado para exibir as tags de multipla seleção
`templateOption`	`'default' \| 'contact' \| 'description' \| 'vehicle' \|…`	`'default'`	Template utilizado para exibir os itens na lista do dropdown
`iconType`	`string`	`'alias'`	Tipo do icone
`addTagText`	`string`	`'Adicionar'`	Texto da tag de Adicionar
`loadingText`	`string`	`'Pesquisando...'`	Texto de carregando
`notFoundText`	`string`	`'Nenhum item encontrado'`	Texto de nenhum item encontrado
`clearAllText`	`string`	`'Limpar tudo'`	Texto de impar o campo
`typeToSearchText`	`string`	`'Digite para pesquisar'`	Texto de informação para digitar para pesquisar
`appendTo`	`string \| null`	`null`	Anexe o dropdown ao <body> ou a qualquer outro elemento usando o seletor css.
`dropdownPosition`	`'bottom' \| 'top' \| 'auto'`	`'auto'`	Define a podição do dropdown
`addTag`	`unknown`	`false`	Permite criar opções personalizadas.
`compareWith`	`CompareWithFn \| undefined`	`undefined`	Uma função para comparar os valores das opções com os valores selecionados.
`multiple`	`boolean`	`false`	Permite selecionar vários itens.
`closeOnSelect`	`boolean \| null`	`null`	Se deve fechar o menu quando um valor é selecionado
`clearable`	`boolean`	`true`	Permite limpar o valor selecionado. Padrão true
`clearOnBackspace`	`boolean`	`true`	Limpre os valores selecionados um a um ao clicar em backspace. Padrão true
`groupBy`	`unknown`	`null`	Permite agrupar itens por chave ou expressão de função
`groupValue`	`unknown`	`'-'`	Expressão de função para fornecer o valor do grupo
`selectableGroup`	`boolean`	`false`	Permite selecionar o grupo quando groupBy é usado
`selectableGroupAsModel`	`boolean`	`true`	Indica se deve selecionar todos os filhos ou o próprio grupo
`maxSelectedItems`	`number \| undefined`	`undefined`	Quando [multiple]=“true”, permite definir um número limite de seleção.
`searchFn`	`unknown`	`null`	Permitir filtrar por função de pesquisa personalizada
`trackByFn`	`unknown`	`null`	Fornece função trackBy personalizada
`clearSearchOnAdd`	`boolean`	`true`	Limpa a entrada de pesquisa quando o item é selecionado.
`selectOnTab`	`boolean`	`false`	Selecione o item do dropdown marcado usando tab.
`openOnEnter`	`boolean`	`true`	Abre o dropdown usando enter
`virtualScroll`	`boolean`	`false`	Habilite a rolagem virtual para melhor desempenho
`typeahead`	`unknown`	`null`	Preenchimento automático personalizado ou filtro avançado.
`removePaddingBottom`	`boolean`	`false`	Remove comportamento de campo com padding-bottom
`className`	`string`	`''`	Classe CSS customizada adicionada ao host
`badgeRounded`	`boolean`	`false`	Deixa o badge (caso tenha) arredondado
`required`	`boolean`	`false`	Campo requerido
`disabled`	`boolean`	`false`	Desabilita o campo
`hideSelected`	`boolean \| undefined`	`undefined`	Permite ocultar os itens selecionados do dropdown.

Outputs

Output	Payload	Descrição
`addOutput`	`unknown`	—
`blurOutput`	`unknown`	—
`changeOutput`	`unknown`	—
`closeOutput`	`unknown`	—
`clearOutput`	`unknown`	—
`focusOutput`	`unknown`	—
`searchOutput`	`unknown`	—
`openOutput`	`unknown`	—
`removeOutput`	`unknown`	—
`scrollOutput`	`unknown`	—
`scrollToEndOutput`	`unknown`	—

Visão ao vivo

Select / Autocomplete — Figma (Design System 2.0) ↗

Componentes relacionados

Dropdown / Menu flutuante