shadcn.io is not affiliated with official shadcn/ui
Form Analytics Dashboard Block for React
A seven-field sign-up form drawn in greyscale with a bar in each row for the share who quit there; choose a field to read who reached it, the median time, corrections and its top error message.
Installation
Overview
See which field of a form loses people, with this form analytics panel for React with Base UI. A hairline frame with a plus mark on each corner holds the form itself, drawn in greyscale: a label and an empty box for each of seven fields (Full name, Work email, Password, Company name, Team size, Phone number and Promo code), and in the margin of each row a bar for the share of people who reached that field and quit there. The rows are a native radio group, so you can click a field or move with the arrow keys, and the side cell reads the chosen one: how many reached it, how many quit, the median time, how many corrected it and the error message people met most. A Toggle Group in the header switches between Desktop and Mobile and everything is read again. It's built from Toggle Group and Guides. For product, growth and design reviews.
FAQ
How do I fill it with my form?
Edit FIELDS and DEVICES. A field has its label, the kind of box drawn for it, the error message people saw most, and three numbers per device: sessions that quit there, sessions that corrected it and the median seconds spent. A device has the sessions that started the form. How many reached each field is worked out by taking the quits of every field before it off the start, so the counts can't disagree.
What does a bar measure?
The quits at a field divided by the people who reached it, not by everyone who started. That keeps a late field from looking harmless just because fewer people got there. Both devices draw to one scale, so the bars grow and shrink when you switch.
How do I move between fields with the keyboard?
The rows are one radio group: Tab lands on the chosen field and the arrow keys move to the next or previous one, reading it as you go. The ring shows on the row, and a polite line announces the field, the device and the share who quit.
What stays local, and how do I wire it for real?
Everything: the counts are typed for a fixed 28 days and nothing is recorded. To make it real, log a focus, an edit, a blur and an error per field in your form, aggregate by field and device, and replace the typed arrays. The drawn boxes need no data, only the kind of each field.