Sample
Steps
*
*
1 of 2
Steps.Item
1 of 2
Input.Text
*
Input.TextMasked
Input.TextArea
Input.Select
Input.Checklist
I agree to the terms
Input.Dropdown
Input.Number
Input.NumberMasked
Input.Slider
50
Input.Counter
1
Input.Rating
Input.Year
Input.Month
Input.Date
Input.Time
Input.DateTime
Input.Signature
Input.Color
Input.Upload
Submit
Result
Total
$0 USD
Poll
Which frontend framework do you use most?
Callout.Info
Just so you know
This is an informational note.
Callout.Warning
Warning
Be careful with this step.
Callout.Tip
Tip
Here is a helpful tip.
Callout.Danger
Danger
This action cannot be undone.
Callout.Note
Note
Additional context goes here.
Dialog
Timer
Countdown Timer
00:30
Booking
Book an appointment
June 2026
SoleilLunMarÉpouserJeuVenAssis
Question.Select
Curseur
What is the capital of France?
Musique Conseils de composition
Select the prime numbers
Question.Open
Option 1, Option 2, Option 3
What is when ?
Question.Match
Science des matériaux
Match the countries with their capitals
Question.Fill
Littéralité financière
The quick brown fox
jumps
over the lazy
dog
Question.Sort
Construire une phrase
Arrange the words to form a famous quote
for
be
be
to
not
here
to
or
Question.Voice
Propriétés des ondes
Hello world
HelloWorld
Map
San Francisco
Payment
Course access$4.99
Media.Image
Media.Video
Media.Audio
Media.File
Media.Link
Formatting.Highlight
Use red highlight, orange highlight, yellow highlight, green highlight, blue highlight, and purple highlight to call out key ideas.
Formatting.TextColor
Use red text, orange text, yellow text, green text, blue text, and purple text to reinforce status or meaning.
Formatting.Bold
Use bold text for strong emphasis.
Formatting.Italic
Use italic text for gentle emphasis or voice.
Formatting.InlineCode
Use npm test -- -t "should render" to run one test.
Formatting.CodeBlock
const greeting = "Hello, Docmino";
console.log(greeting);
Latex
Here is an inline equation: .
Lift() can be determined by Lift Coefficient () like the following
equation.
Speech
Embed.YouTube
Sample video
Embed.Gist
Code snippet
Layout.Tabs
Overview
Code
FAQ
Short introduction and goals.
Layout.Accordion
Section 1
Section 2
Layout.Carousel
Layout.Row
Card 1
Concise supporting content for the first card.
Card 2
A second card keeps the horizontal layout clear.
Card 3
Add a third card to show scrolling behavior.
Layout.Columns
Column 1
Group related details together in the first column.
Column 2
Use the second column for parallel content or comparison.
Table
a⇅
b⇅
c⇅
d⇅
1
2
3
4
5
6
7
8
9
10
11
12
Data.Inline
Monthly revenue
month⇅
revenue⇅
Jan
5000
Feb
7000
Mar
6000
Data.Hidden
Chart.Area
このグラフを駆動するデータコンポーネントを選択してください。
Chart.Bar
Monthly revenue
month⇅
revenue⇅
Jan
5000
Feb
7000
Mar
6000
このグラフを駆動するデータコンポーネントを選択してください。
Chart.Line
Visitors
day⇅
visitors⇅
Mon
200
Tue
450
Wed
300
このグラフを駆動するデータコンポーネントを選択してください。
Chart.Pie
Product mix
product⇅
sales⇅
Product A
40
Product B
30
Product C
30
このグラフを駆動するデータコンポーネントを選択してください。
Task
- to do
- done
Footnote
A note1
Autolink
www.example.com, https://example.com, and contact@example.com
Conditional.visibleWhen
Conditional.disabledWhen
Conditional.requiredWhen
Trigger.Webhook
Trigger.Email
Which launch session will you attend?
Trigger.PushNotification
Curseur
Did you complete today's workout?
Trigger.Integration
Workshop access$2.99
Footnotes
1.
Big note. ↩