Metric Target

Open in playground

Pick a success metric, name a numeric target, pick a timeframe. The spec's "what good looks like" section in one gesture — the only component that combines a categorical pick with a numeric target.

Preview

Pick a success metric and target

The one number that tells you whether it worked.

Metric

Target

Timeframe

Usage

import { MetricTarget } from "@/components/socratic-ui/metric-target";

const [value, setValue] = useState({
  metricId: null,
  target: null,
  timeframe: null,
});

<MetricTarget
  question="Pick a success metric and target"
  metrics={[
    { id: "activation", label: "Activation rate", unit: "%", direction: "increase" },
    { id: "churn", label: "Churn", unit: "%", direction: "decrease" },
  ]}
  timeframes={["30 days", "90 days", "6 months"]}
  value={value}
  onChange={setValue}
/>

API Reference

Prop	Type	Default
`question`required The headline shown above the metric list.	`string`	`—`
`subtitle` Optional supporting copy beneath the question.	`string`	`—`
`metrics`required The selectable success metrics. `unit` shows next to the target input; `direction` drives the trend arrow.	`{ id: string; label: string; subtitle?: string; unit?: string; direction?: 'increase' \| 'decrease' }[]`	`—`
`timeframes` Selectable timeframe chips. Defaults to a quarterly-ish set if omitted.	`string[]`	`—`
`value`required The currently picked metric, target number, and timeframe.	`{ metricId: string \| null; target: number \| null; timeframe: string \| null }`	`—`
`onChange`required Called whenever any of the three fields changes.	`(value: { metricId: string \| null; target: number \| null; timeframe: string \| null }) => void`	`—`
`targetPlaceholder` Placeholder text for the numeric target input.	`string`	`—`
`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`	`—`