Seleção

Os componentes de seleção são usados para coletar informações fornecidas pelo usuário em uma lista de opções.

Seleção Simples

Os menus são posicionados sobre seus elementos emissores, de modo que o item de menu atualmente selecionado apareça na parte superior do elemento emissor.

Advanced features

The Select component is meant to be interchangeable with a native <select> element.

If you are looking for more advanced features, like combobox, multiselect, autocomplete, async or creatable support, head to the Autocomplete component. A ideia dessa ferramenta era para ser uma versão melhorada das bibliotecas "react-select" e "downshift".

Seleção Nativa

Como a experiência do usuário pode ser melhorada em dispositivos móveis usando a seleção nativa da plataforma, permitimos esse padrão.

Campos de Texto

O componente wrapper TextField é um controle de formulário completo, incluindo um rótulo, entrada e texto de ajuda. Você pode encontrar um exemplo de seleção nesta seção.

Seleções Customizados

Aqui estão alguns exemplos de customização do componente. Você pode aprender mais sobre isso na página de documentação de sobrescritas.

O primeiro passo é modelar o componente InputBase. Uma vez estilizado, você pode usá-lo diretamente como um campo de texto ou fornecê-lo à propriedade input da seleção para ter um campo select.

Seleção Múltipla

O componente Select pode lidar com várias seleções. É ativado com a propriedade multiple.

Como na seleção única, você pode extrair o novo valor acessando event.target.value na chamada onChange. É sempre uma matriz.

Seleção Aberta Controlada

Com uma caixa de Diálogo

Embora não seja recomendado pela especificação do Material Design, você pode usar uma seleção dentro de uma caixa de diálogo.

Grouping

Display categories with the ListSubheader component or the native <optgroup> element.

Acessibilidade

To properly label your Select input you need an extra element with an id that contains a label. That id needs to match the labelId of the Select e.g.

<InputLabel id="label">Age</InputLabel>
<Select labelId="label" id="select" value="20">
  <MenuItem value="10">Ten</MenuItem>
  <MenuItem value="20">Twenty</MenuItem>
</Select>

Alternatively a TextField with an id and label creates the proper markup and ids for you:

<TextField id="select" label="Age" value="20" select>
  <MenuItem value="10">Ten</MenuItem>
  <MenuItem value="20">Twenty</MenuItem>
</TextField>

API

• <NativeSelect />
• <Select />