Select (Список)
Компонент Select используются для сбора информации, предоставленной пользователем, из списка параметров.
Простой список
Меню располагаются над вызвавшими их элементами таким образом, чтобы элемент меню, выбранный в данный момент, перекрывал вызывающий элемент.
<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
Filled and outlined variants
With label + helper text
Without label
Disabled
Error
Read only
Required
Текстовые поля
Мы допускаем этот подход, так как использование нативных списков на мобильных платформах улучшает опыт пользователя (User Experience).
<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.
🎨 If you are looking for inspiration, you can check MUI Treasury's customization examples.
Контроль открытия/закрытия
Компонент Select поддерживает множественный выбор. Компонент Select поддерживает множественный выбор.
Как и с одиночным списком, новое значение может быть получено из поля event.target.value, в коллбеке onChange. Это значение всегда является массивом.
По-умолчанию
Chip
В качестве альтернативы, компонент TextField со свойствами id и label создадут подходящую разметку:
Placeholder
Группировка
Хоть это и не приветствуется спецификацией 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>