Label Positioning

Control where labels appear relative to the switch

Live Demo
Top Labels:
Option 1
Bottom Labels:
Option 2
Left Labels:
Option 1
Option 2
Option 3
Option 4
Right Labels:
Option 1
Option 2
Option 3
Option 4
Code
 
 
Position Guidelines
 
Position Options
 
  • top - Above the switch (needs padding-top)
    •  
  • bottom - Below the switch (needs padding-bottom)
    •  
  • left - To the left (vertical only, needs padding-left)
    •  
  • right - To the right (vertical only, needs padding-right)
 
⚠️ Important: Spacing
 
By default, labels are absolutely positioned and don't reserve space in the layout.
						Add appropriate padding to the container in all directions to prevent overlap with other content.
						Alternatively, use labelRenderMode="block" for automatic spacing.
 
Recommended Padding
 
  • Top: 3rem padding-top
    •  
  • Bottom: 2.5rem padding-bottom
    •  
  • Left: 5rem padding-left
    •  
  • Right: 6-8rem padding-right
 
Label Render Mode
 
Choose between absolute and block positioning for labels
 
Live Demo
 
Absolute Mode (Default)
 
⚠️ Labels don't take up space - need manual padding
 
Absolute: 
  
 
   
Option 2
 
Next element would overlap without padding!
 
Block Mode (New)
 
✅ Labels take up space automatically
 
Block: 
    
 
  
Option 2
 
 
Next element flows naturally - no padding needed!
 
Block Mode - Vertical
 
✅ Works great with vertical switches
 
    
 
 
Option 1
Option 2
Option 3
Option 4
  
 
⚠️ Absolute mode needs padding
 
  
 
 
Option 1
Option 2
Option 3
Option 4
  
 
Code
 
 
 
 
Render Mode Comparison
 
Render Modes
 
absolute (default)
 
  • Labels use absolute positioning
    •  
  • Don't affect layout flow
    •  
  • Require manual padding
    •  
  • More control over exact positioning
 
block
 
  • Labels use static positioning
    •  
  • Take up space in document flow
    •  
  • No padding needed
    •  
  • Simpler to use, less flexible
 
When to Use Block Mode
 
  • Dynamic content where padding is hard to predict
    •  
  • Simpler layouts without overlapping elements
    •  
  • When you want automatic spacing
    •  
  • Responsive designs that adapt to content
 
When to Use Absolute Mode
 
  • Precise control over label positioning
    •  
  • Complex layouts with overlapping elements
    •  
  • Fixed-size components
    •  
  • Backwards compatibility (default behavior)
 
Label Content Features (v1.4.0+)
 
Advanced label text handling with labelMember, labelCallback, and clickable labels
 
Live Demo
 
1. labelMember Property
 
Product Sizes (using labelMember="name"): 
    
 
  
Medium
 
 
2. labelCallback Function
 
Subscription Plans (using labelCallback): 
    
 
  
Basic - $9/mo
 
 
3. Clickable Labels (Vertical Mode)
 
Server Locations (click labels to navigate): 
    
 
 
New York
London
Tokyo
Sydney
  
 
💡 Try it: Click any city label to jump directly to that server! 
Labels are clickable in vertical mode when no thumbTemplate is used.
 
4. Label Priority System
 
Priority 1: labelMember 
    
 
  
Another Label
 
 
Priority 2: labelCallback (if no labelMember) 
    
 
  
Computed: Fallback 2
 
 
Without either property: defaults to "Option 1", "Option 2", etc.
 
Code
 
 
 
 
Feature Details
 
New in v1.4.0
 
Enhanced label system with automatic text extraction and interactive features.
 
1. labelMember Property
 
  • Extracts label text from object property
    •  
  • Example: labelMember="name" reads item.name
    •  
  • Perfect for arrays of objects
    •  
  • Null-safe: skips if property doesn't exist
 
2. labelCallback Function
 
  • Custom function: (item: any, index: number) => string
    •  
  • Access to both item data and index
    •  
  • Ideal for computed labels or formatting
    •  
  • Can combine multiple object properties
 
3. Clickable Labels
 
  • Available in vertical orientation with left/right positions
    •  
  • Only active when no thumbTemplate is defined
    •  
  • Click any label to jump directly to that option
    •  
  • Visual hover effects indicate interactivity
 
Label Priority System
 
  1. labelMember - Object property extraction
    2.  
  2. labelCallback - Custom function
    3.  
  3. labelTemplate - Full custom rendering
    4.  
  4. Default - "Option 1", "Option 2", etc.
 
Best Practices
 
  • Use labelMember for simple object properties
    •  
  • Use labelCallback for computed or formatted text
    •  
  • Use labelTemplate for rich content (HTML, styling)
    •  
  • Combine with labelRenderMode="block" for easier layouts
 
Custom Label Templates
 
Rich label content with custom templates
 
Live Demo
 
Quality Settings: 
  
 
 
Low • 480p • ~200MB
Medium • 720p • ~500MB
High • 1080p • ~1GB
Ultra • 4K • ~4GB
  
 
System Status: 
  
 
   
🟡 Connecting
 Active
 
Code
 
 
 
 
Template Features
 
labelTemplate Snippet
 
The labelTemplate snippet allows complete customization
						of how labels are rendered for each option.
 
Template Parameters
 
  • currentIndex - Index of this item
    •  
  • item - The item data object
    •  
  • isSelected - Boolean for selection state
 
Use Cases
 
  • Multi-line labels with descriptions
    •  
  • Icons with text
    •  
  • Conditional content based on selection
    •  
  • Custom styling and colors
 
Label Visibility
 
Control when to show or hide labels
 
Live Demo
 
With Labels: 
  
 
   
Option 2
 
Without Labels: 
  
 
 
 
Icons Only: 
  
👎
 
👍
👎
🤷
 
 
Code
 
 
 
 
Visibility Guidelines
 
When to Hide Labels
 
  • When space is limited
    •  
  • When using self-explanatory icons
    •  
  • In compact UI designs
    •  
  • When labels are shown elsewhere
 
Accessibility Note
 
When hiding labels, ensure the options are still understandable
						through context, tooltips, or nearby text.
 
Label Best Practices
 
📝 Content Guidelines
 
  • ✅ Keep labels concise and clear
    •  
  • ✅ Use consistent terminology
    •  
  • ✅ Consider internationalization
    •  
  • ✅ Test with different text lengths
    •  
  • ✅ Ensure sufficient contrast
 
🎯 Positioning Tips
 
  • ✅ Add padding for top/left positions
    •  
  • ✅ Consider viewport constraints
    •  
  • ✅ Test on different screen sizes
    •  
  • ✅ Match position to layout flow
    •  
  • ✅ Be consistent across your app
 
Next Steps
 
🎨
 
Styling
 
Customize colors and appearance
 Styling Examples
 
⚡
 
Advanced
 
Templates and complex features
 Advanced Examples
 
📚
 
API Reference
 
Complete documentation
 MultiSwitch API