---
description: Компонент для выбора множества значений из выпадающего списка.
tags: selection, search
---
# ChipsSelect [tag:component]
Компонент для выбора множества значений из выпадающего списка.
Позволяет пользователю выбирать опции из предустановленного списка или создавать новые значения. Каждый выбранный элемент
представлен в виде отдельного компонента `Chip`.
Связанные компоненты:
- [`Chip`](/components/chip)
{/* @example-description: Базовый `ChipsSelect` с предустановленным списком опций. */}
```jsx
```
## Режим работы
Компонент поддерживает работу как в неконтролируемом режиме, так и контролируемом. Это стандартное поведение
React-компонентов, прочитать про это можно в [документации React](https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable).
Для использования неконтролируемого режима достаточно просто _не_ передавать `value` или передавать `defaultValue`, если
требуется задать значение по умолчанию.
Для контролируемого режима используйте связку свойств `value`/`onChange` для задания значения и его изменения.
```jsx
// Неконтролируемое состояние
;
// Контролируемое состояние
const [colors, setColors] = React.useState([]);
;
```
## Управление вводом
### Добавление нового значения
Свойство `creatable` позволяет добавлять значения, которых нет в списке.
- `true` - значение добавляется по нажатию клавиши `Enter`;
- строковое значение - помимо клавиши `Enter`, в списке появляется кнопка, нажатие на которую приводит к добавлению значения.
{/* @example-description: Добавление новых значений в `ChipsSelect` через режим `creatable`. */}
```jsx
```
### Разделитель
> Работает только при заданном свойстве `creatable`
Задаётся свойством `delimiter`. Позволяет добавлять несколько элементов за раз, разделяя их указанным символом.
Представляет собой символ, который будет использоваться как разделитель для автоматического создания опций из текста,
введенного или вставленного в поле ввода. Например, при `delimiter=","` вставка текста "Красный,Синий" в поле ввода
создаст два элемента - "Красный" и "Синий".
Пока поддерживаются только строковые символы.
{/* @example-description: Добавление нескольких значений по разделителю `delimiter` в `creatable` режиме. */}
```jsx
```
### Потеря фокуса
По умолчанию при потере полем фокуса добавления в список опций не происходит.
С помощью свойства `addOnBlur` можно включить поведение, при котором потеря фокуса будет приводить к добавлению нового элемента.
{/* @example-description: Автосоздание новой опции при потере фокуса через `addOnBlur`. */}
```jsx
```
## Состояния
### `disabled`
Свойство `disabled` блокирует взаимодействие с компонентом и добавляет визуальную индикацию недоступности.
{/* @example-description: `ChipsSelect` в неактивном состоянии с выбранным значением. */}
```jsx
```
## Валидация
Свойство `status` используется для визуализации валидации компонента - некорректности заполненного поля (значение `"error"`)
или успешной валидации (значение `"valid"`).
> Если вы используете `ChipsSelect` вместе с [`FormItem`](/components/form-item), вам достаточно указать свойство `status` только у
> [`FormItem`](/components/form-item).
{/* @example-description: Валидационные состояния `ChipsSelect`: ошибка и успешное заполнение. */}
```jsx
```
## Кастомизация
### Визуальное оформление
С помощью свойства `renderChip` можно влиять на отображение конкретного значения. Вы можете изменить
стандартный компонент `Chip` или использовать свой компонент.
С помощью свойства `renderOption` можно влиять на отображение конкретного элемента выпадающего списка.
Вы можете изменить стандартный компонент [`CustomSelectOption`](/components/custom-select#customselectoption)
или использовать свой компонент.
{/* @example-description: Кастомизация выбранных чипов и пунктов списка через `renderChip` и `renderOption`. */}
```jsx
(
} {...rest}>
{label}
)}
renderOption={(props, { src }) => {
return } {...props} />;
}}
placeholder="Выберите пользователя"
/>
```
Важно отметить, что первым параметром в обработчика `renderChip`/`renderOption` идёт объект со свойствами, необходимыми для
корректной работы `a11y`. Если для отображения элемента вы используете свой компонент, убедитесь, что все эти свойства
компонент получает и корректно обрабатывает. Вторым параметром идёт объект со значением конкретной опции
(значение, переданное в `value`/`defaultValue`).
## slotProps
Компонент поддерживает свойство `slotProps`, позволяющее переопределять свойства внутренних элементов, таких как корневой контейнер и `input`.
Это удобно для добавления кастомных классов, data-атрибутов, aria-атрибутов, обработчиков событий, доступов к элементам через `getRootRef` и других расширений, не влияя на внешний API компонента.
{/* @example-description: Пример `slotProps` для настройки корневого элемента и поля ввода `ChipsSelect`. */}
```jsx
const inputRef = React.useRef();
return (
)
```
## Доступность (a11y) [#a11y]
Компонент обеспечивает базовую доступность через стандартные `HTML`-атрибуты и `ARIA`-роли.
Для улучшения доступности рекомендуется связывать компонент с текстовым описанием одним из следующих способов:
- обернуть в `