ChipChoice.Multiple

Чип с выпадающим списком опций и множественным выбором. Значение — массив выбранных опций; список открывается кликом и рендерится через портал.

Когда использовать

• Для фильтрации по нескольким значениям сразу: категории, теги, статусы.
• Когда выбор должен выглядеть как компактный чип в ряду фильтров.
• Когда списку нужен поиск по опциям — через проп searchable.

Когда не нужен ChipChoice.Multiple:

• Нужно выбрать ровно одно значение:
  • используйте ChipChoice.Single.
• Нужно inline-действие без выбора:
  • используйте ChipAssist.
• Нужна классическая кнопка действия:
  • используйте Button.

Анатомия

Value display

value и defaultValue — массивы значений (string | number)[]. В лейбле чипа отображается сводка по выбранным опциям; при множественном выборе показывается счётчик или перечисление через valueRender.

Size (default s)

• s — для плотных тулбаров и строк фильтров.
• m — стандартный размер.
• l — для крупных форм.

Apply mode

Режим применения выбора управляется пропом autoApply.

• autoApply (default true) — каждое изменение выбора применяется сразу.
• autoApply={false} — внизу списка появляется футер с кнопками Apply/Cancel; подтверждение — через onApprove, отмена — через onCancel.

Searchable

• searchable — добавляет поле поиска в выпадающий список, опции фильтруются по введённому тексту.

Уместно для списков от 6–7 опций, где скролл становится неудобным.

Состояния

• disabled — отключает взаимодействие.
• loading — показывает спиннер и блокирует открытие списка.

Установка

pnpm add @cloud-ru/ds-chips

import { ChipChoice } from '@cloud-ru/ds-chips'

Примеры использования

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

import { ChipChoice } from '@cloud-ru/ds-chips';
import { useState } from 'react';

const OPTIONS = [
  { value: 'news', label: 'Новости' },
  { value: 'guides', label: 'Гайды' },
  { value: 'releases', label: 'Релизы' },
  { value: 'events', label: 'События' },
];

export function ChoiceMultipleBasic() {
  const [value, setValue] = useState<(string | number)[]>(['news', 'releases']);

  return (
    <ChipChoice.Multiple label='Category' options={OPTIONS} value={value} onChange={next => setValue(next ?? [])} />
  );
}

С поиском

import { ChipChoice } from '@cloud-ru/ds-chips';
import { useState } from 'react';

const OPTIONS = [
  { value: 'react', label: 'React' },
  { value: 'vue', label: 'Vue' },
  { value: 'svelte', label: 'Svelte' },
  { value: 'angular', label: 'Angular' },
  { value: 'solid', label: 'Solid' },
  { value: 'qwik', label: 'Qwik' },
];

export function ChoiceMultipleSearchable() {
  const [value, setValue] = useState<(string | number)[]>(['react', 'svelte']);

  return (
    <ChipChoice.Multiple
      searchable
      label='Tags'
      options={OPTIONS}
      value={value}
      onChange={next => setValue(next ?? [])}
    />
  );
}

Props

Storybook

Figma

Смотри также

• ChipChoice.Single — чип-селектор с одиночным выбором.
• Chips — обзор семейства чипов.