📚 Switch Component

A binary switch component for on/off states with Svelte 5 support.

Import 
 
 
Basic Usage 
 
 
 
🔧 Properties
 
PropertyTypeDefaultDescriptionVersion
checkedbooleanfalseCurrent state of the switch (bindable)1.0.0+
isDisabledbooleanfalseDisables interaction when true1.0.0+
orientation"horizontal" | "vertical""horizontal"Layout direction of the switch1.0.0+
sizenumber50Height in pixels (width for vertical)1.0.0+
itemsany[] | nullnullArray of exactly 2 items for custom content1.0.0+
itemStylesStepStyle | StepStyle[][]Custom styling for track and thumb1.0.0+
onToggle(checked: boolean) => voidundefinedCallback fired when state changes1.0.0+
disableThumbRenderbooleanfalseDisable default thumb rendering1.0.0+
 
🎭 Template Snippets
 
SnippetParametersDescriptionVersion
childrencurrentIndex: number
item: any
isSelected: boolean		Custom content snippet for switch areas1.0.0+
thumbTemplatecurrentIndex: number
currentItem: any
itemsCount: number		Custom thumb content snippet1.2.0+
 
📋 Type Definitions
 
StepStyle Interface
 
 
 
 
💡 Usage Examples
 
Two-way Binding
 
 
 
 
Custom Styling
 
 
 
 
Custom Thumb Template
 
 
 
 
Event Handling
 
 
 
 
🎨 SCSS Variables
 
Override these variables before importing the component styles:
 
 
 
 
♿ Accessibility
 
Built-in Features
 
  • ✅ Keyboard navigation (Space, Enter)
    •  
  • ✅ Focus management with visible indicators
    •  
  • ✅ ARIA attributes (role, aria-checked)
    •  
  • ✅ Screen reader support
    •  
  • ✅ Disabled state handling
 
Best Practices
 
  • 🎯 Provide clear labels or context
    •  
  • 🎯 Ensure sufficient color contrast
    •  
  • 🎯 Test with keyboard navigation
    •  
  • 🎯 Consider reduced motion preferences
    •  
  • 🎯 Use semantic HTML structure
 
⚙️ Component Methods
 
MethodSignatureDescriptionVersion
update(props: Partial<SwitchProps>) => voidProgrammatically update component properties1.0.0+