A web Bubble UI element that wraps Ionic's ion-toggle into a fully customizable toggle switch (track, handle, ON/OFF text, colors, sizing, animation). iOS and Material looks are both supported.
This is the web-only plugin. It is separate from the Native mobile Native switch (toggle) plugin, which renders the real OS switch inside Bubble Native apps.
Editor Properties
Core
| Field |
Type |
Default |
Description |
mode |
Dropdown (ios / md) |
ios |
Base look: Apple-style (ios) or Material (md). |
theme |
Ionic color name |
— |
Ionic color theme applied to the toggle (e.g. primary, success). |
status |
yes / no |
no |
Initial ON / OFF value when the element loads. |
disabled |
yes / no |
no |
If yes, the toggle is visible but cannot be tapped. |
Element padding
| Field |
Type |
Default |
Description |
padding_vertical |
number (px) |
md:5 / ios:0 |
Vertical padding around the toggle. |
padding_horizontal |
number (px) |
md:4 / ios:0 |
Horizontal padding around the toggle. |
Track (background bar)
| Field |
Type |
Default |
Description |
track_width |
number (px) |
— |
Track width. |
track_height |
number (px) |
— |
Track height. |
track_border_radius |
number (px) |
— |
Track corner radius. |
track_background |
CSS color / gradient |
— |
Track background when OFF. |
track_background_checked |
CSS color / gradient |
— |
Track background when ON. |
Handle (knob) — size & shape
| Field |
Type |
Default |
Description |
handle_width |
number (px) |
— |
Handle width. |
handle_height |
number (px) |
ios:27 / md:20 |
Handle height. Top/bottom paddings are subtracted from this value. |
handle_max_height |
number (px) |
auto |
Max handle height. |
handle_border_radius |
number (px) |
— |
Handle corner radius. |
handle_position |
number (px) |
— |
Spacing between the handle and the track edge (--handle-spacing). |
handle_transition |
number (ms) |
— |
Slide animation duration. |
Handle appearance — OFF / ON
| Field |
Type |
Default |
Description |
handle_background |
CSS color |
— |
Handle background when OFF. |
handle_background_checked |
CSS color |
— |
Handle background when ON. |
handle_box_shadow |
CSS box-shadow |
— |
Handle shadow when OFF. |
handle_box_shadow_checked |
CSS box-shadow |
— |
Handle shadow when ON. |
handle_padding_top |
number (px) |
— |
Top padding inside the handle (OFF). Subtracted from handle height. |
handle_padding_bottom |
number (px) |
— |
Bottom padding inside the handle (OFF). |
handle_padding_top_checked |
number (px) |
— |
Top padding inside the handle (ON). |
handle_padding_bottom_checked |
number (px) |
— |
Bottom padding inside the handle (ON). |
Handle text — OFF / ON
The handle can show a short label that changes with the state (e.g. OFF → ON).
| Field |
Type |
Default |
Description |
handle_text |
text |
— |
Text shown on the handle when OFF (e.g. OFF). |
handle_text_checked |
text |
— |
Text shown on the handle when ON (e.g. ON). |
handle_font_size |
number (px) |
11 |
Handle text size when OFF. |
handle_font_size_checked |
number (px) |
11 |
Handle text size when ON. |
handle_font_weight |
number / text |
— |
Handle text weight when OFF. |
handle_font_weight_checked |
number / text |
— |
Handle text weight when ON. |
handle_text_color |
CSS color |
#000 |
Handle text color when OFF. |
handle_text_color_checked |
CSS color |
#000 |
Handle text color when ON. |
States
is_checked (yes / no) — the current ON / OFF value.