Shared Rating Input Debug Surface

Use this local page to validate the shared rating input across whole-step, half-step, clearable, custom-icon, and locked-state configurations while inspecting the serialized form payload.

Whole steps

Default five-star field

Start with the standard five-choice rating field, complete with form submission, tooltips, and per-icon labels.

Overall quality

A straightforward five-star control for review, satisfaction, or service scoring flows.

Each star keeps the shared hidden input in sync, so server-side validation can treat it like any other field.

Selected value: No selection
Submitted value: No selection
ARIA value: No selection
Interaction mode: Interactive

Floating values

Fractional and clearable rating

This variant mirrors Quasar-style floating ratings with half-step selection and reset-on-repeat behaviour.

Experience score

Half-step mode lets pointer position choose between a half rating and a full rating on the same icon.

3.5

Click the same selected value again to clear it and inspect how the serialized payload drops back to an empty state.

Selected value: No selection
Submitted value: No selection
ARIA value: No selection
Interaction mode: Interactive

Behaviour: Half-step selection, clearable reset, and no-dimming visual feedback.
Configuration: Step 0.5, clearable true, noDimming true.

Custom icons

Expanded range with heart icons

Switch the icon family, expand the scale, and intensify the palette without changing the shared field contract.

Customer delight

This variant swaps stars for hearts, raises the max to seven, and styles the leading value badge to prove the shared API can brand both the scale and the live score display.

5.5

Array-based color classes and badge classes let later choices intensify without changing the component markup.

Selected value: No selection
Submitted value: No selection
ARIA value: No selection
Interaction mode: Interactive

Locked modes

Readonly and disabled states

Check how the same component behaves when interaction is frozen but the current score still needs to be displayed clearly.

Empty start

This sample starts without a selected value so the leading badge should render a dash until a score is chosen.

Readonly snapshot

Readonly keeps the current score visible and submittable without allowing further interaction.

4.5

Disabled field

Disabled keeps the visual state visible, can hide the leading badge, and still drops the hidden input from native form submission.

2.5

Selected value: No selection
Submitted value: No selection
Interaction mode: Interactive

Selected value: No selection
Submitted value: No selection
Interaction mode: Read only

Selected value: No selection
Submitted value: No selection
Interaction mode: Disabled

Payload inspector

Inspect serialized rating values

Each interaction updates the same hidden-input payload that a native form submission would send to the backend.

{}