Множественный выбор в Select

В библиотеке MUI (Material-UI) компонент Select позволяет реализовывать удобный и наглядный интерфейс для выбора одного или нескольких значений. Для поддержки множественного выбора используется свойство multiple, которое превращает обычный выпадающий список в контрол с возможностью выбора нескольких опций.

Подключение и базовая структура

Для начала необходимо импортировать ключевые компоненты из библиотеки MUI:

import * as React from 'react';
import { Select, MenuItem, InputLabel, FormControl, Checkbox, ListItemText } from '@mui/material';

Базовый пример множественного выбора выглядит следующим образом:

const [selectedValues, setSelectedValues] = React.useState([]);

const handleChange = (event) => {
  setSelectedValues(event.target.value);
};


  Выберите опции
   selected.join(', ')}
  >
    {['Option 1', 'Option 2', 'Option 3'].map((name) => (
      
         -1} />
        
      
    ))}

Основные свойства для множественного выбора

  • multiple — включает режим множественного выбора.
  • value — массив выбранных значений, обязательный для корректного функционирования множественного выбора.
  • onChange — обработчик события изменения выбранных значений. В режиме multiple передается массив.
  • renderValue — позволяет кастомизировать отображение выбранных значений. Для множественного выбора часто используется объединение элементов через запятую или отображение в виде чипов.

Использование Checkbox в MenuItem

Для более наглядного интерфейса применяют компонент Checkbox внутри MenuItem. Важно синхронизировать состояние checked с массивом выбранных значений:

 -1} />

С помощью ListItemText можно отображать текст опции рядом с чекбоксом, сохраняя стандартный вид Material Design.

Кастомизация отображения выбранных элементов

Функция renderValue отвечает за форматирование выбранных значений:

renderValue={(selected) => selected.join(', ')}

Можно использовать более сложные варианты, например отображение в виде чипов с возможностью удаления каждого элемента:

import { Chip, Box } fr om '@mui/material';

renderValue={(selected) => (
  
    {selected.map((value) => (
      
    ))}
  
)}

Такой подход делает интерфейс визуально аккуратным и информативным при множественном выборе.

Ограничение выбора и предустановленные значения

Можно задать максимальное количество выбранных элементов через дополнительную логику в обработчике onChange:

const handleChange = (event) => {
  const value = event.target.value;
  if (value.length <= 3) {
    setSelectedValues(value);
  }
};

Для предустановленных значений достаточно задать массив в useState:

const [selectedValues, setSelectedValues] = React.useState(['Option 1', 'Option 3']);

Поддержка клавиатуры и доступности

MUI автоматически обеспечивает поддержку навигации с клавиатуры в компоненте Select. Для множественного выбора важно, чтобы элементы MenuItem имели корректные свойства aria-checked и role="option". Библиотека уже интегрирует эти атрибуты при использовании multiple и Checkbox, что обеспечивает доступность для пользователей с особыми потребностями.

Обработка пустого выбора

Если необходимо разрешить состояние, когда ничего не выбрано, достаточно инициализировать value пустым массивом:

const [selectedValues, setSelectedValues] = React.useState([]);

При этом функция renderValue может отображать подсказку:

renderValue={(selected) =>
  selected.length === 0 ? 'Ничего не выбрано' : selected.join(', ')
}

Динамические опции

Список опций можно формировать динамически из массива объектов, что удобно при загрузке данных с сервера:

const options = [
  { id: 1, label: 'Option 1' },
  { id: 2, label: 'Option 2' },
  { id: 3, label: 'Option 3' }
];

{options.map((option) => (
  
     -1} />
    
  
))}

Такой подход позволяет легко интегрировать Select с множественным выбором в реальные проекты.

Итоговая структура компонента

Компонент множественного выбора в MUI можно объединить в функциональный компонент с полной кастомизацией:

function MultiSelectComponent({ options }) {
  const [selectedValues, setSelectedValues] = React.useState([]);

  const handleChange = (event) => {
    setSelectedValues(event.target.value);
  };

  return (
    
      Выберите элементы
      
    
  );
}

Такой компонент полностью готов к использованию и поддерживает динамические данные, кастомное отображение выбранных элементов, ограничения и предустановленные значения.

Оглавление