Switch

Switch is a compound component for immediate binary settings, with a native input for semantics and state and an indicator for the visible track and thumb.

Storybook Source Figma

Overview

Switch styling is split across the root label-like track and the visible indicator thumb. State changes are coordinated through root-level CSS variables and hidden-input state selectors.

Public CSS Variables

Notifications

Variable	Value	Affects
Overall control size.`Switch`, `SwitchIndicator`		No visible change in this state
Current track color.`Switch`		No visible change in this state
Thumb size.`SwitchIndicator`		No visible change in this state
Thumb position.`SwitchIndicator`		No visible change in this state
Gap between the track and the thumb.`Switch`		No visible change in this state
Track color on hover.`Switch`		No visible change in this state
Track color while pressed.`Switch`		No visible change in this state
Thumb color.`SwitchIndicator`		No visible change in this state

Edit a value to try it in the demo. Hover a variable to outline what it changes; switch the preview state to see hover, pressed, focus, disabled and invalid variables. Click a name to copy it.

Part-Level Variables

Switch: root track, spacing, size, and checked-state color model.
SwitchIndicator: thumb surface and animated position.
SwitchInput: semantic state carrier for checked, disabled, and focus behavior.

State And Variant Interaction

variant changes the checked-state color family.
Active state slightly stretches and shifts the indicator.
Disabled state overrides track and thumb styling together.

Examples

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

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

Custom indicator

SwitchIndicator takes your own style and children, so the thumb can have its own color or hold an icon.

LTRRTL

custom-indicator.tsx · 25 lines

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>

Do Not Override

Do not hide focus visibility on the track.
Do not weaken the checked versus unchecked contrast until state becomes ambiguous.
Do not override the indicator transform logic without retesting interaction states.