Saltar al contenido

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}
    label="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

⚠️ Missing demo `pages/components/selects/NativeSelects.js` ⚠️

Labels and helper text

With label + helper text

Without label

Auto width

Other props

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

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

Checkmarks

Chip

Alternatively a TextField with an id and label creates the proper markup and ids for you:

Placeholder

Native

With a Dialog

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>