ChipsSelect

Режим работы

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

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

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

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

Добавление нового значения

Свойство creatable позволяет добавлять значения, которых нет в списке.

• true - значение добавляется по нажатию клавиши Enter;
• строковое значение - помимо клавиши Enter, в списке появляется кнопка, нажатие на которую приводит к добавлению значения.

Разделитель

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

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

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

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

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

Состояния

disabled

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

Валидация

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

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

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

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

С помощью свойства renderOption можно влиять на отображение конкретного элемента выпадающего списка. Вы можете изменить стандартный компонент CustomSelectOption или использовать свой компонент.

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

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

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

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

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

  <label>
    Список исполнителей
    <ChipsSelect options={colors} placeholder="Введите название" />
  </label>

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

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

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

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

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

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

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

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

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

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

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