Fill Blank

Open in playground

A mad-libs style template with inline editable slots. The constraint of filling slots produces tighter answers than a freeform textarea.

Preview

Describe it in one sentence

Fill in the blanks — constraints spark clarity

I want to build a for that helps them .

Usage

import { FillBlank } from "@/components/socratic-ui/fill-blank";

<FillBlank
  question="Describe it in one sentence"
  template="I want to build a {what} for {who} that helps them {outcome}."
  slots={[
    { id: "what", placeholder: "product type" },
    { id: "who", placeholder: "audience" },
    { id: "outcome", placeholder: "outcome" },
  ]}
  value={pitch}
  onChange={setPitch}
/>

API Reference

Prop	Type	Default
`question`required The headline shown above the template.	`string`	`—`
`subtitle` Optional supporting copy beneath the question.	`string`	`—`
`template`required Sentence template with {slot-id} markers for each blank.	`string`	`—`
`slots`required Slot definitions. Each id must match a {slot-id} in the template.	`{ id: string; placeholder: string }[]`	`—`
`value`required Slot id → filled text map.	`Record<string, string>`	`—`
`onChange`required Called whenever a slot is edited.	`(value: Record<string, string>) => void`	`—`
`completeMessage` Success summary shown when every slot is filled.	`string`	`"Clear and scoped — that's a strong starting point."`
`number` Optional leading question number.	`string`	`—`