---
description: Компонент для ввода и отображения множества значений.
tags: selection, search
---
# ChipsInput [tag:component]
Компонент для ввода и отображения множества значений.
Позволяет пользователю добавлять, удалять и редактировать элементы списка.
Каждый элемент представлен в виде отдельного компонента `Chip`.
Связанные компоненты:
- [`Chip`](/components/chip)
{/* @example-description: Базовый `ChipsInput` с начальными значениями и плейсхолдером. */}
```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([]);
;
```
## Управление вводом
### Разделитель
Задаётся свойством `delimiter`. Позволяет добавлять несколько элементов за раз, разделяя их указанным символом.
Представляет собой символ, который будет использоваться как разделитель для автоматического создания опций из текста,
введенного или вставленного в поле ввода. Например, при `delimiter=","` вставка текста "Красный,Синий" в поле ввода
создаст два элемента - "Красный" и "Синий".
Пока поддерживаются только строковые символы.
{/* @example-description: Добавление нескольких элементов за один ввод через разделитель `delimiter`. */}
```jsx
```
### Потеря фокуса
По умолчанию при потере полем фокуса добавления в список опций не происходит.
С помощью свойства `addOnBlur` можно включить поведение, при котором потеря фокуса будет приводить к добавлению нового элемента.
{/* @example-description: Автодобавление значения при потере фокуса с включенным `addOnBlur`. */}
```jsx
```
## Состояния
### `disabled`
Свойство `disabled` блокирует взаимодействие с компонентом и добавляет визуальную индикацию недоступности.
{/* @example-description: `ChipsInput` в состоянии `disabled` без возможности редактирования. */}
```jsx
```
## Валидация
Свойство `status` используется для визуализации валидации компонента - некорректности заполненного поля (значение `"error"`)
или успешной валидации (значение `"valid"`).
> Если вы используете `ChipsInput` вместе с [`FormItem`](/components/form-item), вам достаточно указать свойство `status` только у
> [`FormItem`](/components/form-item).
{/* @example-description: Варианты валидации `ChipsInput` со статусами `error` и `valid`. */}
```jsx
```
## Кастомизация
### Визуальное оформление
С помощью свойства `renderChip` можно влиять на отображение конкретного значения. Вы можете изменить
стандартный компонент `Chip` или использовать свой компонент:
{/* @example-description: Кастомный рендер `Chip` с аватаром пользователя через `renderChip`. */}
```jsx
(
} {...rest}>
{label}
)}
/>
```
Важно отметить, что первым параметром в обработчике `renderChip` идёт объект со свойствами, необходимыми для
корректной работы `a11y`. Если для отображения опции вы используете свой компонент, убедитесь, что все эти свойства
компонент получает и корректно обрабатывает. Вторым параметром идёт объект со значением конкретной опции
(значение, переданное в `value`/`defaultValue`).
## slotProps
Компонент поддерживает свойство `slotProps`, которое даёт возможность прокинуть свойство в некоторые внутренние элементы.
Это удобно для добавления кастомных классов, data-атрибутов, aria-атрибутов, обработчиков событий, доступов к элементам через `getRootRef` и других расширений, не влияя на внешний API компонента.
{/* @example-description: Настройка внутренних слотов `ChipsInput` через `slotProps` и `getRootRef`. */}
```jsx
const inputRef = React.useRef();
return (
)
```
## Доступность (a11y) [#a11y]
Компонент обеспечивает базовую доступность через стандартные `HTML`-атрибуты и `ARIA`-роли.
Для улучшения доступности рекомендуется связывать компонент с текстовым описанием одним из следующих способов:
- обернуть в `