Interactive Components
Interactive components create answers, submissions, bookings, payments, timers, and step-by-step flows.
Questions
Use Question.Select, Question.Open, Question.Match, Question.Fill, Question.Sort, and Question.Voice for quiz-style interactions.
Prop⇅
Type⇅
Notes⇅
id
string
Stable interaction ID.
prompt
string
Question text.
explanation
string
Optional feedback or explanation.
answer
string or expression
Correct answer where supported.
options, left, right, items
expression
Choice or matching data.
required, visibleWhen, requiredWhen, disabledWhen
boolean or expression
Form behavior.
triggers
expression
Optional action triggers.
Single choice
Which syntax adds a Docmino component?
Open question
What should component IDs be?
Match columns
Match each component to its use.
Fill in blanks
Use [blank] props to reveal content based on answers.
Build sentence
Put the publishing flow in order.
Validate
Publish
check
Spot
Voice input
Say the word Docmino.
Docmino
<Question.Select
id="interactive-question-select"
prompt="Which syntax adds a Docmino component?"
options={["JSX", "CSV", "SQL"]}
answer="JSX"
/>
<Question.Open
id="interactive-question-open"
prompt="What should component IDs be?"
answer="stable"
/>
<Question.Match
id="interactive-question-match"
prompt="Match each component to its use."
left={["Poll", "Timer"]}
right={["Collects a choice", "Tracks time"]}
/>
<Question.Fill
id="interactive-question-fill"
prompt="Complete the sentence."
text="Use [blank] props to reveal content based on answers."
answer={["conditional"]}
/>
<Question.Sort
id="interactive-question-sort"
prompt="Put the publishing flow in order."
items={["Validate", "Publish", "Spot check"]}
answer={["Validate", "Publish", "Spot check"]}
/>
<Question.Voice
id="interactive-question-voice"
prompt="Say the word Docmino."
language="en"
answer="Docmino"
/>
Poll
Use Poll when there is no correct answer.
What should this guide cover next?
<Poll
id="interactive-poll"
prompt="What should this guide cover next?"
options={["Examples", "Best practices", "Troubleshooting"]}
multiple
/>
Timer
Use Timer for timed activities.
Read the prompt
01:00
<Timer
id="interactive-timer"
label="Read the prompt"
seconds={60}
/>
Booking
Use Booking for appointment selection.
Book a session
June 2026
SunMonTueWedThuFriSat
<Booking
id="interactive-booking"
label="Book a session"
duration={30}
timezone="America/New_York"
schedule={{ monday: [{ start: "09:00", end: "12:00" }] }}
/>
Payment
Use Payment when a doc needs to collect payment.
Pay deposit$2,500.00
<Payment
id="interactive-payment"
label="Pay deposit"
price="$25.00"
amount={2500}
currency="USD"
/>
Steps and Submit
Use Steps for guided flows and Submit to persist the completed form.
Review the details, then submit.
1 of 2
<Steps>
<Steps.Item id="interactive-step-one" label="Details">
<Input.Text
id="interactive-step-name"
name="name"
label="Name"
value=""
/>
</Steps.Item>
<Steps.Item id="interactive-step-two" label="Confirm" previous="interactive-step-one">
Review the details, then submit.
<Submit id="interactive-submit" label="Submit guide" submit="default" />
</Steps.Item>
</Steps>