Switch Overview

The switch component is a toggle control that allows users to quickly turn an option on or off. Unlike checkboxes which are for selecting multiple options, switches are specifically designed for immediate state changes and binary choices. The component provides clear visual feedback for the current state and supports various sizes, validation states, and accessibility features.

When to Use

✅ Use switches when:

  • Controlling system settings or preferences (enable/disable features)
  • Toggling between two distinct states with immediate effect
  • Turning services, notifications, or modes on/off
  • Managing visibility or availability of features
  • Creating compact toggle controls in mobile interfaces
  • Implementing preference panels and configuration screens

❌ Don't use switches for:

  • Selecting multiple items from a list (use checkboxes instead)
  • Single-choice selection from multiple options (use radio buttons)
  • Form submissions where immediate action isn't intended
  • Complex state changes requiring confirmation
  • Navigation or triggering actions (use buttons instead)
  • When the "off" state isn't meaningful or clear
Design system docs Examples Basic Usage

Simple switches for immediate state toggles with clear labels:

<dap-ds-stack direction="column">
<dap-ds-switch
  value="notifications"
  label="Enable notifications">
</dap-ds-switch>

<dap-ds-switch
  value="auto-save"
  label="Auto-save documents"
  checked>
</dap-ds-switch>

<dap-ds-switch
  value="dark-mode"
  label="Dark mode">
</dap-ds-switch>
</dap-ds-stack>
Sizes & Scaling

Choose switch sizes based on your interface density and importance:

<>
<dap-ds-stack direction="column">
<div>
  <dap-ds-typography variant="h4">Size variations</dap-ds-typography>
  <dap-ds-stack direction="column">
    <dap-ds-switch
      value="xs-setting"
      label="Extra small switch"
      description="Compact size for dense layouts"
      size="xs">
    </dap-ds-switch>

    <dap-ds-switch
      value="sm-setting"
      label="Small switch (default)"
      description="Standard size for most interfaces"
      size="sm">
    </dap-ds-switch>

    <dap-ds-switch
      value="md-setting"
      label="Medium switch"
      description="Larger size for better touch targets"
      size="md">
    </dap-ds-switch>

    <dap-ds-switch
      value="lg-setting"
      label="Large switch"
      description="Prominent size for critical settings"
      size="lg">
    </dap-ds-switch>
  </dap-ds-stack>
</div>
</dap-ds-stack>
</>
States & Feedback

Switches support various states to communicate different conditions:

<>
<dap-ds-stack direction="column">
<div>
  <dap-ds-typography variant="h4">Interactive states</dap-ds-typography>
  <dap-ds-stack direction="column">
    <dap-ds-switch
      label="Default off state"
      value="state-1">
    </dap-ds-switch>

    <dap-ds-switch
      label="Active on state"
      value="state-2"
      checked>
    </dap-ds-switch>

    <dap-ds-switch
      label="Disabled off"
      value="state-3"
      disabled>
    </dap-ds-switch>

    <dap-ds-switch
      label="Disabled on"
      value="state-4"
      checked
      disabled>
    </dap-ds-switch>
  </dap-ds-stack>
</div>

<div>
  <dap-ds-typography variant="h4">Validation states</dap-ds-typography>
  <dap-ds-stack direction="column">
    <dap-ds-switch
      label="Required setting"
      value="validation-1"
      required
      invalid
      feedback="This setting must be enabled"
      feedbackType="negative">
    </dap-ds-switch>

    <dap-ds-switch
      label="Successfully configured"
      value="validation-2"
      checked
      feedback="Feature enabled successfully"
      feedbackType="positive">
    </dap-ds-switch>

    <dap-ds-switch
      label="Requires attention"
      value="validation-3"
      checked
      feedback="This setting affects system performance"
      feedbackType="warning">
    </dap-ds-switch>
  </dap-ds-stack>
</div>
</dap-ds-stack>
</>
Label Positioning & Descriptions

Flexible label and description placement for different layout requirements:

<>
<dap-ds-stack direction="column">
<div>
  <dap-ds-typography variant="h4">Label positioning</dap-ds-typography>
  <dap-ds-stack direction="column">
    <dap-ds-switch
      label="Label on the right (default)"
      value="pos-1"
      description="Description appears below the label">
    </dap-ds-switch>

    <dap-ds-switch
      label="Label on the left"
      value="pos-2"
      description="Switch appears on the right side"
      labelPlacement="left">
    </dap-ds-switch>
  </dap-ds-stack>
</div>

