shadcn.io is not affiliated with official shadcn/ui
Satisfaction Meter Reviews Block for Radix UI
A support-survey score whose definition you can change: a segmented control picks which scores count as satisfied, and a rolling percentage, a five-part bar with a bracket and five counted cells follow.
Installation
Overview
A satisfaction score for React with Radix UI, from the ticket survey of Wrenline, a fictional shared-inbox app. A centred header says what was asked, and a segmented control reads "Satisfied means 4-5, 5 only, 3-5". Under a rule, the score is a rolling percentage with a sentence ("640 of 800 answers are a 4 or a 5."); under it a five-part bar runs from rail to rail, one part per score and each as wide as its share of the answers, with a bracket over the parts that count and a tick wherever two parts meet. At the foot, five cells share their hairlines, one per score: its label, its share, its count of answers and the word "Counted" or "Left out". Change the definition and the figure rolls, the bracket slides, the parts that no longer count fade to a faint tint and their cells take a quiet tint, with no colour for good or bad. It is a horizontal meter, not a ring or a gauge. Five typed counts drive everything, with shares by the largest remainder method. It's built from Toggle Group, Sliding Number and Guides, with CSS transitions only.
FAQ
How do I use my own survey?
Edit SCORES at the top of the file: for each score from 1 to 5 a label and the count of answers. The shares, the satisfied count under each definition, the percentage, the bracket and the sentence are all worked out from those counts. Add or rename a definition in DEFINITIONS: it takes the lowest score that counts (from), a label for the control and the rule in words for the sentence. The parts of the bar are one per score, so a scale with a different number of steps is a matter of editing SCORES.
Do the shares add up to 100?
Yes. Each cell's share uses the largest remainder method, so the five shares always add up to exactly 100, and the bar's parts use the same numbers. The headline percentage is the true share of satisfied answers, rounded once, and with the sample counts it equals the sum of the satisfied cells' shares under every definition; with other counts the two can differ by a point, because a total of rounded numbers is not a rounded total.
How does the control work?
It is a single-choice Toggle Group: pick a definition and the rest follows. It always keeps one on, so pressing the chosen one again does nothing, and the arrow keys move between the three.
The group is type="single" with value={id}, and onValueChange receives the id (an empty string when the chosen item is pressed again, which is ignored).
What is the bar for, and is it readable without sight?
The bar and its bracket are a drawing: they show the proportions at a glance and are hidden from assistive technology. The same facts are in text: the sentence under the percentage (announced politely when it changes), and the five cells, each a term and its description, with the share, the count and whether the score counts. A bar on a fixed scale does not mirror in right-to-left layouts, so the low scores stay at the start of the reading order of a number line.
Why is nothing coloured?
Parts that count are your theme's text colour at full strength and the others a faint solid tint of it, so the meter reads the same in every preset, light and dark, and the page's primary colour stays free for its calls to action. The state is also in words ("Counted", "Left out"), never in a hue alone.