Quick Estimate

Open in playground

Two or three related single-select dimensions stacked vertically. Purpose-built for constraints that only make sense in pairs — budget + timeline is the canonical case.

Preview

Budget & timeline constraints

Set both dimensions to frame the scope of work.

Budget range

Timeline

Usage

import { QuickEstimate } from "@/components/socratic-ui/quick-estimate";

const [value, setValue] = useState<Record<string, string | null>>({});

<QuickEstimate
  question="Budget & timeline constraints"
  dimensions={[
    {
      id: "budget",
      label: "Budget range",
      options: [
        { title: "< $5k" },
        { title: "$5–20k" },
      ],
    },
    {
      id: "timeline",
      label: "Timeline",
      options: [
        { title: "2 weeks" },
        { title: "1 month" },
      ],
    },
  ]}
  value={value}
  onChange={setValue}
/>

API Reference

Prop	Type	Default
`question`required The overall headline above the stacked dimensions.	`string`	`—`
`subtitle` Optional supporting copy beneath the question.	`string`	`—`
`dimensions`required Two or three independent single-select lists. Each dimension has its own label and options.	`{ id: string; label: string; options: { title: string; subtitle?: string }[] }[]`	`—`
`value`required Map of dimension id to the title of the selected option (or null if unset).	`Record<string, string \| null>`	`—`
`onChange`required Called whenever a selection changes in any dimension.	`(value: Record<string, 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`	`—`