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.
O componente Select é pensado para ser intercambiável com um elemento nativo <select>.
Recursos avançados
O componente Select é pensado para ser intercambiável com um elemento nativo <select>.
Se você estiver procurando por recursos mais avançados, como combobox, seleção múltipla, autocompletar, uso assíncrono ou com suporte de adição, vá para o componente Autocomplete. A ideia dessa ferramenta é ser uma versão melhorada das bibliotecas "react-select" e "downshift".
Propriedades
O componente seleção é implementado como um elemento <input> personalizado do InputBase. It extends the text field components sub-components, either the OutlinedInput, Input, or FilledInput, depending on the variant selected. Ele compartilha os mesmos estilos e muitas das mesmas propriedades. Consulte a página da API do respectivo componente para obter detalhes.
Filled and standard variants
With label + helper text
Without label
Disabled
Error
Read only
Required
Campos de Texto
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.
🎨 Se você está procurando inspiração, você pode verificar os exemplos de customização de MUI Treasury.
TextField
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 customizadas
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 é estilizar 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. Notice that the "standard" variant is easier to customize, since it does not wrap the contents in a fieldset/legend markup.
🎨 Se você está procurando inspiração, você pode verificar os exemplos de customização de MUI Treasury.
Seleção Aberta Controlada
O componente Select pode lidar com múltiplas seleções. O componente Select pode lidar com múltiplas seleções.
Como na seleção única, você pode extrair o novo valor acessando event.target.value na chamada onChange. É sempre uma matriz.
Padrão
Com um diálogo
While it's discouraged by the Material Design guidelines, you can use a select inside a dialog.
Acessibilidade
Para rotular corretamente seu campo Select você precisa de um elemento extra com um id que contenha o rótulo desejado. Esse id precisa coincidir com o labelId do Select, por exemplo.
<InputLabel id="label">Age</InputLabel>
<Select labelId="label" id="select" value="20">
<MenuItem value="10">Ten</MenuItem>
<MenuItem value="20">Twenty</MenuItem>
</Select>
Alternativamente, um TextField com id e label cria a marcação adequada e ids para você:
<TextField id="select" label="Age" value="20" select>
<MenuItem value="10">Ten</MenuItem>
<MenuItem value="20">Twenty</MenuItem>
</TextField>
Para uma seleção nativa, você deve utilizar um rótulo fornecendo o atributo id do elemento de seleção para o atributo htmlFor do InputLabel:
<InputLabel htmlFor="select">Age</InputLabel>
<NativeSelect id="select">
<option value="10">Ten</option>
<option value="20">Twenty</option>
</NativeSelect>