llms.txt

ChipToggle

Чип с состоянием выбора. Переключает бинарное значение — выбран или нет — и подходит для мультивыбора в строках фильтров. Компонент controlled: значение checked и обработчик onChange обязательны.

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

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

Когда не нужен ChipToggle:

  • Для одиночного действия без состояния — используйте ChipAssist.
  • Для выбора одного варианта из взаимоисключающего набора — используйте ChipChoice.Single.

Анатомия

Size (default s)

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

Icon

Опциональная иконка перед лейблом через проп icon. При loading иконка заменяется спиннером.

Состояния

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

Компонент controlled: текущее значение передаётся в checked, а изменение приходит в onChange(checked, event). Хранить состояние и обновлять его при onChange — обязанность потребителя.

Установка

pnpm add @cloud-ru/ds-chips
import { ChipToggle } from '@cloud-ru/ds-chips'

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

Базовый переключатель

Базовый переключательchecked в локальном useState, обновляется в onChange
tsx
import { ChipToggle } from '@cloud-ru/ds-chips';
import { useState } from 'react';

export function ToggleBasic() {
  const [checked, setChecked] = useState(false);

  return <ChipToggle label='React' size='m' checked={checked} onChange={setChecked} />;
}

Набор фильтров

Набор фильтровМультивыбор — каждый чип со своим состоянием
tsx
import { ChipToggle } from '@cloud-ru/ds-chips';
import { useState } from 'react';

const OPTIONS = ['React', 'Vue', 'Svelte'];

export function ToggleGroup() {
  const [selected, setSelected] = useState<Record<string, boolean>>({ React: true });

  return (
    <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
      {OPTIONS.map(option => (
        <ChipToggle
          key={option}
          label={option}
          size='m'
          checked={Boolean(selected[option])}
          onChange={checked => setSelected(prev => ({ ...prev, [option]: checked }))}
        />
      ))}
    </div>
  );
}

Состояния

Состоянияactive, disabled и loading
tsx
import { ChipToggle } from '@cloud-ru/ds-chips';
import { useState } from 'react';

export function ToggleStates() {
  const [state, setState] = useState<Record<string, boolean>>({
    interactive: true,
    disabled: true,
    loading: false,
  });

  const flip = (key: string) => (checked: boolean) => setState(prev => ({ ...prev, [key]: checked }));

  return (
    <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
      <ChipToggle label='Активный' size='m' checked={state.interactive} onChange={flip('interactive')} />
      <ChipToggle label='Отключён' size='m' disabled checked={state.disabled} onChange={flip('disabled')} />
      <ChipToggle label='Загрузка' size='m' loading checked={state.loading} onChange={flip('loading')} />
    </div>
  );
}

Props

Types

PropsChipToggleProps
PropTypeDefaultRequiredDescription
checkedboolean—yesОтмечен ли компонент
classNamestring—noCSS-класс
data-test-idstring—no
disabledboolean—noОтключён
iconReactNode—noИконка
labelstring—yesТекст чипа
loadingboolean—noСостояние загрузки
onChange(checked: boolean, e: ChangeEvent<HTMLInputElement>) => void—yesКолбек смены значения
size"l" | "m" | "s"mnoРазмер
tabIndexnumber0noИндекс в порядке фокусировки
truncateVariant"end" | "middle"middlenoВариант обрезания строки

Unions

Sizeunion

"l" | "m" | "s"

Related props

TruncateStringPropstype

({ variant?: typeof VARIANT.End; } & { 'data-test-id'?: string; } & AriaAttributes & { className?: string; tooltipClassName?: string; hideTooltip?: boolean; maxLines?: number; placement?: TooltipProps["placement"]; text: string; trigger?: TooltipProps["trigger"]; }) | ({ variant: typeof VARIANT.Middle; } & { 'data-test-id'?: string; } & AriaAttributes & { className?: string; tooltipClassName?: string; hideTooltip?: boolean; placement?: TooltipProps["placement"]; text: string; trigger?: TooltipProps["trigger"]; })

Types

ChipToggleProps

Unions

Storybook

Открыть в Storybook →

Figma

Открыть в Figma →

Смотри также

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