Saltar al contenido

馃帀 Material UI v5 is out! Head to the migration guide to get started.

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.

Some important helper text

None

Without label

None

Label + placeholder

Disabled

Error

Read only

Auto width

Placeholder

Placeholder

Required

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.

Some important helper text

With visually hidden label

Label + placeholder

Disabled

Error

Uncontrolled

Placeholder

Required

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.

Placeholder

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>