Component

Switch

Toggle switch for boolean settings. Use instead of checkboxes for immediate effect settings.

tsx

import { Switch } from 'wss3-forge'

Usage

•

Use for settings that take effect immediately

•

Use checkboxes instead for form submissions

•

Add description for complex settings

•

Group related switches with SwitchGroup

Enable notifications

Examples

Basic Switch

Enable notifications

tsx

1<Switch label="Enable notifications" checked={enabled} onChange={setEnabled} />

With Description

Dark modeEnable dark theme across the application

tsx

1<Switch
2  label="Dark mode"
3  description="Enable dark theme"
4  checked={darkMode}
5  onChange={setDarkMode}
6/>

Sizes

SmallMedium (default)Large

tsx

1<VStack gap="md">
2  <Switch size="sm" label="Small" checked={...} onChange={...} />
3  <Switch size="md" label="Medium" checked={...} onChange={...} />
4  <Switch size="lg" label="Large" checked={...} onChange={...} />
5</VStack>

Settings Panel

Email notificationsReceive email updatesPush notificationsReceive push alertsMarketing emails

tsx

1<Card padding="lg">
2  <VStack gap="lg">
3    <Switch label="Email" checked={email} onChange={setEmail} />
4    <Switch label="Push" checked={push} onChange={setPush} />
5    <Switch label="Marketing" checked={false} onChange={() => {}} disabled />
6  </VStack>
7</Card>

Slider

TagInput

Last updated: December 2025