<div>
  <dap-ds-typography variant="h4">Description placement</dap-ds-typography>
  <dap-ds-stack direction="column">
    <dap-ds-switch
      label="Description below"
      value="desc-1"
      description="This description appears below the label"
      descriptionPlacement="bottom">
    </dap-ds-switch>

    <dap-ds-switch
      label="Description above"
      value="desc-2"
      description="This description appears above the label"
      descriptionPlacement="top">
    </dap-ds-switch>
  </dap-ds-stack>
</div>
</dap-ds-stack>
</>
Switch Groups

Use input groups to organize related switches with shared context:

<>
<dap-ds-stack direction="column">
<div>
  <dap-ds-typography variant="h4">Privacy settings</dap-ds-typography>
  <dap-ds-input-group
    label="Privacy Controls"
    description="Manage how your information is shared and used"
    tooltip="These settings affect your account privacy"
    tooltipAriaLabel="Information about privacy settings">
    
    <dap-ds-switch
      label="Profile visibility"
      description="Make your profile visible to other users"
      value="profile-visibility">
    </dap-ds-switch>

    <dap-ds-switch
      label="Activity tracking"
      description="Allow tracking for personalized recommendations"
      value="activity-tracking"
      checked>
    </dap-ds-switch>

    <dap-ds-switch
      label="Data sharing"
      description="Share anonymous usage data to improve the service"
      value="data-sharing">
    </dap-ds-switch>
  </dap-ds-input-group>
</div>

<div>
  <dap-ds-typography variant="h4">System configuration</dap-ds-typography>
  <dap-ds-input-group
    required
    label="Required System Settings"
    description="These settings are required for proper operation"
    feedbackType="negative"
    feedback="All required settings must be enabled">
    
    <dap-ds-switch
      label="Security monitoring"
      value="security-monitoring"
      required
      invalid>
    </dap-ds-switch>

    <dap-ds-switch
      label="Error reporting"
      value="error-reporting"
      checked
      required>
    </dap-ds-switch>

    <dap-ds-switch
      label="Automatic updates"
      value="auto-updates"
      description="Optional - recommended for security"
      checked>
    </dap-ds-switch>
  </dap-ds-input-group>
</div>
</dap-ds-stack>
</>
Background & Border Variants

Special styling options for enhanced visibility and emphasis:

<>
<div style={{ backgroundColor: "#e9edf2", padding: "16px", borderRadius: "8px" }}>
<dap-ds-stack direction="column">
  <dap-ds-typography variant="h4">Background variant</dap-ds-typography>
  <dap-ds-stack direction="column">
    <dap-ds-switch
      label="Background style switch"
      description="Enhanced visibility on colored backgrounds"
      value="bg-1"
      type="background">
    </dap-ds-switch>

    <dap-ds-switch
      label="Background with border"
      description="Maximum definition and contrast"
      value="bg-2"
      type="background"
      border
      checked>
    </dap-ds-switch>

    <dap-ds-switch
      label="Regular switch for comparison"
      description="Standard styling"
      value="bg-3">
    </dap-ds-switch>
  </dap-ds-stack>
</dap-ds-stack>
</div>

<div style={{ backgroundColor: "white", padding: "16px", border: "1px solid #e0e0e0", borderRadius: "8px", marginTop: "16px" }}>
<dap-ds-stack direction="column">
  <dap-ds-typography variant="h4">Border emphasis</dap-ds-typography>
  <dap-ds-stack direction="column">
    <dap-ds-switch
      label="Bordered switch"
      description="Added border for visual emphasis"
      value="border-1"
      border>
    </dap-ds-switch>

    <dap-ds-switch
      label="Bordered and active"
      description="Border with active state"
      value="border-2"
      border
      checked>
    </dap-ds-switch>
  </dap-ds-stack>
</dap-ds-stack>
</div>
</>
Real-World Patterns Application Settings Panel 
<div style={{border: 'var(--dds-border-width-base) solid var(--dds-border-neutral-subtle)', padding: 'var(--dds-spacing-600)', borderRadius: 'var(--dds-radius-base)'}}>
<dap-ds-stack>
  <dap-ds-typography variant="h3">Application Settings</dap-ds-typography>
  
  <dap-ds-input-group
    label="Display & Interface"
    description="Customize how the application looks and behaves">
    
    <dap-ds-switch
      label="Dark mode"
      description="Use dark theme for reduced eye strain"
      value="dark-mode">
    </dap-ds-switch>

    <dap-ds-switch
      label="Compact view"
      description="Show more content by reducing spacing"
      value="compact-view"
      checked>
    </dap-ds-switch>

    <dap-ds-switch
      label="Animations"
      description="Enable smooth transitions and effects"
      value="animations"
      checked>
    </dap-ds-switch>

    <dap-ds-switch
      label="Sound effects"
      description="Play audio feedback for interactions"
      value="sound-effects">
    </dap-ds-switch>
  </dap-ds-input-group>

  <dap-ds-input-group
    label="Performance & Data"
    description="Control how the application uses system resources">
    
    <dap-ds-switch
      label="Hardware acceleration"
      description="Use GPU for better performance (requires restart)"
      value="hardware-acceleration"
      checked>
    </dap-ds-switch>

    <dap-ds-switch
      label="Background sync"
      description="Keep data updated when app is not active"
      value="background-sync"
      checked>
    </dap-ds-switch>

    <dap-ds-switch
      label="Data compression"
      description="Reduce bandwidth usage by compressing data"
      value="data-compression">
    </dap-ds-switch>
  </dap-ds-input-group>

  <dap-ds-stack direction="row">
    <dap-ds-button>Save Settings</dap-ds-button>
    <dap-ds-button variant="outline">Reset to Defaults</dap-ds-button>
  </dap-ds-stack>
