Switch

A toggle switch control for binary state changes with smooth animations and theme-aware colors. Features accessible keyboard support and three size variants.

Installation

# Install @ecosystem/design-system to use Switch
pnpm add @ecosystem/design-system

Preview

Loading preview...

Customize

checked— Whether the switch is checked

size— Size variant - sm (w-8), md (w-11), lg (w-14)

disabled— When true, prevents interaction and shows disabled state

label— Optional label displayed next to the switch

Usage

Import

import { Switch } from '@ecosystem/design-system';

Example

<Switch>
  Content
</Switch>

Eject

Copy this component into your project for full customization

API Reference

Prop	Type	Default	Description
checked	boolean	false	Whether the switch is checked
size	sm \| md \| lg	"md"	Size variant - sm (w-8), md (w-11), lg (w-14)
disabled	boolean	false	When true, prevents interaction and shows disabled state
label	text	"Label"	Optional label displayed next to the switch

Examples

Small

Medium

Large

Disabled

Code Examples

Basic Usage

Controlled switch component

import { Switch } from '@opencosmos/ui';

const [enabled, setEnabled] = useState(false);

<Switch
  checked={enabled}
  onCheckedChange={setEnabled}
/>

With Label

Switch with an associated label

import { Switch } from '@opencosmos/ui';

const [darkMode, setDarkMode] = useState(false);

<label className="flex items-center gap-2 cursor-pointer">
  <Switch checked={darkMode} onCheckedChange={setDarkMode} />
  <span>Dark Mode</span>
</label>

Different Sizes

Switch in all available sizes

import { Switch } from '@opencosmos/ui';

<div className="flex items-center gap-4">
  <Switch size="sm" checked={true} onCheckedChange={() => {}} />
  <Switch size="md" checked={true} onCheckedChange={() => {}} />
  <Switch size="lg" checked={true} onCheckedChange={() => {}} />
</div>