NWD Toggle Switch (Customizable)

Key features 6

Track & Thumb Control

The track and the circle are styled separately, so the switch can be subtle or high contrast without any CSS.

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, including bounce, elastic and pop, that respect the user's reduced motion setting.

Accessible Experience

Keyboard ready with Tab and Space, a visible focus ring, an accessible label and description, and reduced motion support.

Workflow Ready

Value changed event, Reset, Focus and Set value actions, and exposed states for the value, is clickable, is required, is valid and is focused.

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 default value.
03
Connect to your workflows
Use the value changed event to react to the user, and read the exposed states to use the on or off value anywhere in your app.

TOGGLE 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.

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.

General

Toggle label

text

Text shown next to the toggle.

defaultToggle label

optional

Label placement

Side of the label relative to the toggle.

right
left

defaultright

Stretch label to fill the line?

checkbox

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.

defaultno

Toggle size

Size of the track and thumb.

small
medium
large

defaultmedium

Click animation

Animation played on the thumb when the toggle is clicked.

none
bounce
elastic
jelly
pop
pulse

defaultbounce

Unchecked state

Track bg color (unchecked)

color

Track background color when unchecked.

default#DEDEDE

Track border color (unchecked)

color

Track border color when unchecked.

default#DEDEDE

Thumb color (unchecked)

color

Thumb color when unchecked.

default#FFFFFF

Hovered state

Track bg color (hovered)

color

Track background color on hover, when the input is enabled and unchecked.

default#CACACA

Track border color (hovered)

color

Track border color on hover, when the input is enabled.

default#CACACA

Thumb color (hovered)

color

Thumb color on hover, when the input is enabled and unchecked.

default#FFFFFF

Input font color (hovered)

color

Input font color on hover, when the input is enabled. Empty keeps the native font color.

defaultno default

optional

Checked state

Track bg color (checked)

color

Track background color when checked.

default#30B3FE

Track border color (checked)

color

Track border color when checked.

default#30B3FE

Thumb color (checked)

color

Thumb color when checked.

default#FFFFFF

Input font color (checked)

color

Input font color when checked. Empty keeps the native font color.

defaultno default

optional

DEFAULT DATA 1

Default value

yes/no

Value applied on load and on reset. Yes means checked, no means unchecked.

defaultno

INPUT BEHAVIOR 7

Disabled state

This input is disabled?

yes/no

Disables the component, preventing any interaction.

defaultno

Input opacity (disabled)

number

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).

default0.5

Input font color (disabled)

color

Input font color when disabled.

default#CACACA

Required state

This input is required?

yes/no

Marks the field as required and enables input validation.

defaultno

Input bg color (invalid)

color

Track background color when invalid (required and unchecked).

default#FFDEDE

Input border color (invalid)

color

Track border color when invalid (required and unchecked).

default#FF6666

Input font color (invalid)

color

Input font color when invalid (required and unchecked). Empty keeps the native font color.

defaultno default

optional

ACCESSIBILITY 2

Accessible label

text

Name read by screen readers. When empty, uses the placeholder or the visible label.

defaultno default

optional

Accessible description

text

Hint read by screen readers after the name. Empty for none.

defaultno default

optional

States 5

Values the element exposes for the rest of the page to read.

value (is checked)

yes/no

True when checked. Keeps the value while the element is hidden.

is clickable

yes/no

True when the component is not disabled.

is required

yes/no

True when the input is marked as required.

is valid

yes/no

True when the field is not required, or when it is required and checked.

is focused

yes/no

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

event

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 1 param

Checks or unchecks the toggle from a workflow.

Value

yes/no

New value (yes turns it on, no turns it off). Empty counts as no.

defaultno default

FAQ 4

Why use NWD Toggle Switch instead of a native Bubble checkbox?

Bubble has no toggle switch. Building one by hand means stacking groups, workflows and custom states, and the result is hard to reuse. This plugin is a single element that behaves like a real switch, keyboard included, and looks the same in every browser.

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 toggles?

Yes. The visual properties support Bubble's predefined styles, so the size, the track and thumb colors and the animation can be saved once and reused on every toggle in the app.