GCS Studios
Row, Column or Grid
Lay the options out vertically, horizontally or in a grid with a chosen number of columns and a single spacing control.
Why use this?
Built for what Bubble does not cover.
Bubble's native radio button is a plain control beside a label, with limited customization. Also, sometimes the label drifts out of vertical alignment compared to the button depending on the font, and the selected dot can sit slightly off center.
Key features 6
Static or Dynamic Choices
Type the options line by line, or feed them from Datatypes and Option Sets while keeping the type your workflows expect.
Full State Styling
Radio background, border, dot and font colors set independently for the unselected, hovered and selected states.
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
Flexible Layout & Data
- Vertical, horizontal, or grid layout, with column count and spacing control
- Static choices typed line by line, or dynamic choices from your database
- Works with texts, numbers, dates, Things, and Option Sets, keeping the type your workflows expect
Fully Customizable
- 30+ properties for complete visual and behavioral control
- Optional label on the left or right of each option
- Size control for the radio, with spacing between options
- Radio background, border, dot, and font colors for unselected, hovered, and selected 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 the arrow keys to move between options
- 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
- Selected option and its position in the list available separately, ready for any workflow
- 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 data source, the layout (row, column or grid), the colors of each state, and the click animation.
-
03
Connect to your workflows
Use the value changed event to capture the selected option, and read the exposed states to use them anywhere in your app.
INPUT 17
The option labels use Bubble's native font properties. The properties in this section control the radio itself and the label colors for each state.
General
Label placement
Side of the label relative to the radio.
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.
Radio size
Diameter of the radio, in pixels.
Click animation
Animation played on the radio when an option is clicked.
Animations are skipped automatically when the visitor's system asks for reduced motion.
Layout
Options layout
How the options are arranged.
Grid columns
Number of columns when the layout is grid.
Only used when the layout is grid. The vertical and horizontal layouts ignore it.
Options gap
Space between options, in pixels.
Unselected state
Radio bg color (unselected)
Radio background color when unselected.
Radio border color (unselected)
Radio border color when unselected.
Option font color (unselected)
Font color of the options. When empty, uses the element font color.
Hovered state
Radio bg color (hovered)
Radio background color on hover, when the input is enabled.
Radio border color (hovered)
Radio border color on hover, when the input is enabled.
Option font color (hovered)
Option font color on hover, when the input is enabled. Empty keeps the native font color.
Selected state
Radio bg color (selected)
Radio background color when selected.
Radio border color (selected)
Radio border color when selected.
Radio dot color
Border and dot color of the selected radio.
Option font color (selected)
Font color of the selected option. When empty, uses the option font color.
DATA SOURCE & DEFAULT DATA 7
Choices style
Sets how the options are sourced, either from a static list or a dynamic data source.
The mode decides which pair of fields is read: the static source and static default, or the dynamic source, caption field and dynamic default. The unused pair is ignored.
Type of choices
Sets the type of the options. Static choices are converted to this type, and dynamic choices and default values must match it.
Static choices
Static choices source (press Enter between each option)
Sets the list of static choices. Enter one option per line.
Default static value
Option selected on load and on reset (static choices).
The value must match one of the static choices exactly. Anything else leaves the group with no selection.
Dynamic choices
Dynamic choices source
Sets the list of dynamic choices.
Option caption
Sets which field to display as the option label for dynamic choices.
Default dynamic value
Option selected on load and on reset (dynamic choices).
The value must be present in the dynamic choices source. Anything else leaves the group with no selection.
INPUT BEHAVIOR 7
Disabled state
This input is disabled?
Disables the component, preventing any interaction.
While disabled, the group 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 radio button when disabled, from 0 to 1. The radio button 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 radios. The labels keep their 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 group and leaves it without a selection. 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)
Option 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 6
Values the element exposes for the rest of the page to read.
value
Selected option. Empty when nothing is selected.
value index
Position of the selected option, starting at 1. Empty when nothing is selected.
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 no option is selected. 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 a different option is selected or when the selection is 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 option, or clears the selection.
Focus no params
Focuses the selected option, or the first one.
Set value 2 params
Selects an option from a workflow. The value must be one of the current choices; empty clears the selection.
Apply even when disabled?
Yes applies the value even while the element is disabled. No makes the action do nothing in that state.
Value
Option to select. It must be one of the current choices; empty clears the selection.
FAQ 4
Does it work with Datatypes and Option Sets?
Yes. Set the choices style to dynamic, pick the type of choices, and point the source at your list. The caption comes from the field you choose, and the exposed value keeps the original type, so a Thing stays a Thing in your workflows.
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.