Onboarding survey
ProA post-signup onboarding survey where each question gets its own step of large option cards, picked with keys 1 to 4 and Enter. A short personalization checklist then ticks off and lands on an editable "You're all set" summary.
Live block · sample data
- Post-signup personalization: role, team size and first action before the first screen.
- Short in-product surveys where every answer changes what someone sees next.
- Re-onboarding when a workspace changes plan or adds a team.
- Long forms with free text or many fields; use a regular form or import-wizard.
- Guided tours over the real interface; use onboarding-tour.
- A single choice inside a settings page; use radio-cards.
Installation
Pro source and install commands unlock with a Pro plan.
Usage
Drop it in right after sign-up and pass your own `questions` (two to four options each, with 16px icons or mono brand marks). Store picks from `onAnswer` as they happen. Put your real setup work in `personalize(answers, signal)`: the last checklist item waits for it, and if it rejects, the card shows the error with Try again. Route on with `onComplete(answers)`. `setupSteps` sets the checklist labels to match the answers. With no props it plays a sample run that stops on the first click or key press.
example.tsx
import { OnboardingSurvey } from "@/components/arc/blocks/onboarding-survey/onboarding-survey"; export function Welcome() { return ( <OnboardingSurvey questions={questions} onAnswer={(id, value) => analytics.track("onboarding_answer", { id, value })} personalize={async (answers, signal) => { await fetch("/api/workspace/personalize", { method: "POST", body: JSON.stringify(answers), signal }); }} onComplete={() => router.push("/inbox")} /> );}Built fromButtonKbdTextShimmer
OnboardingSurvey
A post-signup survey card: one question per step on large option cards, a slim progress bar, keys 1 to 9 and Enter, then a personalization checklist that lands on an editable summary. With no props it plays a sample run until someone interacts.
PropTypeDefaultDescription
questionsOnboardingSurveyQuestion[]onboardingSurveySampleQuestionsOne question per step: { id, title, description?, label?, options: { value, label, description?, icon? }[] }. Two to four options read best; label names the summary row.defaultAnswersRecord<string, string>–Answers to start from, keyed by question id. Start over resets to these.setupStepsstring[] | (answers) => string[]–Checklist labels for the personalization step. Defaults to steps derived from the sample answers, or three generic steps for custom questions.personalize(answers, signal: AbortSignal) => Promise<void>–Your real setup work, started when the last question is answered. The last checklist item waits for it; a rejection shows its message with Try again. The signal aborts when the person goes back or the card unmounts.onAnswer(questionId, value: string | undefined, answers) => void–Fires on every pick. value is undefined when a question is skipped.onComplete(answers) => void | Promise<void>–Runs when the finish button is pressed; the button shows a spinner while a returned promise is pending. Without it the finish is simulated.autoPlaybooleantrue for the sample questionsPlays a sample run (number key, then Enter) and loops. Stops for good on the first pointer or key press, pauses off screen and never runs with reduced motion.doneTitlestring"You're all set"Title of the final step.doneDescriptionstring"Your workspace is ready. Change any answer below."Line under the final title.finishLabelstring"Open workspace"Label of the finish button.aria-labelstring"Onboarding survey"Accessible name of the card.classNamestring–Extra class on the card.- 1 to 9
- Pick the matching option on the current question.
- Enter
- Continue once an option is picked.
- Arrow keys
- Move between options in the radio group and pick as you go.
- Tab
- Move through the selected option, Skip, Back and the main action.
- Space
- Pick the focused option or press the focused button.
- Each question is a radiogroup labelled by its title; options are radios with aria-checked and aria-keyshortcuts, and one roving tab stop.
- The progress bar is a progressbar with a percentage value.
- A polite live region announces picks, the next question, setup progress and the result, including "Simulated, nothing was saved" in the demo.
- When a step changes, focus moves to the new step's selected or first option so keyboard flow never drops to the page.
- Checklist rows pair every state with an icon and text: a spinner, a check with a hidden Done label, or an alert with Failed.
- Hidden controls (Back on the first question, Skip after the last) keep their space but leave the tab order and accessibility tree.
- Steps crossfade: the old step fades out in 100ms while the new one fades in over 160ms with a 2px rise.
- The stage springs to the incoming step's measured height with no bounce, so the footer glides instead of jumping.
- The progress fill scales from the left with a bounce-free spring; option checks and checklist icons swap with a short scale and fade.
- Number keys and Enter press their key caps and the main button for 150ms, so pointer and keyboard both get instant feedback.
- Reduced motion keeps the crossfades and end states, drops the rise, the height spring and the sample loop.
- Up to 560px wide. Above 440px the options sit in a 2 by 2 grid of cards; below, each option becomes one compact row with icon, label, description and key.
- Labels and descriptions truncate with an ellipsis instead of wrapping, so every option keeps one height.
- Holds at 360px with 16px padding and no horizontal scroll; touch targets stay at least 40px tall.
- One component with local state; only the current step is mounted, plus the outgoing one during its 100ms fade.
- The sample run uses a single timeout at a time and pauses when the card leaves the viewport.
- Brand marks are inline SVG; no images or network requests.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use right after sign-up to collect two to four answers that change the first screen. Keep each question to four options so keys 1 to 4 and the 2 by 2 grid hold.
- Pass personalize for the real work (create views, seed templates, invite flow) and keep setupSteps labels specific to the answers.
- Store answers from onAnswer as they come so a skipped or abandoned survey still informs the workspace.
- Option icons are 16px; lucide icons at strokeWidth 1.75 and mono brand marks in currentColor match the sample.
The full library index for assistants is at /llms.txt.