Switch

Переключатель on/off для бинарных настроек с моментальным применением. В отличие от Checkbox, Switch меняет состояние сразу — без кнопки «Сохранить».

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

• Для бинарных настроек пользователя, применяемых немедленно (уведомления, тёмная тема).
• В ситуациях, где не нужен пакетный apply/cancel.

Когда не нужен Switch: если изменение требует подтверждения — используйте Checkbox с кнопкой submit.

Анатомия

Size

xs — для плотных настроек и таблиц, s — дефолт в формах и карточках.

Icon (default false)

По умолчанию ползунок — пустой круг. showIcon добавляет галочку в состоянии «включено». Спиннер состояния loading показывается независимо от showIcon.

Установка

pnpm add @cloud-ru/ds-toggles

import { Switch } from '@cloud-ru/ds-toggles'

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

1. Базовый Switch

import { Switch } from '@cloud-ru/ds-toggles';

export function SwitchBasic() {
  return <Switch defaultChecked />;
}

2. Два размера

import { Switch } from '@cloud-ru/ds-toggles';

export function SwitchSizes() {
  return (
    <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
      <Switch size='xs' defaultChecked />
      <Switch size='s' defaultChecked />
    </div>
  );
}

3. Все состояния

import { Switch } from '@cloud-ru/ds-toggles';

export function SwitchStates() {
  return (
    <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
      <Switch />
      <Switch defaultChecked />
      <Switch disabled />
      <Switch disabled defaultChecked />
      <Switch loading />
    </div>
  );
}

Props

Types

SwitchProps

Unions

Size

Storybook

Figma