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.
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, including bounce, elastic and pop, that respect the user's reduced motion setting.
Accessible Experience
A real radio group: Tab reaches it, the arrow keys move between options, and it carries an accessible label and description.
Workflow Ready
Value changed event, Reset, Focus and Set value actions, and exposed states for the value, its index, 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 layout, the choices source, the 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 selected option or its index anywhere in your app.
DATA SOURCE & DEFAULT DATA 7
Choices style
dropdownSets how the options are sourced, either from a static list or a dynamic data source.
staticdynamic
defaultno default
Type of choices
app typeSets the type of the options. Static choices are converted to this type, and dynamic choices and default values must match it.
defaultno default
Static choices
Static choices source (press Enter between each option)
textSets the list of static choices. Enter one option per line.
defaultno default
optionalDefault static value
textOption selected on load and on reset (static choices).
defaultno default
optionalDynamic choices
Dynamic choices source
list dynamic valueSets the list of dynamic choices.
defaultno default
optionalOption caption
textSets which field to display as the option label for dynamic choices.
defaultno default
optionalDefault dynamic value
dynamic valueOption selected on load and on reset (dynamic choices).
defaultno default
optionalINPUT BEHAVIOR 7
Disabled state
This input is disabled?
yes/noDisables the component, preventing any interaction.
defaultno
Input opacity (disabled)
numberOpacity 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).
default0.5
Input font color (disabled)
colorInput font color when disabled.
default#CACACA
Required state
This input is required?
yes/noMarks the field as required and enables input validation.
defaultno
Input bg color (invalid)
colorInput background color when invalid (required with no value).
default#FFDEDE
Input border color (invalid)
colorInput border color when invalid (required with no value).
default#FF6666
Input font color (invalid)
colorOption font color when invalid (required with no selection). Empty keeps the native font color.
defaultno default
optionalACCESSIBILITY 2
Accessible label
textName read by screen readers. When empty, uses the placeholder or the visible label.
defaultno default
optionalAccessible description
textHint read by screen readers after the name. Empty for none.
defaultno default
optionalStates 6
Values the element exposes for the rest of the page to read.
value
dynamic valueSelected option. Empty when nothing is selected.
value index
numberPosition of the selected option, starting at 1. Empty when nothing is selected.
is clickable
yes/noTrue when the component is not disabled.
is required
yes/noTrue when the input is marked as required.
is valid
yes/noTrue when the field is not required, or when it is required and has a valid value.
is focused
yes/noTrue 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
eventTriggered 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 1 param
Selects an option from a workflow. The value must be one of the current choices; empty clears the selection.
Value
dynamic valueOption to select. It must be one of the current choices; empty clears the selection.
defaultno default
optionalFAQ 5
Why use NWD Radio Buttons instead of the native Bubble radio buttons?
The native element gives you almost no control over the layout or the look of each option, and its appearance drifts between browsers. This plugin renders its own radios, arranges them in a row, a column or a grid, and looks the same everywhere.
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 radio groups?
Yes. The visual properties support Bubble's predefined styles, so the layout, the colors, the size and the animation can be saved once and reused on every radio group in the app.