Switch

Toggle switch based on Radix UI. Supports variants, sizes, controlled and disabled states.

Variants

default · primary · success · warning · danger

default
primary
success
warning
danger

Sizes

xs · sm · md · lg · xl

xs
sm
md
lg
xl

States

off · on · disabled-off · disabled-on

off
on
disabled-off
disabled-on

С лейблами

Switch + Label: подпись слева, справа, с курсором, обязательный

trailing
leading
with Label
required
disabled

С иконками

Switch + Icon рядом — индикация смысла переключателя

theme
Светлая тема
sound
Звук включён
wifi
Подключено

Управляемые состояния

checked + onCheckedChange — состояние снаружи компонента, Badge показывает значение

onCheckedChange
Выключено
counter
Включали: 0 раз
exclusive
Не беспокоить (выключает уведомления выше)

Внутри Field

Field оборачивает Switch — даёт label + helperText / error

helperText

Сохраняем каждые 30 секунд, пока вы редактируете

required + error

Контент станет виден всем пользователям

disabled

Доступно только в plan Enterprise

Список настроек

title + description + Switch в правом краю — классический паттерн

Внутри Popover

Быстрые переключатели в выпадайке — как Control Center

quick toggles

Внутри Accordion

Группировка настроек по разделам — раскрывающиеся секции

Связанные контролы

Switch включает / выключает зависимые поля Select, Input

Матрица уведомлений

Категории × каналы — таблица переключателей с подсчётом активных

Всего активных каналов5 из 12
Email
Push
SMS
БезопасностьВход с нового устройства, смена пароля, 2FA
БиллингСписания, неудачные платежи, окончание подписки
Продуктовые новостиРелизы, фичи, blog-посты
МаркетингСпецпредложения, рассылки от партнёров