Goals / Non-Goals

Open in playground

Paired list builder. For every goal, name a non-goal — the symmetry is the whole point. Classic framing tool for scoping a product spec.

Preview

Goals & non-goals

For each goal, name a non-goal — what you're explicitly choosing not to do.

GoalNon-goal

2 complete pairs

Usage

import { GoalsNonGoals } from "@/components/socratic-ui/goals-non-goals";

const [value, setValue] = useState([]);

<GoalsNonGoals
  question="Goals & non-goals"
  subtitle="For each goal, name a non-goal."
  value={value}
  onChange={setValue}
  maxPairs={5}
/>

API Reference

Prop	Type	Default
`question`required The headline shown above the pair list.	`string`	`—`
`subtitle` Optional supporting copy beneath the question.	`string`	`—`
`value`required Controlled list of pair rows. Includes partial / in-progress rows — use response parsing to drop incomplete pairs.	`{ goal: string; nonGoal: string }[]`	`—`
`onChange`required Called whenever the user types, adds, or removes a pair.	`(value: { goal: string; nonGoal: string }[]) => void`	`—`
`goalPlaceholder` Placeholder for the goal input.	`string`	`—`
`nonGoalPlaceholder` Placeholder for the non-goal input.	`string`	`—`
`maxPairs` Upper bound on how many rows can be added (default 5).	`number`	`—`
`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`	`—`