Switch

Switch — составной компонент для бинарных настроек, применяемых сразу: нативный input отвечает за семантику и состояние, а индикатор — за видимую дорожку и бегунок.

Storybook Исходники Figma

Обзор

Стили Switch разделены между корневой дорожкой в роли label и видимым бегунком-индикатором. Изменения состояния согласуются через CSS-переменные корня и селекторы состояния скрытого input.

Публичные CSS-переменные

Notifications

Переменная	Значение	Влияет на
Общий размер контрола.`Switch`, `SwitchIndicator`		В этом состоянии изменений не видно
Текущий цвет дорожки.`Switch`		В этом состоянии изменений не видно
Размер бегунка.`SwitchIndicator`		В этом состоянии изменений не видно
Положение бегунка.`SwitchIndicator`		В этом состоянии изменений не видно
Отступ между дорожкой и бегунком.`Switch`		В этом состоянии изменений не видно
Цвет дорожки при наведении.`Switch`		В этом состоянии изменений не видно
Цвет дорожки при нажатии.`Switch`		В этом состоянии изменений не видно
Цвет бегунка.`SwitchIndicator`		В этом состоянии изменений не видно

Измените значение, чтобы примерить его в демо. Наведите на переменную, чтобы обвести то, что она меняет; переключите состояние превью, чтобы увидеть переменные наведения, нажатия, фокуса, отключённого состояния и ошибки. Клик по имени копирует его.

Переменные частей

Switch: корневая дорожка, отступы, размер и цветовая модель включённого состояния.
SwitchIndicator: поверхность бегунка и его анимированное положение.
SwitchInput: семантический носитель состояний checked, disabled и фокуса.

Взаимодействие состояний и вариантов

variant меняет семейство цветов включённого состояния.
В активном состоянии индикатор слегка растягивается и сдвигается.
Отключённое состояние переопределяет стили дорожки и бегунка вместе.

Примеры

.brandSwitch {
  --switch-size: 28px;
}

.softSwitch {
  --switch-background-color: var(--fills-secondary);
}

Свой индикатор

SwitchIndicator принимает ваш style и дочерние элементы, поэтому у бегунка может быть свой цвет или иконка внутри.

LTRRTL

custom-indicator.tsx · 25 строк

import { Icon, Label, Switch, SwitchIndicator, SwitchInput } from '@vega-ui/react';
import { Moon } from '@vega-ui/icons';

export default function CustomIndicator() {
  return (
    <div style={{ display: 'grid', gap: 'var(--spacing-8)' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-6)' }}>
        <Switch>
          <SwitchInput id='custom-focus-mode' />
          <SwitchIndicator style={{ background: 'var(--color-primary-700)' }} />
        </Switch>
        <Label htmlFor='custom-focus-mode'>Focus mode</Label>

Не переопределяйте

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