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.

Flexible Options

MultiSwitch works with 3 or more options. The component automatically adjusts spacing and positioning.

Content Types

• Text labels
• Emoji characters
• Short abbreviations
• Custom objects

Choosing Size

• Small (30-40px): Compact layouts, sidebars
• Default (50px): Most common use cases
• Large (60-80px): Touch interfaces, emphasis

Label Considerations

Larger switches provide more space for labels and better touch targets.

Vertical Benefits

• Saves horizontal space
• Works well in sidebars
• Good for mobile layouts
• Creates visual hierarchy

Label Positioning

Consider using "right" or "left" label positions with vertical switches for better readability.

Available Positions

• top - Above the switch
• bottom - Below the switch (default)
• left - To the left (vertical only)
• right - To the right (vertical only)

Design Tips

Choose label position based on your layout constraints and visual hierarchy.

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

Custom Object Support

When using complex objects, provide both children and labelTemplate snippets to display different parts of your data.

Template Roles

• children: Compact display in switch area (first letter)
• labelTemplate: Full details in labels (name + description)

Best Practices

Keep switch content minimal and use labels for detailed information to maintain readability and usability.