📚 MultiSwitch Component

A multi-option switch component for selecting between multiple choices with Svelte 5 support.

Import 
 
 
Basic Usage 
 
 
 
🔧 Properties
 
PropertyTypeDefaultDescriptionVersion
selectedIndexnumber0Currently selected index (bindable)1.0.0+
items *any[]requiredArray of options to display1.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+
itemStylesStepStyle | StepStyle[][]Custom styling for each option1.0.0+
shouldDisplayLabelsbooleanfalseShow/hide option labels1.3.0+
labelPosition"top" | "bottom" | "left" | "right""bottom"Position of labels relative to switch1.3.0+
labelRenderMode"absolute" | "block""absolute"Label rendering mode - absolute (may overlap) or block (takes space)1.4.0+
labelMemberstringundefinedProperty name to extract label text from items (e.g., "name" reads item.name)1.4.0+
labelCallback(item: any, index: number) => stringundefinedCustom function to generate label text with item and index access1.4.0+
onItemChange(index: number) => voidundefinedCallback fired when selection changes1.0.0+
disableThumbRenderbooleanfalseDisable default thumb rendering1.0.0+
 
* Required property
 
🎭 Template Snippets
 
SnippetParametersDescriptionVersion
childrencurrentIndex: number
item: any
isSelected: boolean		Custom content snippet for option areas1.0.0+
thumbTemplatecurrentIndex: number
currentItem: any
itemsCount: number		Custom thumb content snippet1.2.0+
labelTemplatecurrentIndex: number
item: any
isSelected: boolean		Custom label template snippet1.3.0+
 
📋 Type Definitions
 
StepStyle Interface
 
 
 
 
💡 Usage Examples
 
Basic Multi-Option
 
 
 
 
Custom Styling per Option
 
 
 
 
Custom Label Template
 
 
 
 
Vertical with Custom Content
 
 
 
 
🏷️ Label Positioning & Rendering
 
💡 New in v1.4.0: Use labelRenderMode="block" for automatic spacing,
				or stick with labelRenderMode="absolute" (default) for precise control with manual padding.
 
⚠️ Absolute Mode: Labels are absolutely positioned and don't reserve space in the layout.
				Add appropriate padding to prevent overlap:
 
PositionRequired PaddingWorks With
toppadding-top: 3remHorizontal & Vertical
bottompadding-bottom: 2.5remHorizontal & Vertical
leftpadding-left: 5remVertical only
rightpadding-right: 6-8remVertical only
 
 
 
 
🔤 Label Content Features (v1.4.0+)
 
Advanced label text handling with automatic extraction from object properties or custom functions.
 
Label Priority System
 
  1. labelMember - Extract text from object property
    2.  
  2. labelCallback - Custom function with item and index access
    3.  
  3. labelTemplate - Full custom rendering control
    4.  
  4. Default - "Option 1", "Option 2", etc.
 
Object Property Extraction
 
 
 
 
Custom Label Function
 
 
 
 
💡 Clickable Labels: In vertical mode with left/right label positions,
				labels become clickable when no thumbTemplate is defined. Click any label to jump directly to that option!
 
🎨 SCSS Variables
 
Override these variables before importing the component styles:
 
 
 
 
♿ Accessibility
 
Built-in Features
 
  • ✅ Keyboard navigation (Arrow keys, Home, End)
    •  
  • ✅ Focus management with visible indicators
    •  
  • ✅ ARIA attributes (role, aria-selected)
    •  
  • ✅ Screen reader support
    •  
  • ✅ Disabled state handling
    •  
  • ✅ Proper tab order
 
Best Practices
 
  • 🎯 Provide clear labels or context
    •  
  • 🎯 Ensure sufficient color contrast
    •  
  • 🎯 Test with keyboard navigation
    •  
  • 🎯 Consider reduced motion preferences
    •  
  • 🎯 Use semantic option descriptions
    •  
  • 🎯 Test with screen readers
 
⚙️ Component Methods
 
MethodSignatureDescription
update(props: Partial<MultiSwitchProps>) => voidProgrammatically update component properties
 
 
 
 
🎯 Common Usage Patterns
 
Settings Selection
 
 
 
 
Navigation Tabs