Sadrazam – Switch Showcase

Toggle switch component with default, checked, disabled, size, and shape variants

Default Switch (Square Slider)

Basic toggle using .switch + .slider without the round modifier

Unchecked .switch > .slider
Checked .slider (input:checked)

Rounded Switch

Add .round to the slider for pill-shaped corners

Unchecked .slider.round
Checked .slider.round (input:checked)

Disabled State

Disabled switches with disabled attribute on the input

Disabled Off input[disabled]
Disabled On input[checked][disabled]
Disabled Off input[disabled] (square)
Disabled On input[checked][disabled] (square)

Sizes

The switch uses em-based sizing, so scale it via font-size on the .switch element

XS (10px) font-size: 10px
SM (12px) font-size: 12px
MD (16px) font-size: 16px (default)
LG (20px) font-size: 20px
XL (26px) font-size: 26px
All Sizes side-by-side comparison

Switch Container

Use .switch-container as a flex column wrapper and .switch-label for the text label

With Label
Enable notifications
.switch-container + .switch-label
Unchecked
Dark mode
.switch-container + .switch-label
Column Layout
WiFi
Bluetooth
GPS
.switch-container (column)

Custom Colors

Override --color-sec-700 via inline style to change the checked track color

Default --color-sec-700
Green --color-sec-700: #00b894
Red --color-sec-700: #d63031
Orange --color-sec-700: #e17055
Blue --color-sec-700: #0984e3
Purple --color-sec-700: #6c5ce7

Shape Comparison

Square slider vs rounded slider side by side

Square Off Round Off .slider vs .slider.round
Square On Round On .slider vs .slider.round

Dark Background

Switch appearance on a dark surface

Round Off .slider.round
Round On .slider.round (checked)
Square Off .slider
Square On .slider (checked)
Custom Color custom --color-sec-700
Sizes em-based sizing on dark