Components · Form

Switch

A checkbox rendered with role switch, a sliding knob whose transform pauses under prefers-reduced-motion, and a dedicated disabled-state colour token instead of a flat opacity cut.

Live in all three modes

Day · Night-NVG · Mono: one component, re-themed through the token layer.

Day
Night-NVG
Mono

Variants & states

  • checked / unchecked
  • disabled

Tokens used

  • --semantic-color-surface-input
  • --semantic-color-border-default
  • --semantic-color-action-primary
  • --semantic-color-action-primary-disabled

Copy-paste

import { Switch } from 'operator-components';

<Switch label="Auto-lock on link loss" defaultChecked />

Figma: library link coming soon. Gated until it's on sole-owned footing. (TODO: replace with the Community/library URL once published.)