NWD Star Rating (Full/Half/Labels)

Key features 6

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.

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

Accessible Experience

Keyboard ready with Tab, the arrow keys, Home and End, announced as a slider with 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 rating, its label, 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 maximum rating, half values, the icon and its colors, the value label, 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 rating or its label anywhere in your app.

RATING 14

The label uses Bubble's native font properties. The properties in this section control the icons themselves and their 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

Maximum rating

number

Number of icons (1 to 10).

default5

Allow half values?

yes/no

Lets the user pick half icons (3.5).

defaultno

Click again to clear?

yes/no

Clicking the current rating again clears it.

defaultyes

Click animation

Animation played on the icon when it is clicked.

none
bounce
elastic
jelly
pop
pulse

defaultbounce

Icons

Icon

Icon used for the rating.

star
heart
circle
thumb up

defaultstar

Icon size

number

Size of each icon, in pixels.

default24

Icon gap

number

Space between icons, in pixels.

default4

Labels

Label type

Which label is shown next to the icons: none, the rating as a number (4.5 / 5), or the custom label for that value. With custom, a value that has no label in the list shows nothing.

none
number
custom

defaultnone

Custom labels

text

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.

defaultno default

optional

Stretch label to fill the line?

yes/no

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

Empty state

Icon style (empty)

Empty icons as outlines, or as the solid icon in the empty color.

outline
solid

defaultoutline

Icon color (empty)

color

Color of the icons that are not selected.

default#D9D9D9

Hovered state

Icon color (hovered)

color

Color of the icons under the mouse before clicking.

default#FFD54F

Filled state

Icon color (filled)

color

Color of the selected icons.

default#FFC107

DEFAULT DATA 1

Default value

number

Rating applied on load and on reset.

defaultno default

optional

INPUT BEHAVIOR 5

Disabled state

This input is disabled?

yes/no

Disables the component, preventing any interaction.

defaultno

Input opacity (disabled)

number

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

default0.5

Input font color (disabled)

color

Value label font color when disabled.

default#CACACA

Required state

This input is required?

yes/no

Marks the field as required and enables input validation.

defaultno

Icon color (invalid)

color

Input border color when invalid (required with no value).

default#FF6666

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 6

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

value

number

Selected rating. Empty when not rated.

value label

text

Label of the selected rating, from Value labels. Empty when there is no label.

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

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

Sets the rating from a workflow.

Value

number

New rating. Values outside the range or off the step are adjusted, and 0 clears the rating.

defaultno default

FAQ 5

Why use NWD Star Rating instead of building a rating by hand?

Bubble has no rating input. Building one means a repeating group of icons, a custom state and a workflow per icon, and half values are close to impossible. This plugin is a single element that handles the hover preview, the half steps and the keyboard for you.

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

Yes. The visual properties support Bubble's predefined styles, so the icon, its size and gap, the colors of each state and the animation can be saved once and reused on every rating in the app.