Toggle Component Demo
Interactive toggle buttons with different states and styling
Basic Toggle Examples
Room Light
Control room lighting
Notifications
Enable push notifications
Styled Toggle Examples
Theme Mode
Switch between light and dark
Premium Features
Access premium functionality
Activity Log
Toggle Events
No events yet...
Toggle Component Features:
- Dual State - Toggle between 'on' and 'off' states
- Custom Labels - Different labels for each state
- State Events - Emits 'change' event with current state
- Initial State - Set starting state with 'initialState' prop
- Custom Styling - 'onClass' and 'offClass' for state-specific styles
- Additional Classes - 'class' prop for common styling
- TypeScript Support - Full type safety with ToggleState type
- Component Logic - Access toggle state and methods via refs
Try it: Click any toggle to see how the state changes are tracked in the activity log. Each toggle maintains its own independent state and can have different styling for on/off states.