Switch

A toggle switch component for controlling binary on/off states with visual feedback.

Features

• Smooth toggle animation
• Multiple sizes (sm, md, lg)
• Disabled and loading states
• Labels and descriptions
• Keyboard accessible
• Custom colors
• Right-to-left support

Usage

Web (React)

import { Switch } from '@cuppa/ui'

function MyComponent() {
  const [enabled, setEnabled] = useState(false)

  return (
    <Switch
      checked={enabled}
      onChange={setEnabled}
      label="Enable notifications"
      description="Receive email notifications for updates"
    />
  )
}

iOS (SwiftUI)

import CuppaUI

struct MyView: View {
  @State private var enabled = false

  var body: some View {
    CuppaSwitch(
      isOn: $enabled,
      label: "Enable notifications",
      description: "Receive email notifications for updates"
    )
  }
}

Android (Jetpack Compose)

import com.cuppa.ui.components.CuppaSwitch
import androidx.compose.runtime.*

@Composable
fun MyScreen() {
  var enabled by remember { mutableStateOf(false) }

  CuppaSwitch(
    checked = enabled,
    onCheckedChange = { enabled = it },
    label = "Enable notifications",
    description = "Receive email notifications for updates"
  )
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | checked | boolean | false | Switch state | | onChange | function | - | Callback when toggled | | label | string | - | Label text | | description | string | - | Helper text | | disabled | boolean | false | Disable the switch | | loading | boolean | false | Show loading state | | size | string | 'md' | Switch size | | color | string | 'primary' | Color theme |

Sizes

Small (sm)

Compact size for dense UIs

Medium (md)

Default size for most use cases

Large (lg)

Larger size for emphasis or accessibility

Examples

Basic Switch

<Switch
  checked={darkMode}
  onChange={setDarkMode}
  label="Dark Mode"
/>

With Description

<Switch
  checked={autoSave}
  onChange={setAutoSave}
  label="Auto-save"
  description="Automatically save changes every 5 minutes"
/>

Disabled

<Switch
  checked={true}
  disabled
  label="Premium Feature"
  description="Upgrade to enable this feature"
/>

Loading State

<Switch
  checked={syncing}
  loading
  label="Cloud Sync"
  description="Syncing your data..."
/>

Custom Color

<Switch
  checked={danger Mode}
  onChange={setDangerMode}
  label="Danger Mode"
  color="danger"
/>

Accessibility

• Full keyboard support (Space/Enter to toggle)
• ARIA role="switch" with proper state
• Associated label for screen readers
• Focus visible indicator
• High contrast support

Best Practices

1. Use clear, action-oriented labels
2. Provide descriptions for complex toggles
3. Show immediate visual feedback
4. Use loading state for async operations
5. Don't use for mutually exclusive options (use radio instead)
6. Consider platform conventions for placement