# Switch

Source: https://lumeo.nativ.sh/components/switch

# Switch

A control that allows the user to toggle between two states.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## 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

For validation, label, and helper text, wrap this input in `<FormField>`. See [Form › Validation Pattern](/components/form#validation-pattern).

Preview Code

Default

Airplane Mode

Preview Code

With Binding

Dark Mode

Dark Mode is on

Preview Code

Disabled

Disabled off

Disabled on

Preview Code

Settings Example

Email Notifications

Receive emails about account activity.

Marketing Emails

Receive emails about new products and features.

Security Alerts

Receive alerts about unusual activity.

Preview Code

Sizes

Small

Default

Large

Preview Code

Animated (Spring)

Spring-eased thumb

Preview Code

Size — interactive preview

Pick a size to see the switch scale live.

Sm Default Lg

Default — off

Preview Code

Haptic Feedback (Mobile)

On supported mobile browsers, toggling this switch triggers a short vibration via `navigator.vibrate(10)`. Desktop browsers silently no-op.

Haptic enabled — off

## 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

Xs Size = Xs

Sm Size = Sm

Md Size = Md

Lg Size = Lg

Xl Size = Xl

Xxl Size = Xxl

Xxs Size = Xxs

### Checked

Checked = false

Off

Checked = true

On

### Disabled

Disabled = false

Enabled

Disabled = true

Disabled

### Loading

Loading = false

Idle

Loading = true

Loading

## 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](/components/checkbox) — Use when the selection is part of a form that is submitted, rather than an instant toggle
-   [Toggle](/components/toggle) — Use for toolbar-style on/off buttons with icon support
-   [RadioGroup](/components/radio-group) — Use when selecting one option from multiple mutually exclusive choices