Selección
Los componentes seleccionados se utilizan para recopilar información relegado por el usuario de una lista de opciones.
Selección simple
Los menús son colocados sobre sus emisores de elementos tales que el elemento de menú seleccionado actualmente aparece arriba de la emisión de elemento.
<FormControl fullWidth>
<InputLabel id="demo-simple-select-label">Age</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={age}
onChange={handleChange}
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>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. Esto pretende ser una versión mejorada de los paquetes "react-select" y "downshift".
Props
The Select component is implemented as a custom <input> element of the InputBase. It extends the text field components sub-components, either the Input, FilledInput, or OutlinedInput, depending on the variant selected. It shares the same styles and many of the same props. Refer to the respective component's API page for details.
Filled and outlined variants
With label + helper text
Without label
Disabled
Error
Read only
Required
Campos de texto
Dado que la experiencia del usuario puede mejorarse en móvil usando la selección nativa de la plataforma, permitimos ese patrón.
<FormControl fullWidth>
<InputLabel 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
El componente TextField es un control de formulario completo, incluyendo una etiqueta, el campo de texto y texto de ayuda. The first step is to style the InputBase component.
Selecciones personalizadas
Here are some examples of customizing the component. Puedes aprender más sobre esto en la sección Personalizando Componentes de la documentación.
The first step is to style the InputBase component. El componente TextField es un control de formulario completo, incluyendo una etiqueta, el campo de texto y texto de ayuda.
🎨 Si estás buscando inspiración, puedes mirar los ejemplos de MUI Treasury.
Controlled Open Select
The Select component can handle multiple selections. The Select component can handle multiple selections.
Like with the single selection, you can pull out the new value by accessing event.target.value in the onChange callback. It's always an array.
Por defecto
Chip
Alternatively a TextField with an id and label creates the proper markup and ids for you:
Placeholder
With a dialog
While it's discouraged by the Material Design specification, you can use a select inside a dialog.
Accesibilidad
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>For a native select, you should mention a label by giving the value of the id attribute of the select element to the InputLabel's htmlFor attribute:
<InputLabel htmlFor="select">Age</InputLabel>
<NativeSelect id="select">
<option value="10">Ten</option>
<option value="20">Twenty</option>
</NativeSelect>