Select (Список)

Компонент Select используются для сбора информации, предоставленной пользователем, из списка параметров.

Простой список

Меню располагаются над вызвавшими их элементами таким образом, чтобы элемент меню, выбранный в данный момент, перекрывал вызывающий элемент.

Age

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

Расширенные возможности

Компонент Select взаимозаменяем с нативным элементом <select>.

Для более продвинутых опций, таких как Комбинированные Списки, Множественный Выбор, Автодополнения, а также поддержки async или Creatable, воспользуйтесь компонентом Autocomplete. It's meant to be an improved version of the "react-select" and "downshift" packages.

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

Age

Labels and helper text

Age

With label + helper text

Without label

Auto width

Age

Other props

Name

Disabled

Name

Error

Name

Read only

Age

Required

Текстовые поля

Мы допускаем этот подход, так как использование нативных списков на мобильных платформах улучшает опыт пользователя (User Experience).

Age

<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

TextField представляет собой полноценный элемент управления формы, включая метку (label), само поле ввода и вспомогательный текст. Чтобы правильно подписать ваш элемент Select, вам потребуется дополнительный элемент со свойством id.

Кастомизированные списки

Ниже находятся примеры кастомизации компонента. You can learn more about this in the overrides documentation page.

Чтобы правильно подписать ваш элемент Select, вам потребуется дополнительный элемент со свойством id. После стилизации, вы можете использовать компонент напрямую как текстовое поле, либо передать его в компонент Select, свойством input.

Age

🎨 If you are looking for inspiration, you can check MUI Treasury's customization examples.

Контроль открытия/закрытия

Компонент Select поддерживает множественный выбор. Компонент Select поддерживает множественный выбор.

Как и с одиночным списком, новое значение может быть получено из поля event.target.value, в коллбеке onChange. Это значение всегда является массивом.

По-умолчанию

Name

Checkmarks

Tag

Chip

В качестве альтернативы, компонент TextField со свойствами id и label создадут подходящую разметку:

Placeholder

Native

Внутри диалогового окна

Age

Группировка

Хоть это и не приветствуется спецификацией Material Design, вы можете использовать список внутри диалогового окна.

Группировка

Используйте компонент ListSubheader или нативный элемент <optgroup> для отображения категорий.

Grouping

Доступность

Чтобы правильно подписать ваш элемент Select, вам потребуется дополнительный элемент со свойством id. Значение id должно совпадать со значением свойства labelId компонента Select, например

<InputLabel id="label">Age</InputLabel>
<Select labelId="label" id="select" value="20">
  <MenuItem value="10">Ten</MenuItem>
  <MenuItem value="20">Twenty</MenuItem>
</Select>

В качестве альтернативы, компонент TextField со свойствами id и label создадут подходящую разметку:

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