Switch Component

Toggle switch using <label class="switch"> + <input type="checkbox">. Supports thumb icons, track labels, indeterminate state, shapes, sizes, and dynamic colors.

Notes

Basic usage

Default

Thumb icons (data-on-thumb / data-off-thumb)

Track labels (data-on-track / data-off-track)

Combined (icons + track + emoji)

Shapes

Default (pill circle)

switch-rounded

switch-square

Indeterminate (switch-indeterminate)

Default indeterminate

Indeterminate + colors

Sizes

14px (switch-2xs)

16px (switch-xs)

18px (switch-sm)

20px (switch-md, default)

22px (switch-lg)

24px (switch-xl)

26px (switch-2xl)

28px (switch-3xl)

30px (switch-4xl)

32px (switch-5xl)

Theme colors

Primary

Secondary

Tertiary

Success

Error

Info

Highlight

Warning

Caution

Ink

Title

Description

Caption

Placeholder

Custom colors

Multiple color formats are supported: