shadcn.io is not affiliated with official shadcn/ui
Diverging Bar Survey Results Reviews Block for Ark UI
Four survey statements as cells with overshoot, each with a diverging five-step agree and disagree bar, a rolling percent that agree, the number of answers and three written answers behind a Collapsible, re-derived by a toggle between everyone and long-time subscribers.
Installation
Overview
A survey results block for React with Ark UI, for Mantlefield, a fictional weekly meal kit asking its customers four questions after a delivery. A centred header, a two-way toggle (Everyone, or Subscribed 3 months or more) and a key of the five steps sit over four question cells with overshoot, two across and one on a phone. Each cell gives its statement, the share who agree as a rolling figure with the number of answers, and a diverging five-step bar: the disagree steps run to the start of a centre line, the agree steps to the end and neutral straddles it, all on one scale so the cells compare. A Collapsible in each cell reads three written answers. Switching the toggle re-derives every bar and figure from the typed counts at the top of the file. The written answers are typed examples and do not change with the toggle. It's built from Toggle Group, Collapsible, Sliding Number and Guides.
FAQ
Where do the percentages come from?
Each statement in QUESTIONS has its answers counted by step for two groups, subscribers of three months or more and newer ones; Everyone adds the two. The five shares are whole percentages that add up to exactly 100 by the largest remainder method, "agree" is the last two steps, and the number of answers is the sum of the counts. Change a count and the bar, the figure and the text follow.
How does the diverging bar work?
The centre line sits at the middle of neutral. The two disagree steps run towards the start from it and the two agree steps towards the end, so bars with more agreement reach further along one side. All eight bars (four statements, two segments) share one scale, the widest reach rounded up to ten points, so you can compare cells by eye. The five steps differ by weight, not colour, and are named in the key.
How does the toggle work?
It is a single-choice group of buttons: Tab reaches it, the arrow keys move between the two choices and Space or Enter picks one. One is always chosen. The bars slide to their new places and the percentages roll, unless reduced motion is on.
The group takes a value list or string and a change handler that reads the new value.