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.

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".

Selección nativa

Dado que la experiencia del usuario puede mejorarse en móvil usando la selección nativa de la plataforma, permitimos ese patrón.

Campos de texto

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. Here are some examples of customizing the component.

The first step is to style the InputBase component. Once it's styled, you can either use it directly as a text field or provide it to the select input property to have a select field.

🎨 Si estás buscando inspiración, puedes mirar los ejemplos de MUI Treasury.

Multiple Select

The Select component can handle multiple selections. It's enabled with the multiple property.

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.

Controlled Open Select

With a Dialog

While it's discouraged by the Material Design specification, you can use a select inside a dialog.

Grouping

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

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>

API

• <NativeSelect />
• <Select />