# Switch

**Path:** Components/Form Inputs

[Back to Documentation Index](http://rubicblazor.skyconis.com/docs.md)

---

Switch

 RbSwitch component provides toggle switches for on/off states with support for colors, icons, and different layouts.

 Basic Usage

 Simple switches with individual and grouped selections.

 Show code

 Enable notifications 

 Dark mode 

 Auto-save 

 Notifications: True, Dark Mode: False, Auto-save: True

 Variants

 Different visual styles with color variations.

 Show code

 Select Color

 Default 
 Primary 
 Secondary 
 Info 
 Warning 
 Danger 
 Success 

 Normal Variant

 Option A 

 Option B 

 Option C 

 Outlined Variant

 Option A 

 Option B 

 Option C 

 Filled Variant

 Option A 

 Option B 

 Option C 

 With Labels

 Switches with text labels and rich ChildContent.

 Show code

 Simple Text Labels

 Enable feature A 

 Enable feature B 

 Enable feature C 

 Rich Content Labels

 Email Notifications 
 Receive updates via email

 Push Notifications 
 Get instant push alerts

 SMS Notifications 
 Receive text messages

 Features: A: True, B: False, C: True

 Settings: Email: True, Push: True, SMS: False

 Hover Effect

 Enable hover effect for better user interaction feedback.

 Show code

 Option 1 

 Option 2 

 Option 3 

 Hover with Different Colors

 Primary 

 Success 

 Warning 

 Danger 

 With Hover: False, True, False

 Colored Hover: Primary: True, Success: False, Warning: True, Danger: False

 Position & Align

 Control switch position (Left/Right) and text alignment (Left/Center/Right).

 Show code

 StartAligned

 WiFi 

 Bluetooth 

 Location 

 EndAligned + IconRight

 WiFi 

 Bluetooth 

 Location 

 CenterAligned + IconTop

 WiFi 

 Data 

 GPS 

 CenterAligned + IconBottom

 WiFi 

 Data 

 GPS 

 JustifyAligned + IconLeft

 WiFi 

 Bluetooth 

 Location 

 Justify + IconRight

 WiFi 

 Bluetooth 

 Location 

 Readonly & Disabled

 Control interaction states with Readonly and Disabled parameters.

 Show code

 Normal Switch 

 Disabled Unchecked 

 Disabled Checked 

 Readonly Checked 

 RTL Support

 Compare logical alignment behavior inside an RTL container.

 Show code

 الملف الشخصي 

 تحديثات البريد 

 المصادقة الثنائية 

 ✕

 Contents