Select (Список)

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

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

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

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

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

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

Нативный список

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

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

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

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

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

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

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

Список с множественным выбором

Компонент Select поддерживает множественный выбор. Он управляется свойством multiple.

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

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

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

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

Группировка

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

Доступность

Чтобы правильно подписать ваш элемент 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>

API

• <NativeSelect />
• <Select />