</dap-ds-stack>
</div>
Notification Preferences 
<div style={{border: 'var(--dds-border-width-base) solid var(--dds-border-neutral-subtle)', padding: 'var(--dds-spacing-600)', borderRadius: 'var(--dds-radius-base)'}}>
<dap-ds-stack>
  <dap-ds-typography variant="h3">Notification Preferences</dap-ds-typography>
  
  <dap-ds-input-group
    label="Email Notifications"
    description="Choose which email notifications you want to receive">
    
    <dap-ds-switch
      label="Weekly digest"
      description="Summary of your activity and updates"
      value="weekly-digest"
      checked>
    </dap-ds-switch>

    <dap-ds-switch
      label="Security alerts"
      description="Important security and login notifications"
      value="security-alerts"
      checked>
    </dap-ds-switch>

    <dap-ds-switch
      label="Product updates"
      description="News about new features and improvements"
      value="product-updates">
    </dap-ds-switch>

    <dap-ds-switch
      label="Marketing emails"
      description="Special offers and promotional content"
      value="marketing-emails">
    </dap-ds-switch>
  </dap-ds-input-group>

  <dap-ds-input-group
    label="Push Notifications"
    description="Real-time notifications in your browser or device">
    
    <dap-ds-switch
      label="Browser notifications"
      description="Show notifications in your web browser"
      value="browser-notifications"
      checked>
    </dap-ds-switch>

    <dap-ds-switch
      label="Mobile notifications"
      description="Send notifications to your mobile device"
      value="mobile-notifications"
      checked>
    </dap-ds-switch>

    <dap-ds-switch
      label="Do not disturb mode"
      description="Pause all notifications during focus hours"
      value="do-not-disturb">
    </dap-ds-switch>
  </dap-ds-input-group>

  <dap-ds-stack direction="row">
    <dap-ds-button>Update Preferences</dap-ds-button>
    <dap-ds-button variant="outline">Test Notifications</dap-ds-button>
  </dap-ds-stack>
</dap-ds-stack>
</div>
Feature Toggle Dashboard 
<div style={{border: 'var(--dds-border-width-base) solid var(--dds-border-neutral-subtle)', padding: 'var(--dds-spacing-600)', borderRadius: 'var(--dds-radius-base)'}}>
<dap-ds-stack>
  <dap-ds-typography variant="h3">Feature Management</dap-ds-typography>
  <dap-ds-typography variant="body" style={{color: 'var(--dds-text-neutral-subtle)'}}>
    Enable or disable features for your account. Changes take effect immediately.
  </dap-ds-typography>
  
  <dap-ds-stack direction="column">
    <dap-ds-switch
      label="Advanced analytics"
      description="Access detailed reports and insights (+$10/month)"
      value="advanced-analytics"
      size="lg">
    </dap-ds-switch>

    <dap-ds-switch
      label="Team collaboration"
      description="Share projects and collaborate with team members"
      value="team-collaboration"
      size="lg"
      checked>
    </dap-ds-switch>

    <dap-ds-switch
      label="API access"
      description="Integrate with external applications and services"
      value="api-access"
      size="lg">
    </dap-ds-switch>

    <dap-ds-switch
      label="Priority support"
      description="Get faster response times and dedicated assistance"
      value="priority-support"
      size="lg"
      checked>
    </dap-ds-switch>

    <dap-ds-switch
      label="Beta features"
      description="Try experimental features before they're released"
      value="beta-features"
      size="lg"
      feedback="May cause instability"
      feedbackType="warning">
    </dap-ds-switch>
  </dap-ds-stack>

  <div style={{borderTop: 'var(--dds-border-width-base) solid var(--dds-border-neutral-subtle)', paddingTop: 'var(--dds-spacing-400)', marginTop: 'var(--dds-spacing-400)'}}>
    <dap-ds-stack direction="row" justify="space-between" align="center">
      <dap-ds-typography variant="body" style={{color: 'var(--dds-text-neutral-subtle)'}}>
        Features enabled: 3 of 5
      </dap-ds-typography>
      <dap-ds-stack direction="row">
        <dap-ds-button variant="outline" size="sm">View Billing</dap-ds-button>
        <dap-ds-button size="sm">Upgrade Plan</dap-ds-button>
      </dap-ds-stack>
    </dap-ds-stack>
  </div>
