Conditional Branch

Open in playground

Binary or four-way choice that reveals a tailored follow-up per path. Lets the assistant fork an interview on the first answer instead of asking everything of everyone.

Preview

Do you have existing users?

Your answer shapes the next question.

↑↓to pick a branchEnterto open follow-up⌘ Enterto submitEscto skip

Usage

import { ConditionalBranch } from "@/components/socratic-ui/conditional-branch";

const [value, setValue] = useState({ selectedId: null, followUpValue: null });

<ConditionalBranch
  question="Do you have existing users?"
  options={[
    {
      id: "yes",
      title: "Yes",
      followUp: {
        kind: "single-select",
        question: "Roughly how many active users?",
        options: [{ title: "< 100" }, { title: "100–1k" }],
      },
    },
    {
      id: "no",
      title: "No",
      followUp: {
        kind: "text",
        question: "Who's your initial target audience?",
      },
    },
  ]}
  value={value}
  onChange={setValue}
/>

API Reference

Prop	Type	Default
`question`required The headline shown above the branch options.	`string`	`—`
`subtitle` Optional supporting copy beneath the question.	`string`	`—`
`options`required 2–4 primary branch options. Each can carry an optional follow-up (`single-select` or `text`) that appears beneath the picked branch.	`{ id: string; title: string; subtitle?: string; followUp?: FollowUp }[]`	`—`
`value`required The primary selection and its associated follow-up answer. Switching branches clears the follow-up.	`{ selectedId: string \| null; followUpValue: string \| null }`	`—`
`onChange`required Called whenever the branch or follow-up answer changes.	`(value: { selectedId: string \| null; followUpValue: string \| null }) => void`	`—`
`number` Optional leading question number, e.g. "01".	`string`	`—`
`motion` Opt-in entrance animation config. Omit for static rendering; pass `{ enabled: true }` (or a preset from `motion.ts`) to animate in on mount.	`SocraticMotion`	`—`