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) в этой секции.

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

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

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

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

Компонент 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>

API

• <NativeSelect />
• <Select />