</dap-ds-stack>
</div>
Accessibility & Keyboard Navigation

The switch component is built with accessibility as a core principle:

Keyboard Support
  • Space: Toggle switch state
  • Enter: Alternative toggle (custom enhancement)
  • Tab: Navigate between switches
  • Shift + Tab: Navigate backwards
Screen Reader Support
  • Proper ARIA role (switch) for clear identification
  • State announcements (on, off) with proper labels
  • Form association and validation messages
  • Group labeling for related switches
Focus Management
  • Clear focus indicators that respect user preferences
  • Logical tab order following visual layout
  • Programmatic focus control for dynamic interfaces
<dap-ds-stack direction="column">
<dap-ds-typography variant="h4">Accessibility Examples</dap-ds-typography>

<dap-ds-switch
  label="Accessible switch example"
  description="Try navigating with Tab and toggling with Space or Enter"
  value="accessible-1">
</dap-ds-switch>

<dap-ds-switch
  label="Switch with validation"
  description="Screen readers announce validation messages clearly"
  value="accessible-2"
  required
  invalid
  feedback="This setting is required for account security"
  feedbackType="negative">
</dap-ds-switch>

<dap-ds-switch
  label="Feature toggle"
  description="Clear state communication for assistive technology"
  value="accessible-3"
  checked>
</dap-ds-switch>
</dap-ds-stack>
Best Practices When to Use Switches vs. Checkboxes
  • Use switches for immediate state changes and system preferences
  • Use checkboxes for form selections and multi-item choices
  • Consider the context: switches imply immediate action, checkboxes imply selection
Visual Design
  • Maintain consistent sizing within related switch groups
  • Use background variants on colored surfaces for better contrast
  • Consider border emphasis for critical or high-impact settings
  • Test with different themes and accessibility settings
  • Ensure sufficient color contrast for all states
User Experience
  • Provide clear, descriptive labels that explain the effect
  • Use descriptions to clarify what happens when toggled
  • Group related switches with input groups
  • Consider the cognitive load of too many switches
  • Make the consequences of each switch state clear
  • Test with real users and assistive technologies
Technical Implementation
  • Always provide meaningful value attributes for form handling
  • Implement proper validation for required switches
  • Use appropriate feedback types for different validation states
  • Consider the immediate vs. deferred action patterns
  • Ensure switches work properly in forms and with validation
Importing 
import { DapDSSwitch } from 'dap-design-system/dist/dds'
Importing React 
import { DapDSSwitchReact } from 'dap-design-system/dist/react'
Attributes
PropertyTypeDefaultDescription
borderbooleanfalseThis sets up border around the switch, when true.
type'normal', 'background''normal'The type of the switch
namestringThe name of the switch.
valuestringThe value of the switch.
labelstringThe label of the switch.
descriptionstringThe description of the switch.
checkedbooleanThe checked state of the switch.
size'xs', 'sm' , 'lg'The size of the switch.
disabledbooleanThe disabled state of the switch.
readonlybooleanWhether the switch is readonly (cannot be changed but value is submitted with form).
requiredbooleanThe required state of the switch.
labelPlacement'left', 'right'The placement of the label.
descriptionPlacement'top', 'bottom'The placement of the description.
subtlebooleanThe weight of the label.
feedbackstringThe feedback of the switch.
feedbackType'negative', 'positive' , 'warning'The feedback type of the switch.
optionalbooleanThe optional state of the switch.
optionalLabelstringThe optional label of the switch.
Slots

No slots available.

Events
Event NameDescriptionType
dds-changeFired when the input value changes.{value: string }
dds-blurEmitted when the input loses focus.{void }
dds-focusEmitted when the input gains focus.{void }
dds-inputEmitted when the input receives input.{value: string }
CSS Parts
Part NameDescription
baseThe main switch container.
baselabelThe main label container
labelThe label of the switch.
inputThe native input of the switch.
controlThe control of the switch.
descriptionThe description of the switch.
CSS Custom Properties

No CSS custom properties available.