GCS Studios
Custom Marks & Shapes
Five check icons and full control over size and border radius, from a square box to a perfect circle.
Why use this?
Built for what Bubble does not cover.
Bubble's native checkbox is the browser's own control beside a label, with limited customization. And sometimes, the label drifts out of vertical alignment compared to the box depending on the font.
There is also an official Bubble plugin, Ionic Elements, whose Ionic Checkbox replaces the browser control with a mobile-styled one. But it takes its color from a short preset list, with no colors of your own, no size control and no choice of check mark.
Key features 6
Full State Styling
Background, border and font colors set independently for the unchecked, hovered and checked states.
Smart Defaults & Validation
Preselect a value, mark the input as required, and style the invalid state without a single workflow.
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
- Size and border roundness control
- Checkbox background, border, and font colors for unchecked, hovered, and checked states
- Custom marks for the checked state, including check, check bold, dash, cross, and plus
- Custom click animations, such as elastic, pop, bounce, jelly, and pulse
- 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 and Space
- 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 checkbox shape and size, the colors of each state, and the click animation.
-
03
Connect to your workflows
Use the value changed event to react when the box is checked or unchecked, and read the exposed states 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 checkbox box itself and the label colors for each state.
General
Checkbox label
Text shown next to the checkbox.
Label placement
Side of the label relative to the checkbox.
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.
Checkbox size
Size of the box, in pixels.
Checkbox border radius
Border radius of the box, in pixels.
Set the radius to half the checkbox size to get a perfectly round checkbox.
Click animation
Animation played on the box when the checkbox is clicked.
Animations are skipped automatically when the visitor's system asks for reduced motion.
Unchecked state
Checkbox bg color (unchecked)
Checkbox background color when unchecked.
Checkbox border color (unchecked)
Checkbox border color when unchecked.
Hovered state
Checkbox bg color (hovered)
Checkbox background color on hover, when the input is enabled.
Checkbox border color (hovered)
Checkbox border color on hover, when the input is enabled.
Input font color (hovered)
Input font color on hover, when the input is enabled. Empty keeps the native font color.
Checked state
Checkbox bg color (checked)
Checkbox background color when checked.
Checkbox border color (checked)
Checkbox border color when checked.
Input font color (checked)
Input font color when checked. Empty keeps the native font color.
Check icon class
Mark shown inside the checked box.
Check icon color
Color of the check mark.
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 checkbox 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 checkbox when disabled, from 0 to 1. The checkbox 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 checkbox box. 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 checkbox and leaves it unchecked. Read is valid to block a submit.
Input bg color (invalid)
Input background color when invalid.
Input border color (invalid)
Input 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 unchecked. 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 checkbox 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 checkbox.
Set value 2 params
Checks or unchecks the checkbox 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 checks, no unchecks). 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.