GCS Studios
Full and Half Ratings
Any scale from 1 to 10 icons, with half values when a whole point is too coarse for what you are measuring.
Why use this?
Built for what Bubble does not cover.
Bubble has no native star rating. There is an official Bubble plugin, Bootstrap Star Rating Input, but that element has no effects, no finer control and no events.
Key features 6
A Label per Rating
Give each rating its own wording, shown next to the icons and exposed to your workflows alongside the number.
Icons Your Way
Star, heart, circle or thumb up, outlined or solid when empty, with independent colors for the empty, hovered and filled 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 Rating
- Full or half ratings, from 1 to 10 icons
- Labels for each rating, such as Terrible, Bad, OK, and Great
- Optional value label (4.5 / 5)
- Click the current rating again to clear it
Fully Customizable
- 20+ properties for complete visual and behavioral control
- Custom rating icons, such as stars, hearts, and thumbs, with outline or solid empty icons
- Filled, empty, and hover colors, size, and spacing
- 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
- Hover preview before clicking
- Keyboard ready with Tab, arrows, Home, and End
- 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 the rating, its label, 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 maximum rating, half values, the icon and its colors, and the value labels.
-
03
Connect to your workflows
Use the value changed event to react when a rating is picked, and read the exposed states to use them anywhere in your app.
INPUT 14
The label uses Bubble's native font properties. The properties in this section control the icons themselves and their colors for each state.
General
Maximum rating
Number of icons (1 to 10).
Between 1 and 10 icons. Values outside that range are clamped.
Allow half values?
Lets the user pick half icons (3.5).
With half values on, each icon has two click zones and the arrow keys move half a point at a time.
Click again to clear?
Clicking the current rating again clears it.
Leave it on so the user can undo a rating without a separate clear button. Home clears it from the keyboard either way.
Click animation
Animation played on the icon when it is clicked.
Animations are skipped automatically when the visitor's system asks for reduced motion.
Icons
Icon
Icon used for the rating.
Icon size
Size of each icon, in pixels.
Icon gap
Space between icons, in pixels.
Labels
Label type
Which label is shown next to the icons: none, the rating as a number, or your own label for that value.
Custom labels
One label per value, from 1 up, separated by a comma or a line break (Terrible, Bad, OK, Good, Great). Used when the label type is custom. Accepts a dynamic expression, so the labels can come from data or from a translation.
One label per value, in order, starting at the lowest rating, separated by a comma or a line break. A value with no label shows nothing. With half values on, write an entry for each half step too.
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.
Empty state
Icon style (empty)
Empty icons as outlines, or as the solid icon in the empty color.
Icon color (empty)
Color of the icons that are not selected.
Hovered state
Icon color (hovered)
Color of the icons under the mouse before clicking.
Filled state
Icon color (filled)
Color of the selected icons.
DEFAULT DATA 1
Default value
Rating applied on load and on reset.
INPUT BEHAVIOR 5
Disabled state
This input is disabled?
Disables the component, preventing any interaction.
While disabled, the rating 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 icons when disabled, from 0 to 1. The icons keep the colors of the current rating, so a filled rating still reads as filled. The value label is not affected and uses Input font color (disabled).
The opacity applies only to the icons. The value label keeps its own disabled font color.
Input font color (disabled)
Value label 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 rating and leaves it empty. Read is valid to block a submit.
Icon color (invalid)
Input border color when invalid.
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 rating. Empty when not rated.
value label
Label of the selected rating, from Value labels. Empty when there is no label.
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 the rating is 0. 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 rating is picked, cleared, or 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 rating, or clears it.
Focus no params
Focuses the rating.
Set value 2 params
Sets the rating 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 rating; an empty value or 0 clears the rating. Values outside the range or off the step are adjusted.
FAQ 4
Can the user undo a rating?
Yes, when click again to clear is on. Clicking the current rating a second time clears it, and pressing Home does the same from the keyboard, so no extra button is needed.
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.