SelectCampo de seleção

O campo de seleção suspensa fornece várias opções em um menu suspenso, facilitando a seleção rápida do conteúdo desejado pelo usuário.

Esta página descreve principalmente o uso do componente <mdui-select>. Para o uso dos itens do menu suspenso, consulte <mdui-menu-item>.

Como usar

Importe os componentes conforme necessário:

import 'mdui/components/select.js';
import 'mdui/components/menu-item.js';

Importe os tipos TypeScript dos componentes conforme necessário:

import type { Select } from 'mdui/components/select.js';
import type { MenuItem } from 'mdui/components/menu-item.js';

Exemplo de uso:

Item 1

Item 2

<mdui-select value="item-1">
  <mdui-menu-item value="item-1">Item 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Item 2</mdui-menu-item>
</mdui-select>

Defina os atributos prefix e suffix para adicionar texto à esquerda e à direita do campo de seleção. Esses textos só são exibidos quando o campo de seleção está em foco ou tem um valor. Você também pode usar os slots prefix e suffix para adicionar elementos de texto.

Item 1

Item 2

Item 1

Item 2

$ /100

<mdui-select value="item-1" prefix="$" suffix="/100">
  <mdui-menu-item value="item-1">Item 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Item 2</mdui-menu-item>
</mdui-select>

<br/><br/>

<mdui-select value="item-1">
  <mdui-menu-item value="item-1">Item 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Item 2</mdui-menu-item>
  <span slot="prefix" style="color: blue">$</span>
  <span slot="suffix" style="color: blue">/100</span>
</mdui-select>

Fonte

API

Propriedades

Atributo	Propriedade	Tipo	Padrão
`variant`	`variant`	`'filled' \| 'outlined'`	`'filled'`
Estilo do campo de seleção. Os valores possíveis são: `filled`: Campo de seleção com cor de fundo; efeito visual mais forte. `outlined`: Campo de seleção com borda; efeito visual mais suave.
`multiple`	`multiple`	`boolean`	`false`
Define se suporta seleção múltipla.
`name`	`name`	`string`	`''`
O nome do campo de seleção, que será enviado com os dados do formulário.
`value`	`value`	`string \| string[]`	`''`
O valor do campo de seleção, que será enviado com os dados do formulário. Se o atributo `multiple` não for especificado, este valor é uma string; se o atributo `multiple` for especificado, este valor é um array de strings. O atributo HTML só pode definir valores string; para definir um valor de array, defina via propriedade JavaScript.
	`defaultValue`	`string \| string[]`	`''`
O valor selecionado por padrão. Ao redefinir o formulário, será restaurado para este valor padrão. Esta propriedade só pode ser definida via propriedade JavaScript.
`label`	`label`	`string`	-
Texto do rótulo.
`placeholder`	`placeholder`	`string`	-
Texto de placeholder.
`helper`	`helper`	`string`	-
Texto de ajuda na parte inferior do campo de seleção. Também pode ser definido via `slot="helper"`.
`clearable`	`clearable`	`boolean`	`false`
Define se o campo de seleção pode ser limpo.
`clear-icon`	`clearIcon`	`string`	-
Nome do ícone Material Icons para o botão de limpar, exibido à direita do campo de seleção quando ele é limpável. Também pode ser definido via `slot="clear-icon"`.
`placement`	`placement`	`'auto' \| 'bottom' \| 'top'`	`'auto'`
Posição do campo de seleção. Os valores possíveis são: `auto`: Posição automática. `bottom`: Localizada abaixo. `top`: Localizada acima.
`end-aligned`	`endAligned`	`boolean`	`false`
Define se o texto deve ser alinhado à direita.
`prefix`	`prefix`	`string`	-
Texto de prefixo do campo de seleção. Exibido apenas no estado de foco ou quando o campo de seleção tem valor. Também pode ser definido via `slot="prefix"`.
`suffix`	`suffix`	`string`	-
Texto de sufixo do campo de seleção. Exibido apenas no estado de foco ou quando o campo de seleção tem valor. Também pode ser definido via `slot="suffix"`.
`icon`	`icon`	`string`	-
Nome do ícone Material Icons para o ícone de prefixo do campo de seleção. Também pode ser definido via `slot="icon"`.
`end-icon`	`endIcon`	`string`	-
Nome do ícone Material Icons para o ícone de sufixo do campo de seleção. Também pode ser definido via `slot="end-icon"`.
`error-icon`	`errorIcon`	`string`	-
Nome do ícone Material Icons exibido à direita do campo de seleção quando a validação do campo do formulário falha. Também pode ser definido via `slot="error-icon"`.
`form`	`form`	`string`	-
O elemento `<form>` associado. O valor deste atributo deve ser o `id` de um elemento `<form>` na mesma página. Se este atributo não for especificado, o elemento precisa ser um elemento filho de um `<form>`. Com este atributo, você pode colocar o elemento em qualquer lugar da página, não apenas como filho do elemento `<form>`.
`readonly`	`readonly`	`boolean`	`false`
Define se o componente está no estado somente leitura.
`disabled`	`disabled`	`boolean`	`false`
Define se o componente está desabilitado.
`required`	`required`	`boolean`	`false`
Define se, ao enviar o formulário, é obrigatório que este campo seja preenchido.
	`validity`	`ValidityState`	-
