Conversational Mode
Typeform-style one-question-at-a-time form experience with animations
Overview
Conversational Mode shows one field at a time with smooth animations, a progress bar, and keyboard-first navigation. Ideal for surveys, onboarding, and marketing forms where higher completion rates matter.
Basic Usage
<Form initialValue={data} onSubmit={handleSubmit}>
<ConversationalMode showProgress showQuestionNumber>
<Form.Field.String name="name" label="What's your name?" />
<Form.Field.String name="email" label="Your email?" />
<Form.Field.YesNo name="subscribe" label="Subscribe to updates?" />
</ConversationalMode>
</Form>Each child element becomes one step. The user sees one field at a time and navigates with Enter or buttons.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
showProgress | boolean | true | Show progress bar |
showQuestionNumber | boolean | true | Show "Question 3 of 7" |
nextLabel | string | 'Далее' | Next button text |
prevLabel | string | 'Назад' | Previous button text |
submitLabel | string | 'Отправить' | Submit button text (last step) |
welcomeScreen | ReactNode | — | Content before first question |
completedScreen | ReactNode | — | Content after last question |
onComplete | () => void | — | Called when all questions answered |
Keyboard Navigation
| Key | Action |
|---|---|
| Enter | Next question |
| Alt + Arrow Down | Next question |
| Alt + Arrow Up | Previous question |
Custom Hook
For building your own conversational UI:
import { useConversationalState } from '@letar/forms'
const state = useConversationalState(5) // 5 fields
state.currentIndex // 0
state.progress // 0.2
state.next() // go to next
state.prev() // go to previous
state.isCompleted // falseLive Example
Try the interactive example on forms-example.letar.best.