Lumeo

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

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.

Keyboard Interactions

Key Action
SpaceToggle the switch between on and off
TabMove focus to the next focusable element

Parameter Coverage

Every Lumeo.Size value plus the key bool parameters demoed exhaustively.

Size

Xs
Sm
Md
Lg
Xl
Xxl
Xxs

Checked

Checked = false

Checked = true

Disabled

Disabled = false

Disabled = true

Loading

Loading = false

Loading = true

API Reference

Switch

Property Type Default Description
Checked bool false Whether the switch is toggled on. Use with @bind-Checked for two-way binding.
CheckedChanged EventCallback<bool> — Callback invoked when the switch state changes.
Disabled bool false When true, prevents user interaction and dims the switch.
Size SwitchSize Default Size variant. Values: Sm, Default, Lg.
Animated bool false When true, the thumb animates with a bouncy spring cubic-bezier timing instead of the default linear transition.
Loading bool false Shows a spinner on the thumb while an async toggle is in progress.
OnLabel string? null Label rendered inside the track when checked.
OffLabel string? null Label rendered inside the track when unchecked.
HapticFeedback bool false When true, triggers a short haptic vibration via navigator.vibrate(10) on each toggle. Silently no-ops on browsers without the Vibration API (e.g. iOS Safari).
Required bool false Marks the switch as required within an enclosing form.
Invalid bool false Applies an error visual state and aria-invalid for validation failures.
ErrorText string? null Validation message shown beneath the switch when Invalid is true.
HelperText string? null Supplementary description rendered beneath the switch.
Label string? null Visible label rendered alongside the switch control.
Name string? null Form field name submitted with the switch's checked state.
AriaLabel string? null Accessible name exposed via aria-label; recommended for icon-only switches without visible text.

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