Перейти к контенту
Редактировать эту страницу

Select (Список)

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

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

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

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

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

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

Labels and helper text

With label + helper text

Without label

Auto width

Other props

Disabled

Error

Read only

Required

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

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

<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

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. Это значение всегда является массивом.

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

Checkmarks

Chip

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

Placeholder

Native

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

Группировка

Хоть это и не приветствуется спецификацией 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