shadcn.io is not affiliated with official shadcn/ui
Feedback Survey Onboarding Block for Radix UI
A one-question survey in a non-modal popover under a Quick question tab on a drawn app bar, with six radio answers, a text box for Other that is always there, and a sentence that says what the answer does.
Installation
Overview
Ask where new sign-ups came from without taking over the screen, with this survey popover for React with Radix UI. It belongs to Askfield, a pre-launch waitlist tool, and opens from a Quick question tab on a drawn app bar over a waitlist overview. The Popover asks “How did you hear about us?” with six native radio rows (Search, Social, A friend, A blog, An event and Other) and a Textarea that is always there: it switches on when Other is picked, so the popover keeps its height. A sentence says what Askfield will do with the answer. Send is the one Shine Button; once sent the popover closes and the tab reads Answered. Not now closes it and puts focus back on the tab. Nothing is sent. For preview the popover is drawn open in place when the page loads; the tab opens the real Popover with the same content.
FAQ
Why is the popover already open, and what do I keep?
So you can see it without a click. On load the popover is a copy drawn in place under the tab: a native dialog element that isn't modal, so nothing is trapped, hidden or focused. The tab opens the real Popover, non-modal, with Escape and focus returning to the tab, and the copy stays closed until a reload. Both show the same SurveyBody and the same state. In your app keep the Popover and drop the copy: the "in-place" state, the dialog and its Escape effect.
How does Other work without moving anything?
The text box is always in the popover, switched off until Other is picked, so the popover has the same height whichever answer is chosen. With Other picked, Send asks for a few words if the box is nearly empty and puts focus in it; the typed text is also quoted in the sentence.
What are the sentence and the status?
The sentence under the box says what Askfield will do with the picked answer. A hidden polite status says the same when a pick changes it, and says “Thanks. Nothing was sent in this demo.” after Send, “Pick one to send.” when nothing is picked, and when the popover closes. The tab's name follows: Quick question, then Answered.
What stays local in the demo, and how do I wire it?
Everything: Send keeps the answer in the block's state and says nothing was sent. In your app post source (and the text when it is other) to your server where send says so, close the popover when it succeeds and keep the tab as Answered. The typed “what we do with it” sentences are copy for the preview; replace them with what your product really does.