The Toggle component is a segmented control that lets users switch between a fixed set of options. It provides a compact, visually clear way to select one option from a small group.
Notable features:
- Works with string arrays or object arrays
- Field mapping for custom data structures
- Icon and label display
- Full keyboard navigation (Arrow keys, Home, End)
- Accessible with proper ARIA attributes
Basic Example
Pass an array of strings and bind the selected value:
No preview available
Example
Basic usage with string options:
Highlighting code...
Field Mapping
Use objects with field mapping to display icons alongside labels. The fields prop maps
your data attributes to the component's expectations.
No preview available
Example
Example with icon and label mapping:
Highlighting code...
Configuration
The Toggle component supports several configuration options for customizing its behavior.
No preview available
Example
Properties
Core Properties
- options: Array of strings or objects
- value: Currently selected option (bindable)
- fields: Field mapping for custom data
- onchange: Callback when selection changes
Display Options
- showLabels: Show text labels (default: true)
- size: Size variant (default: 'md')
- disabled: Disable interaction
- class: Custom CSS classes