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.
<FormControl fullWidth>
<InputLabel id="demo-simple-select-label">Age</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={age}
label="Age"
onChange={handleChange}
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>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
⚠ Note that when using FormControl with the outlined variant of the Select, you need to provide a label in two places: in the InputLabel component and in the
labelprop of the Select component (see the above demo).
Largura automática
Padrão
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
As the user experience can be improved on mobile using the native select of the platform, we allow such pattern.
<FormControl fullWidth>
<InputLabel variant="standard" htmlFor="uncontrolled-native">
Age
</InputLabel>
<NativeSelect
defaultValue={30}
inputProps={{
name: 'age',
id: 'uncontrolled-native',
}}
>
<option value={10}>Ten</option>
<option value={20}>Twenty</option>
<option value={30}>Thirty</option>
</NativeSelect>
</FormControl>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.
🎨 If you are looking for inspiration, you can check MUI Treasury's customization examples.
Seleção Aberta Controlada
The Select component can handle multiple selections. It's enabled with the multiple prop.
Como na seleção única, você pode extrair o novo valor acessando event.target.value na chamada onChange. É sempre uma matriz.
Marcações
import { MultiSelectUnstyled } from '@mui/base/SelectUnstyled';
Controlled select
Seleção aberta controlada
You can control the open state of the select with the open prop. Alternatively, it is also possible to set the initial (uncontrolled) open state of the component with the defaultOpen prop.
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>