Skip to Content
ComponentsSwitch

Switch

The Switch component is an animated toggle switch for boolean settings with optional labels.

Switch

Basic Usage

<Switch
  value={darkMode}
  onValueChange={setDarkMode}
/>

With Label

<Switch
  label="Dark Mode"
  value={darkMode}
  onValueChange={setDarkMode}
/>

Import

import Switch from "../components/Switch";

Props

  • value (boolean, Required): Whether switch is on/off.
  • onValueChange (function, Required): Function called when switch is toggled.
  • label (string): Optional label text.
  • labelPosition (“left” | “right”, default: “right”): Position of the label.
  • size (“small” | “medium” | “large”, default: “medium”): Switch size.
  • disabled (boolean, default: false): Whether switch is disabled.
  • activeColor (string): Color when switch is active.
  • inactiveColor (string): Color when switch is inactive.
  • trackColorOn (string): Color when switch is active.
  • trackColorOff (string): Color when switch is inactive.
  • thumbColor (string): Color of the thumb (the circle that moves).
StatsCardTabs