AI Paginated Prompt
AI
Authoring
Block
Step-by-step prompt wizard that breaks complex prompts into manageable steps with progress tracking and navigation.
Card Variant
Full card with step indicator and navigation
Content Generator Wizard
Step 1 of 3
Content
What do you want to create?
*
Inline Variant
Compact inline layout
Step 1: Content
*
Minimal Variant
Streamlined step-through experience
1/3
Content
What do you want to create?
*
Props
Component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
title* | string | — | Title of the wizard |
steps* | PromptStep[] | — | Steps of the prompt wizard |
variant | 'card' | 'inline' | 'minimal' | 'card' | Display variant |
onComplete | (values: Record<string, string>) => void | — | Callback when all steps completed |
onStepChange | (stepIndex: number) => void | — | Callback on each step change |
loading | boolean | false | Whether final submission is loading |
submitLabel | string | 'Generate' | Submit button text |
Usage
Import and examples
import { AIPaginatedPrompt } from '@/blocks/ai-conversation/ai-paginated-prompt'
<AIPaginatedPrompt title="Content Wizard" steps={[ { id: 'topic', title: 'Topic', fields: [{ id: 'topic', label: 'Topic', type: 'text', required: true }], }, { id: 'style', title: 'Style', fields: [{ id: 'tone', label: 'Tone', type: 'radio', options: ['Casual', 'Formal'] }], }, ]} onComplete={(values) => console.log(values)}/>Features
Built-in functionality
- Step navigation: Back/next navigation with clickable step indicators
- Per-step validation: Required field validation before advancing
- Step icons: Custom icons per step via Lucide icons
- Progress tracking: Visual step completion indicators
- Three variants: Card, inline, and minimal display modes
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
Step indicators are focusable and clickableCurrent step announced via textKeyboard Navigation
| Key | Action |
|---|---|
| Tab | Navigate between fields and buttons |
| Enter | Advance to next step or submit |
Notes
- Step completion shown via check icon
- Disabled navigation when required fields missing