Switch
Переключатель on/off для бинарных настроек с моментальным применением. В отличие от Checkbox, Switch меняет состояние сразу — без кнопки «Сохранить».
Когда использовать
- Для бинарных настроек пользователя, применяемых немедленно (уведомления, тёмная тема).
- В ситуациях, где не нужен пакетный apply/cancel.
Когда не нужен Switch: если изменение требует подтверждения — используйте Checkbox с кнопкой submit.
Анатомия
Size
xs — для плотных настроек и таблиц, s — дефолт в формах и карточках.
Установка
pnpm add @cloud-ru/ds-togglesimport { Switch } from '@cloud-ru/ds-toggles'Примеры использования
1. Базовый Switch
tsx
import { Switch } from '@cloud-ru/ds-toggles';
export function SwitchBasic() {
return <Switch defaultChecked />;
}2. Два размера
tsx
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. Все состояния
tsx
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
Props
SwitchProps| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
autofocus | boolean | — | no | HTML-аттрибут autofocus |
checked | boolean | — | no | HTML-аттрибут checked |
className | string | — | no | CSS-класс |
data-test-id | string | — | no | |
defaultChecked | boolean | — | no | HTML-аттрибут checked по-умолчанию |
disabled | boolean | false | no | HTML-аттрибут disabled |
id | string | — | no | HTML-аттрибут id |
inputRef | RefObject<HTMLInputElement> | — | no | |
loading | boolean | false | no | Состояние загрузки |
name | string | — | no | HTML-аттрибут name |
onBlur | FocusEventHandler<HTMLInputElement> | — | no | Колбек потери фокуса |
onChange | ((checked: boolean) => void) | — | no | Колбек смены значения |
onClick | MouseEventHandler<HTMLInputElement> | — | no | Колбек клика |
onFocus | FocusEventHandler<HTMLInputElement> | — | no | Колбек приобретения фокуса |
size | "s" | "xs" | s | no | Размер |
tabIndex | number | — | no | HTML-аттрибут tab-index |
value | string | — | no | HTML-аттрибут value |