Switch Component

A toggle control that allows users to switch between checked and unchecked states.

Basic Usage

Simple switch with label using two-way binding.

Airplane Mode

Current state: Off

Size Variants

Switches come in three sizes: Small, Medium (default), and Large.

Small switch

Medium switch (default)

Large switch

Settings Panel

Group of switches for application settings.

Enable notifications

Auto-save changes

Send usage analytics

Active settings: Notifications, Analytics

Disabled State

Switches that cannot be interacted with.

Disabled (off)

Disabled (on)

Form Validation

Switch integrated with Blazor's EditForm and validation.

Interactive

Switch with custom change handler.

Enable dark mode

Dark mode disabled

Settings Cards

Switches within card containers for a polished settings interface.

Email Notifications

Receive email about your account activity

Marketing Emails

Receive emails about new products and features

Social Notifications

Receive notifications from social interactions

Custom Styling

Switches with additional CSS classes.

With shadow

With ring

Accessibility

Keyboard navigation and screen reader support.

✓ Tab key focuses switches in sequence

✓ Space or Enter key toggles focused switch

✓ Disabled switches are not focusable (tabindex="-1")

✓ ARIA attributes set correctly (role="switch", aria-checked, aria-disabled)

✓ Focus ring appears on keyboard focus (focus-visible:ring-2)

✓ Color contrast meets WCAG 2.1 AA standards

✓ Semantic label association using htmlFor attribute

✓ Screen readers announce switch state correctly

Browser Compatibility

Tested and verified across modern browsers.

✓ Chrome 120+ (compatible)

✓ Firefox 120+ (compatible)

✓ Edge 120+ (compatible)

✓ Safari 17+ (compatible)