ChipsInput

Режим работы

Компонент поддерживает работу как в неконтролируемом режиме, так и контролируемом. Это стандартное поведение React-компонентов, прочитать про это можно в документации React ↗.

Для использования неконтролируемого режима достаточно просто не передавать value или передавать defaultValue, если требуется задать значение по умолчанию. Для контролируемого режима используйте связку свойств value/onChange для задания значения и его изменения.

// Неконтролируемое состояние
<ChipsInput
  defaultValue={[
    {
      value: 'red',
      label: 'Красный',
    },
  ]}
/>;
 
// Контролируемое состояние
const [colors, setColors] = React.useState([]);
 
<ChipsInput value={colors} onChange={setColors} />;

Управление вводом

Разделитель

Задаётся свойством delimiter. Позволяет добавлять несколько элементов за раз, разделяя их указанным символом.

Представляет собой символ, который будет использоваться как разделитель для автоматического создания опций из текста, введенного или вставленного в поле ввода. Например, при delimiter="," вставка текста “Красный,Синий” в поле ввода создаст два элемента - “Красный” и “Синий”.

Пока поддерживаются только строковые символы.

Потеря фокуса

По умолчанию при потере полем фокуса добавления в список опций не происходит. С помощью свойства addOnBlur можно включить поведение, при котором потеря фокуса будет приводить к добавлению нового элемента.

Состояния

disabled

Свойство disabled блокирует взаимодействие с компонентом и добавляет визуальную индикацию недоступности.

Валидация

Свойство status используется для визуализации валидации компонента - некорректности заполненного поля (значение "error") или успешной валидации (значение "valid").

Кастомизация

Визуальное оформление

С помощью свойства renderChip можно влиять на отображение конкретного значения. Вы можете изменить стандартный компонент Chip или использовать свой компонент:

Важно отметить, что первым параметром в обработчике renderChip идёт объект со свойствами, необходимыми для корректной работы a11y. Если для отображения опции вы используете свой компонент, убедитесь, что все эти свойства компонент получает и корректно обрабатывает. Вторым параметром идёт объект со значением конкретной опции (значение, переданное в value/defaultValue).

Доступность (a11y)

Компонент обеспечивает базовую доступность через стандартные HTML-атрибуты и ARIA-роли.

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

• обернуть в <label>;

  <label>
    Список исполнителей
    <ChipsInput placeholder="Введите название" />
  </label>

  Скопировать код

• указать id или aria-describedby и передать в <label> или FormItem через htmlFor;

  <label htmlFor="chips">Список исполнителей</label>
  <ChipsInput placeholder="Введите название" id="chips"/>

  Скопировать код

  <FormItem top="Список исполнителей" htmlFor="chips">
    <ChipsInput placeholder="Введите название" id="chips" />
  </FormItem>

  Скопировать код

• указать aria-label;

  <ChipsInput placeholder="Введите название" aria-label="Список исполнителей" />

  Скопировать код

При необходимости, через свойство chipsListLabel можете указать описания списка выбранных опций.

Свойства и методы