MS01 Basic Usage

Simple multi-option switch with labels

Live Demo
Choose option:
Option 1
Selected: Option A
Code
 
 
Explanation
 
Two-way Binding
 
Use bind:selectedIndex to track which option is currently selected.
 
Items Array
 
Pass an array of strings or objects to define the available options.
						The array type flows through to all snippet contexts via the generic T.
 
Block label rendering
 
labelRenderMode="block" reserves space for labels in document
						flow — no manual padding needed.
 
MS02 Different Option Counts
 
MultiSwitch adapts to any number of options
 
Live Demo
 
Power Level (5 options): 
  
 
 
Option 2
 Level: Low
 
Mood (4 emojis): 
  
 
 
Option 3
 Mood: 😊
 
Code
 
 
 
 
Guidelines
 
Flexible Options
 
MultiSwitch works with any number of items ≥ 2. The component automatically
						adjusts spacing and stride math.
 
Content Types
 
  • Text labels
    •  
  • Emoji characters
    •  
  • Short abbreviations
    •  
  • Custom objects (with labelMember / labelCallback / label snippet)
 
MS03 Size Variations
 
Numeric and named sizes
 
Live Demo
 
size={40} (compact): 
  
 
 
Option 1
 
size="md" (default): 
  
 
 
Option 1
 
size={70} (large): 
  
 
 
Option 1
 
Selected: Small
 
Code
 
 
 
 
Size Guidelines
 
Choosing Size
 
  • xs / sm: Sidebars, compact tables
    •  
  • md (default): Forms — pure-admin aligned
    •  
  • lg / xl or 60–80px: Touch targets, emphasis
 
Label Considerations
 
Larger switches give more room for labels and better touch targets. See the Sizes page for the full table.
 
MS04 Vertical Orientation
 
Vertical layout for space-constrained designs
 
Live Demo
 
Horizontal (default)
 
  
 
 
Option 2
 
Vertical
 
  
 
 
 
Selected: Low
 
Code
 
 
 
 
When to Use
 
Vertical Benefits
 
  • Saves horizontal space
    •  
  • Works well in sidebars
    •  
  • Good for mobile layouts
    •  
  • Per-step labels become clickable buttons (when no thumb snippet)
 
Label Positioning
 
Use "right" or "left" with vertical orientation. "top" / "bottom" are ignored on vertical switches.
 
MS05 Label Positioning
 
Control where labels appear relative to the switch
 
Live Demo
 
Labels on top: 
Option 1
  
 
 
 
Labels on bottom: 
  
 
 
Option 1
 
No labels: 
  
 
 
 
Code
 
 
 
 
Position Options
 
Available Positions
 
  • top — Above the switch
    •  
  • bottom — Below the switch (default)
    •  
  • left — To the left (vertical only)
    •  
  • right — To the right (vertical only)
 
See also
 
The Labels page has the full matrix and
						covers labelMember / labelCallback for object items.
 
MS06 Event Handling
 
Respond to selection changes
 
Live Demo
 
Select option: 
  
 
 
Option 1
 Current: Option A
 
 
Code
 
 
 
 
Event Details
 
onItemChange Callback
 
The onItemChange prop accepts a function that receives
						the newly selected index.
 
Common Use Cases
 
  • Form validation
    •  
  • Loading related data
    •  
  • Updating other UI components
    •  
  • Analytics tracking
 
MS07 Working with Custom Objects
 
Using the thumb and label snippets with object data
 
Live Demo
 
Skill level: 
  
B
 
 
Beginner
 Just starting out
 
Code
 
 
 
 
Snippet Roles
 
v2.0 Snippet Split
 
The 1.x children snippet (which ran in BOTH the moving thumb and
						each step background) was split in 2.0:
 
  • thumb — one render in the moving thumb (gets the active item)
    •  
  • segment — one render per step background
    •  
  • label — replaces 1.x labelTemplate
 
Snippet Context
 
Context shape is unified: { index, item, isSelected }. thumb omits isSelected (it's always true for the
						moving thumb).
 
Next Steps
 
🏷️
 
Labels
 
labelMember, labelCallback, label snippet
 Labels Guide
 
🎨
 
Styling
 
Per-instance colors with itemStyles
 Styling Guide
 
📚
 
API Reference
 
Complete documentation
 MultiSwitch API