GCS Studios
Track & Thumb Control
The track and the circle are styled separately, so the switch can be subtle or high contrast without any CSS.
Why use this?
Built for what Bubble does not cover.
Bubble has no native toggle. There is an official Bubble plugin, Ionic Elements, but that element is limited to a few preset styles, with no animation and no control over size.
Key features 6
Full State Styling
Track background, track border, thumb and font colors set independently for the unchecked, hovered and checked states.
Three Ready Sizes
Small, medium and large presets keep the track, the circle and the travel distance in proportion at any scale.
Click Animations
Six animation styles on click, from a subtle bounce to an elastic pop.
Accessible Experience
Fully operable from the keyboard and announced to screen readers, with motion preferences respected.
Workflow Ready
Everything the input knows is available to your workflows, and every change is an event you can react to.
In detail
Fully Customizable
- 20+ properties for complete visual and behavioral control
- Optional label on the left or right
- Small, medium, and large sizes
- Track, border, thumb, and font colors for unchecked, hovered, and checked states
- Custom click animations, such as elastic, pop, and bounce
- Seamless integration with native Bubble styles while preserving a consistent appearance across browsers and matching your app design
Smooth User Experience
- Keyboard ready with Tab, Space, and Enter
- Screen reader ready with an accessible label and description, and reduced motion support
- Handles disabled, required, and invalid states with customizable styling that integrates with Bubble styles
- Consistent experience across browsers and devices
Workflow Friendly
- All relevant values available via exposed states, including is clickable, is required, is valid, and is focused
- Default value available to your workflows even while the element is hidden
- Reset action with flexible behavior that integrates with native Bubble actions (Reset a group/popup) or custom workflows
- Focus action that can be triggered from anywhere for total control over workflow and accessibility
- Set value action that can be triggered from anywhere, with control over how it behaves when the input is disabled
- Value changed event for seamless Bubble integration
Reliable & Production-Ready
- Built with lightweight CSS and JavaScript for fast, reliable performance
- Designed around practical use cases and real Bubble development needs
- Tested in real-world applications before being released publicly
- Created to extend Bubble with functionality and customization beyond what native Bubble elements typically offer
How to use 3
-
01
Insert the element on the page
Place the plugin element wherever you need it.
-
02
Configure the properties
Adjust the settings to match your use case, including the label, the toggle size, the track and thumb colors of each state, and the click animation.
-
03
Connect to your workflows
Use the value changed event to react when the switch changes, and read the exposed state to use the value anywhere in your app.
INPUT 16
The label uses Bubble's native font properties. The properties in this section control the track, the circle and the label colors for each state.
General
Toggle label
Text shown next to the toggle.
Label placement
Side of the label relative to the toggle.
Stretch label to fill the line?
The label fills the rest of the line, pushing it to the edge opposite the control, and the native font alignment then positions the text inside it. If disabled, the label hugs the control and the native font alignment moves the whole component instead.
Bubble's native font alignment moves the whole element, the control and its label together, not just the text. Turn on 'Stretch label to fill the line' and the label takes the rest of the line instead, pushing the control to the opposite edge, with the same native alignment positioning the text inside it. For anything beyond that, wrap the element in a group and align the group.
Toggle size
Size of the track and thumb.
The size preset scales the track, the circle and the travel distance together, so the switch keeps its proportions.
Click animation
Animation played on the thumb when the toggle is clicked.
Animations are skipped automatically when the visitor's system asks for reduced motion.
Unchecked state
Track bg color (unchecked)
Track background color when unchecked.
Track border color (unchecked)
Track border color when unchecked.
Thumb color (unchecked)
Thumb color when unchecked.
Hovered state
Track bg color (hovered)
Track background color on hover, when the input is enabled and unchecked.
Track border color (hovered)
Track border color on hover, when the input is enabled.
Thumb color (hovered)
Thumb color on hover, when the input is enabled and unchecked.
Input font color (hovered)
Input font color on hover, when the input is enabled. Empty keeps the native font color.
Checked state
Track bg color (checked)
Track background color when checked.
Track border color (checked)
Track border color when checked.
Thumb color (checked)
Thumb color when checked.
Input font color (checked)
Input font color when checked. Empty keeps the native font color.
DEFAULT DATA 1
Default value
Value applied on load and on reset. Yes means checked, no means unchecked.
INPUT BEHAVIOR 7
Disabled state
This input is disabled?
Disables the component, preventing any interaction.
While disabled, the toggle ignores clicks and keyboard input, the Focus and Set value actions do nothing, and is clickable publishes no.
Input opacity (disabled)
Opacity applied to the toggle when disabled, from 0 to 1. The toggle keeps the colors of its current state, so a checked one still reads as checked. The label is not affected and uses Input font color (disabled).
The opacity applies only to the track and the circle. The label keeps its own disabled font color.
Input font color (disabled)
Input font color when disabled.
Required state
This input is required?
Marks the field as required and enables input validation.
The invalid styling only appears after the user interacts with the toggle and leaves it off. Read is valid to block a submit.
Input bg color (invalid)
Track background color when invalid.
Input border color (invalid)
Track border color when invalid.
Input font color (invalid)
Input font color when invalid. Empty keeps the native font color.
ACCESSIBILITY 2
Accessible label
Name read by screen readers. When empty, uses the placeholder or the visible label.
Accessible description
Hint read by screen readers after the name. Empty for none.
States 5
Values the element exposes for the rest of the page to read.
value (is checked)
True when checked. Keeps the value while the element is hidden.
is clickable
True when the component is not disabled.
is required
True when the input is marked as required.
is valid
True when the value is accepted. False when it is required and off. It updates on every change, so a workflow can rely on it; the invalid style only shows after the person changes it, or when a workflow sets the value.
is focused
True while the element has keyboard focus. Tab in sets it, and Tab out or a click outside clears it.
Events 1
Where a workflow can start.
value changed
Triggered when the toggle is checked or unchecked, including by reset.
Actions 3
What a workflow can tell the element to do.
The actions can be triggered from any workflow event. The plugin also responds to Bubble's native reset actions (Reset a group/popup).
Reset no params
Restores the default value.
Focus no params
Focuses the toggle.
Set value 2 params
Checks or unchecks the toggle from a workflow.
Apply even when disabled?
Yes applies the value even while the element is disabled. No makes the action do nothing in that state.
Value
New value (yes turns it on, no turns it off). Empty counts as no.
FAQ 3
Does it require any advanced knowledge to set up?
No. Place the element on the page, configure the properties in the editor, and connect it to your workflows. All properties have descriptions and sensible defaults, so you can get started quickly without deep technical knowledge.
Can I focus or reset the component from a Bubble workflow?
Yes. The plugin exposes a Focus action and a Reset action, and it also responds to Bubble's native reset actions (Reset a group/popup). Both are ignored while the input is disabled.
Can I predefine styles and reuse them across multiple inputs?
Yes. The visual properties support Bubble's predefined styles, so a look can be saved once and applied to every input in the app. A few sizing fields are deliberately not dynamic, and that is what lets them travel inside the style instead of being set one input at a time.
NWD UI - Input
This plugin is maintained by GCS Studios and is part of the NWD UI - Input family, form controls built from scratch for Bubble, inspired by a personal component library originally built for React. Each one is carefully designed and tested in real applications before release, for the level of control, polish and reliability that native Bubble inputs often do not provide. See more plugins on the GCS Studios contributor page.
Each control here is drawn by the plugin instead of being restyled from a native one, so they match each other across the library and keep the same shape in every browser.