Skip to Content
Dashflow Logo

Switch Component

A comprehensive guide to using the Switch component with examples, props, and best practices.

Overview

The Switch component is a toggle control that allows users to turn an option on or off. It provides a modern, accessible alternative to checkboxes for binary choices and is commonly used in settings panels and configuration forms.

Basic Usage

import { Switch } from '@dashflowx/core'


export default function SwitchExample() {
  const [enabled, setEnabled] = useState(false);
  
  return (
    <Switch 
      label="Enable notifications"
      checked={enabled}
      onChange={(checked) => setEnabled(checked)}
    />
  )
}

Preview:

Props

PropTypeDefaultDescription
labelstring'Switch Label'The label text for the switch
checkedbooleanfalseWhether the switch is checked/enabled
disabledbooleanfalseWhether the switch is disabled
onChangefunction-Callback function when switch state changes
idstring-Unique identifier for the switch

Examples

Basic Switch

<Switch 
  label="Airplane Mode"
  checked={false}
  onChange={handleChange}
/>

Preview:

Enabled Switch

<Switch 
  label="Dark Mode"
  checked={true}
  onChange={handleChange}
/>

Preview:

Disabled Switch

<Switch 
  label="Premium Feature"
  checked={false}
  disabled={true}
/>

Preview:

Switch with Custom Label

<Switch 
  label="Enable two-factor authentication"
  checked={twoFactorEnabled}
  onChange={setTwoFactorEnabled}
/>

Preview:

Common Use Cases

Settings Panel

<div className="space-y-4">
  <h3 className="text-lg font-semibold">Account Settings</h3>
  <Switch 
    label="Email notifications"
    checked={emailNotifications}
    onChange={setEmailNotifications}
  />
  <Switch 
    label="Push notifications"
    checked={pushNotifications}
    onChange={setPushNotifications}
  />
  <Switch 
    label="SMS notifications"
    checked={smsNotifications}
    onChange={setSmsNotifications}
  />
  <Switch 
    label="Marketing emails"
    checked={marketingEmails}
    onChange={setMarketingEmails}
  />
</div>

Feature Toggles

<div className="space-y-3">
  <h4 className="font-medium">Feature Preferences</h4>
  <Switch 
    label="Auto-save drafts"
    checked={autoSave}
    onChange={setAutoSave}
  />
  <Switch 
    label="Show advanced options"
    checked={showAdvanced}
    onChange={setShowAdvanced}
  />
  <Switch 
    label="Enable beta features"
    checked={betaFeatures}
    onChange={setBetaFeatures}
  />
</div>

Privacy Controls

<div className="space-y-4">
  <h3 className="text-lg font-semibold">Privacy Settings</h3>
  <Switch 
    label="Public profile"
    checked={publicProfile}
    onChange={setPublicProfile}
  />
  <Switch 
    label="Show online status"
    checked={showOnlineStatus}
    onChange={setShowOnlineStatus}
  />
  <Switch 
    label="Allow friend requests"
    checked={allowFriendRequests}
    onChange={setAllowFriendRequests}
  />
</div>

App Configuration

<div className="space-y-3">
  <h4 className="font-medium">App Configuration</h4>
  <Switch 
    label="Enable location services"
    checked={locationServices}
    onChange={setLocationServices}
  />
  <Switch 
    label="Enable analytics"
    checked={analytics}
    onChange={setAnalytics}
  />
  <Switch 
    label="Enable crash reporting"
    checked={crashReporting}
    onChange={setCrashReporting}
  />
</div>

Best Practices

1. Clear Labels

Use descriptive labels that clearly indicate what the switch controls.

// ✅ Good - Clear label
<Switch 
  label="Enable email notifications"
  checked={emailNotifications}
  onChange={setEmailNotifications}
/>


// ❌ Avoid - Unclear label
<Switch 
  label="Option 1"
  checked={option1}
  onChange={setOption1}
/>

2. Logical Grouping

Group related switches together with proper spacing and visual hierarchy.

// ✅ Good - Logical grouping
<div className="space-y-3">
  <h4 className="font-medium">Notification Settings</h4>
  <Switch label="Email notifications" checked={email} onChange={setEmail} />
  <Switch label="Push notifications" checked={push} onChange={setPush} />
  <Switch label="SMS notifications" checked={sms} onChange={setSms} />
</div>

3. Consistent State Management

Use consistent state management patterns for switch groups.

// ✅ Good - Consistent state management
const [settings, setSettings] = useState({
  email: false,
  push: true,
  sms: false,
});


const updateSetting = (key: string, value: boolean) => {
  setSettings(prev => ({ ...prev, [key]: value }));
};

4. Accessibility

Ensure proper accessibility with clear labels and keyboard navigation.

// ✅ Good - Accessible switch
<Switch 
  label="Enable accessibility features"
  checked={accessibilityEnabled}
  onChange={setAccessibilityEnabled}
  id="accessibility-switch"
/>

5. Visual Feedback

Provide clear visual feedback for the switch state.

// ✅ Good - Clear visual feedback
<Switch 
  label="Enable dark mode"
  checked={darkMode}
  onChange={setDarkMode}
/>

Customization

Custom Styling

You can customize the switch appearance using CSS classes:

<Switch 
  label="Custom styled switch"
  checked={checked}
  onChange={setChecked}
  className="custom-switch"
/>

Different Sizes

Create different switch sizes for different use cases:

// Small switch
<Switch 
  label="Compact setting"
  checked={compact}
  onChange={setCompact}
  size="sm"
/>


// Large switch
<Switch 
  label="Important setting"
  checked={important}
  onChange={setImportant}
  size="lg"
/>

Form Integration

With Form Libraries

The Switch component works well with popular form libraries:

// With React Hook Form
import { useForm, Controller } from 'react-hook-form';


function MyForm() {
  const { control } = useForm();
  
  return (
    <Controller
      name="notifications"
      control={control}
      render={({ field }) => (
        <Switch 
          label="Enable notifications"
          checked={field.value}
          onChange={field.onChange}
        />
      )}
    />
  );
}

State Management

Use proper state management for switch groups:

const [preferences, setPreferences] = useState({
  darkMode: false,
  notifications: true,
  analytics: false,
});


const togglePreference = (key: keyof typeof preferences) => {
  setPreferences(prev => ({
    ...prev,
    [key]: !prev[key]
  }));
};
  • Checkbox: For multi-choice selections
  • RadioGroup: For single-choice selections
  • Toggle: For toggle button groups
  • Select: For dropdown selections
  • Input: For text input

API Reference

For the complete API reference and advanced usage patterns, see the Switch API documentation.

Edit this page on GitHub
previousSelect