Attribution Survey

Onboarding27: Attribution Survey

Single-select "how did you find us" survey grid where choosing "Social media" reveals a row of multi-select platform chips, choosing "Other" reveals a free-text input, and submitting swaps the whole section for a check-icon thank-you screen.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/onboarding27?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/onboarding27?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/onboarding27.tsx and the badge, button, and input shadcn/ui primitives it depends on.

Quick start

The installed file exports onboarding27Demo alongside the block: the exact props behind the preview above. Spread it to get a working survey in one line.

import { Onboarding27, onboarding27Demo } from "@/components/beste/block/onboarding27";

export default function OnboardingPage() {
  return <Onboarding27 {...onboarding27Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Onboarding27 } from "@/components/beste/block/onboarding27";

export default function OnboardingPage() {
  return (
    <Onboarding27
      badge={{ label: "Quick Question", variant: "secondary" }}
      heading="How did you find us?"
      description="This helps us understand where our users come from."
      options={[
        { id: "search", label: "Google search" },
        {
          id: "social",
          label: "Social media",
          children: [
            { id: "social-x", label: "X (Twitter)" },
            { id: "social-linkedin", label: "LinkedIn" },
          ],
        },
        { id: "other", label: "Other", hasInput: true, inputPlaceholder: "Tell us more..." },
      ]}
      primaryButton={{ label: "Submit & Continue", href: "/setup/next" }}
      secondaryButton={{ label: "Skip", href: "/dashboard" }}
    />
  );
}

Props

type SurveyOption = {
  id: string;
  label: string;
  hasInput?: boolean;
  inputPlaceholder?: string;
  children?: { id: string; label: string }[];
};

Behavior notes

• Selecting an option is single-select and toggles off if you click the already-selected option again (selected === id ? null : id); switching to a different top-level option also clears any selected children via setSelectedChildren(new Set()).
• Options with children (like "Social media" in the demo) only reveal their pill-style multi-select chips once the parent option itself is selected; the children live in a separate Set<string> state (selectedChildren) tracked independently from the parent's single selection.
• Options with hasInput reveal a shadcn Input when selected, but the input is uncontrolled: nothing wires its value into component state, so a free-text answer typed there isn't actually captured anywhere before submit.
• primaryButton is disabled until selected is set. Clicking it doesn't navigate; it flips a local submitted boolean that replaces the entire section with a check-icon "thank you" screen using labels.thankYou. That screen's own button is hardcoded to the text "Continue" (it ignores primaryButton.label) but still uses primaryButton.href.
• Options that carry children or hasInput span both columns of the 2-column options grid (col-span-2); plain options stay single-column.