Objeto que representa o estado de validação do formulário. Consulte `ValidityState` para mais detalhes.
	`validationMessage`	`string`	-
Se a validação do formulário falhar, esta propriedade conterá uma mensagem de erro. Se a validação for bem-sucedida, esta propriedade será uma string vazia.
`autofocus`	`autofocus`	`boolean`	`false`
Define se o elemento deve receber foco automaticamente após o carregamento da página.
`tabindex`	`tabIndex`	`number`	-
A ordem do elemento ao navegar com a tecla Tab.

Métodos

Nome	Parâmetros	Retorno
`checkValidity`		`boolean`
Verifica se o campo do formulário passou na validação. Se não passou, retorna `false` e dispara o evento `invalid`; se passou, retorna `true`.
`reportValidity`		`boolean`
Verifica se o campo do formulário passou na validação. Se não passou, retorna `false` e dispara o evento `invalid`; se passou, retorna `true`. Se a validação falhar, também exibe uma mensagem de erro no componente.
`setCustomValidity`	`message: string`	`void`
Define um texto de erro personalizado. Enquanto este texto não estiver vazio, indica que o campo não passou na validação.
`click`		`void`
Simula um clique do mouse no elemento.
`focus`	`options: FocusOptions` (Opcional)	`void`
Define o foco no elemento atual. Você pode passar um objeto como argumento, com as seguintes propriedades: `preventScroll`: Por padrão, após o elemento receber o foco, a página é rolada para que ele fique visível. Se você não quiser que a página role, defina esta propriedade como `true`.
`blur`		`void`
Remove o foco do elemento atual.

Eventos

Nome
`focus`
Disparado ao receber foco.
`blur`
Disparado ao perder o foco.
`change`
Disparado quando o valor selecionado muda.
`invalid`
Disparado quando a validação do campo do formulário falha.
`clear`
Disparado ao clicar no botão de limpar gerado pelo atributo `clearable`. Pode impedir a limpeza do campo de seleção chamando `event.preventDefault()`.

Slots

Nome
(padrão)
Elementos `<mdui-menu-item>`.
`icon`
Ícone à esquerda.
`end-icon`
Ícone à direita.
`error-icon`
Ícone à direita no estado de falha de validação.
`prefix`
Texto à esquerda.
`suffix`
Texto à direita.
`clear-button`
Botão de limpar.
`clear-icon`
Ícone dentro do botão de limpar.
`helper`
Texto de ajuda na parte inferior.

CSS Parts

Nome
`chips`
Contêiner para os chips dos valores selecionados no modo múltiplo.
`chip`
Chip para cada valor selecionado no modo múltiplo.
`chip__button`
Elemento `<button>` dentro do chip.
`chip__label`
Texto dentro do chip.
`chip__delete-icon`
Ícone de exclusão dentro do chip.
`text-field`
Campo de texto, ou seja, o elemento `<mdui-text-field>`.
`text-field__container`
Contêiner do campo de texto dentro do text-field.
`text-field__icon`
Ícone à esquerda dentro do text-field.
`text-field__end-icon`
Ícone à direita dentro do text-field.
`text-field__error-icon`
Ícone à direita no estado de falha de validação dentro do text-field.
`text-field__prefix`
Texto à esquerda dentro do text-field.
`text-field__suffix`
Texto à direita dentro do text-field.
`text-field__label`
Texto do rótulo dentro do text-field.
`text-field__input`
Elemento `<input>` dentro do text-field.
`text-field__clear-button`
Botão de limpar dentro do text-field.
`text-field__clear-icon`
Ícone dentro do botão de limpar do text-field.
`text-field__supporting`
Contêiner de informações auxiliares na parte inferior do text-field, incluindo helper e error.
`text-field__helper`
Texto de ajuda na parte inferior dentro do text-field.
`text-field__error`
Texto de descrição de erro na parte inferior dentro do text-field.
`menu`
Menu suspenso, ou seja, o elemento `<mdui-menu>`.

Capítulo anterior

RangeSlider Slider de intervalo

Próximo capítulo

SegmentedButton Botão segmentado

SelectCampo de seleção

Como usar

Exemplos

Forma

Suporte a seleção múltipla

Texto auxiliar

Modo somente leitura

Modo desabilitado

Com limpeza

Posição do menu suspenso

Texto alinhado à direita

Texto e ícones antes/depois

API

Propriedades

Métodos

Eventos

Slots

CSS Parts