ChipChoice.Single

Чип с выпадающим списком опций и одиночным выбором. Текущее значение отображается в лейбле чипа, список открывается кликом и рендерится через портал.

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

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

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

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

Анатомия

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: 'active', label: 'Активный' },
  { value: 'inactive', label: 'Неактивный' },
  { value: 'archived', label: 'В архиве' },
];

export function ChoiceSingleBasic() {
  const [value, setValue] = useState<string | number | undefined>('active');

  return <ChipChoice.Single label='Status' options={OPTIONS} value={value} onChange={setValue} />;
}

С поиском

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

const OPTIONS = [
  { value: 'design', label: 'Дизайн' },
  { value: 'frontend', label: 'Фронтенд' },
  { value: 'backend', label: 'Бэкенд' },
  { value: 'analytics', label: 'Аналитика' },
  { value: 'qa', label: 'Тестирование' },
  { value: 'devops', label: 'DevOps' },
];

export function ChoiceSingleSearchable() {
  const [value, setValue] = useState<string | number | undefined>('frontend');

  return <ChipChoice.Single searchable label='Team' options={OPTIONS} value={value} onChange={setValue} />;
}

Ручное применение

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

const OPTIONS = [
  { value: 'anna', label: 'Анна' },
  { value: 'boris', label: 'Борис' },
  { value: 'vera', label: 'Вера' },
];

export function ChoiceSingleManualApply() {
  const [value, setValue] = useState<string | number | undefined>('anna');

  return <ChipChoice.Single autoApply={false} label='Owner' options={OPTIONS} value={value} onChange={setValue} />;
}

Props

Storybook

Figma

Смотри также

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