AI Cloze Passage
Fill-in-the-blank style prompt with inline variable inputs. Users complete a template by filling in highlighted blanks within the text.
Card Variant
Full card with template, variable reference, and preview
Fill-in-the-Blank Prompt
0/5 variables filled
Write a about for that is approximately words long.
Write a {{tone}} {{format}} about {{topic}} for {{audience}} that is approximately {{length}} words long.
Inline Variant
Compact fill-in-the-blank
Explain to a using examples.
Preview Variant
Side-by-side template and preview
Write a about for that is approximately words long.
Write a {{tone}} {{format}} about {{topic}} for {{audience}} that is approximately {{length}} words long.
Props
Component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
template* | string | — | Template text with {{variable_id}} placeholders |
variables* | ClozeVariable[] | — | Variable definitions matching template placeholders |
variant | 'card' | 'inline' | 'preview' | 'card' | Display variant |
onSubmit | (filledText: string, values: Record<string, string>) => void | — | Callback when submitted |
onVariableChange | (variableId: string, value: string) => void | — | Callback when a variable changes |
loading | boolean | false | Whether submission is loading |
showPreview | boolean | true | Show preview of filled template |
Usage
Import and examples
import { AIClozePassage } from '@/blocks/ai-conversation/ai-cloze-passage'
<AIClozePassage template="Write a {{tone}} {{format}} about {{topic}}." variables={[ { id: 'tone', label: 'Tone', options: ['casual', 'formal'] }, { id: 'format', label: 'Format', options: ['blog', 'article'] }, { id: 'topic', label: 'Topic', placeholder: 'your topic' }, ]} onSubmit={(filledText, values) => console.log(filledText)}/>Built With
2 componentsThis block uses the following UI components from the design system:
Features
Built-in functionality
- Inline blanks: Variables rendered as inline inputs within text flow
- Select or text: Variables support dropdown options or free-text input
- Live preview: Real-time preview of filled template
- Copy support: Copy filled template to clipboard
- Reset: Reset all variables to defaults
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
Inline inputs have associated labelsFilled/unfilled state indicated by colorKeyboard Navigation
| Key | Action |
|---|---|
| Tab | Navigate between blank fields |
| Enter | Submit filled template |
Notes
- Input width adapts to content length
- Color coding distinguishes filled vs empty blanks