Switch
A control that allows the user to toggle between two states.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <Switch />
When to Use
- Toggle binary settings such as on/off, enabled/disabled, or active/inactive
- Control feature flags or preferences in settings panels
- Provide instant feedback when a state change takes effect immediately
- Replace checkboxes when the toggle represents a real-time switch rather than a form submission
- Build notification preference panels with multiple independent toggles
<FormField>.
See Form › Validation Pattern.
Dark Mode is on
Email Notifications
Receive emails about account activity.
Marketing Emails
Receive emails about new products and features.
Security Alerts
Receive alerts about unusual activity.
Pick a size to see the switch scale live.
On supported mobile browsers, toggling this switch triggers a short vibration via navigator.vibrate(10). Desktop browsers silently no-op.
A switch renders as a <button>, which posts nothing on its own. Set Name and a hidden bubble input is added so the switch's checked state submits in a native form; Value is the string sent when on.
Styling hooks (data-state)
Both the track and thumb expose a data-state
attribute of checked or
unchecked, so you can drive custom CSS
(e.g. data-[state=checked]:bg-primary)
without watching the C# state.
Keyboard Interactions
| Key | Action |
|---|---|
| Space | Toggle the switch between on and off |
| Tab | Move focus to the next focusable element |
Parameter Coverage
Every Lumeo.Size value plus the key bool parameters demoed exhaustively.
Size
Checked
Checked = false
Checked = true
Disabled
Disabled = false
Disabled = true
Loading
Loading = false
Loading = true
API Reference
Switch
Related Components
- Checkbox — Use when the selection is part of a form that is submitted, rather than an instant toggle
- Toggle — Use for toolbar-style on/off buttons with icon support
- RadioGroup — Use when selecting one option from multiple mutually exclusive choices