rsx!{
div { style:"padding:1rem;display:flex;gap:16px;align-items:center;",
div { style:"width:40px;height:22px;border-radius:11px;background:#3a6ea5;position:relative;",
div { style:"position:absolute;right:2px;top:2px;width:18px;height:18px;border-radius:50%;background:#fff;"}}
div { style:"width:40px;height:22px;border-radius:11px;background:#ccc;position:relative;",
div { style:"position:absolute;left:2px;top:2px;width:18px;height:18px;border-radius:50%;background:#fff;"}}}}
1
<div><HSwitch v-model:model-value="true" label="Toggle me" /></div>
Switch Icon Variant
Switch with icons, default provides ✓ and ✗ symbols.
(live preview unavailable)
1
2
3
4
5
6
7
8
rsx!{
div { style:"padding:1rem;display:flex;gap:8px;align-items:center;",
span { style:"font-size:16px;",""}
div { style:"width:40px;height:22px;border-radius:11px;background:#3a6ea5;position:relative;",
div { style:"position:absolute;right:2px;top:2px;width:18px;height:18px;border-radius:50%;background:#fff;"}}
span { style:"font-size:16px;",""}}}
1
<div><HSwitch v-model:model-value="true" label="Toggle me" /></div>
Switch Text Variant
Switch with text labels, automatically adjusts slider width.
(live preview unavailable)
1
2
3
4
5
6
7
8
rsx!{
div { style:"padding:1rem;display:flex;gap:8px;align-items:center;",
span { style:"font-size:14px;color:#666;","Off"}
div { style:"width:40px;height:22px;border-radius:11px;background:#3a6ea5;position:relative;",
div { style:"position:absolute;right:2px;top:2px;width:18px;height:18px;border-radius:50%;background:#fff;"}}
span { style:"font-size:14px;color:#333;","On"}}}
1
<div><HSwitch v-model:model-value="true" label="Toggle me" /></div>
Switch Size Variant
Supports Small, Medium, Large sizes.
(live preview unavailable)
1
2
3
4
5
6
7
8
9
10
rsx!{
div { style:"padding:1rem;display:flex;gap:16px;align-items:center;",
div { style:"width:28px;height:16px;border-radius:8px;background:#3a6ea5;position:relative;",
div { style:"position:absolute;right:1px;top:1px;width:14px;height:14px;border-radius:50%;background:#fff;"}}
div { style:"width:40px;height:22px;border-radius:11px;background:#3a6ea5;position:relative;",
div { style:"position:absolute;right:2px;top:2px;width:18px;height:18px;border-radius:50%;background:#fff;"}}
div { style:"width:52px;height:28px;border-radius:14px;background:#3a6ea5;position:relative;",
div { style:"position:absolute;right:2px;top:2px;width:24px;height:24px;border-radius:50%;background:#fff;"}}}}
1
<div><HSwitch v-model:model-value="true" label="Toggle me" /></div>
Progress
Progress bar component for displaying operation progress.
(live preview unavailable)
1
2
3
4
5
6
7
rsx!{
div { style:"padding:1rem;",
div { style:"width:200px;height:6px;background:#e2e2ea;border-radius:3px;overflow:hidden;",
div { style:"width:60%;height:100%;background:#3a6ea5;border-radius:3px;"}}}}
1
<div><HSwitch v-model:model-value="true" label="Toggle me" /></div>
Slider
Slider component for numeric selection.
(live preview unavailable)
1
2
3
4
5
rsx!{
div { style:"padding:1rem;",
input {type:"range", min:"0", max:"100", value:"60", style:"width:200px;"}}}
1
<div><HSwitch v-model:model-value="true" label="Toggle me" /></div>