Components

Components are the building blocks of your WhatsApp Flow screens. Each component serves a specific purpose — displaying text, collecting input, showing images, or navigating between screens.

This page is a complete reference for every component type, organized by category.

---

Text components

Display text content on the screen. Text components are read-only — customers see them but don't interact with them.

Heading

Large, bold text for screen titles and section headers.

Property	Details
Text	Max 80 characters
Visible when	Optional condition to show/hide

Subheading

Medium-weight text for sub-sections and secondary titles.

Property	Details
Text	Max 80 characters
Visible when	Optional condition to show/hide

Body

Regular paragraph text. Supports markdown formatting (bold, italic, links).

Property	Details
Text	Max 4,096 characters
Visible when	Optional condition to show/hide

Caption

Small, muted text for supplementary information and disclaimers. Supports markdown.

Property	Details
Text	Max 409 characters
Visible when	Optional condition to show/hide

Rich Text

Formatted text with full markdown support. Use this when you need more control over text formatting.

Property	Details
Text	Max 4,096 characters
Visible when	Optional condition to show/hide

📸

Screenshot: Text components in the flow builder showing Heading, Subheading, Body, Caption, and Rich Text on a screen

text-components.png

1. Add Heading, Body, and Caption components to a screen
2. Fill in sample text content
3. Capture the screen preview showing the text components
Save to: static/img/screenshots/developer-tools/whatsapp-flows/components/text-components.png

---

Media components

Display visual content on the screen.

Image

Show an image on the screen.

Property	Details
URL	Image source URL — max 2,048 characters
Scale type	cover (fills the area, may crop) or contain (fits entirely, may have whitespace)
Width	Image width
Height	Image height
Aspect ratio	Alternative to width/height — maintains proportions
Max per screen	3 images
Visible when	Optional condition to show/hide

Embedded Link

An inline text link. Useful for "Terms & Conditions" or "Privacy Policy" links.

Property	Details
Text	Link text — max 25 characters
URL	Link destination
Max per screen	2 links
Visible when	Optional condition to show/hide

---

Navigation components

Navigation List

A clickable list of items. Each item can trigger a navigation, data exchange, or data update action when tapped.

📸

Screenshot: Navigation List component showing a list of clickable items with titles and descriptions

navigation-list.png

1. Add a Navigation List component to a screen
2. Add 3-4 items with titles and descriptions
3. Capture the screen preview showing the list
Save to: static/img/screenshots/developer-tools/whatsapp-flows/components/navigation-list.png

Property	Details
Label	List header — max 80 characters
Description	Optional list description — max 300 characters
Items	1–20 items
Max per screen	2 navigation lists
Visible when	Optional condition to show/hide

Item properties

Each item in the list has:

Property	Max characters	Description
Image	100 KB	Optional image shown at the start of the item
Title	30	Main text shown to the customer
Description	20	Secondary text below the title
Metadata	80	Hidden value stored when the item is selected
End title	10	Optional text at the end of the item
Badge	15	Optional badge label — only one item per list can have a badge
Tags	15 per tag	Optional tags — up to 3 tags per item, 15 characters each

Item on-click actions

When a customer taps a navigation list item, one of these actions is triggered:

Action	Description
Navigate	Move to a specified screen
Data Exchange	Send data to your server and navigate based on the response
Update Data	Send data to your server and update the current screen

Each action can include a payload with ${form.field} and ${item.id}, ${item.title}, or ${item.description} references.

Data sources

Navigation List items can be populated from different data sources:

Source	Description
Static	Manually entered items — you define each item's title, description, and metadata
Initial Payload	Items from the initial payload data sent when the flow opens
Screen Data	Items populated dynamically by your server via data exchange

See Dynamic Data for details on configuring data sources.

---

Text answer components

Collect text and date input from customers.

Text Input (Short Answer)

A single-line input field for short text.

📸

Screenshot: Text Input components configured for name, email, and phone number

text-input.png

1. Add Text Input components configured for name (text), email (email), and phone (phone)
2. Capture the screen preview showing the input fields
Save to: static/img/screenshots/developer-tools/whatsapp-flows/components/text-input.png

Property	Details
Name	Field identifier — max 255 characters
Label	Display text — max 20 characters
Label variant	default or floating — floating labels move above the field when focused (v7.0+)
Input type	text, number, email, password, passcode, phone (see below)
Helper text	Hint below the field — max 80 characters
Error message	Custom validation error message — max 30 characters
Required	Whether the field must be filled
Pattern	Regex validation pattern (v6.2+)
Min characters	Minimum input length
Max characters	Maximum input length (default 80)
Initial value	Pre-filled default value — supports dynamic references like ${data.name}
Visible when	Optional condition to show/hide
Enabled when	Optional condition to enable/disable

Input types

Type	Keyboard	Use case
text	Standard	Names, addresses, general text
number	Numeric	Quantities, amounts, IDs
email	Email (with @)	Email addresses
password	Masked input	OTPs, codes, sensitive data
passcode	PIN-style	Verification codes
phone	Phone dialer	Phone numbers

Text Area (Paragraph)

A multi-line text input for longer content like comments, descriptions, or feedback.

Property	Details
Name	Field identifier — max 255 characters
Label	Display text — max 20 characters
Label variant	default or floating — floating labels move above the field when focused (v7.0+)
Helper text	Hint below the field — max 80 characters
Error message	Custom validation error message
Required	Whether the field must be filled
Max characters	Maximum input length (default 600)
Initial value	Pre-filled default value — supports dynamic references like ${data.feedback}
Visible when	Optional condition to show/hide
Enabled when	Optional condition to enable/disable

Date Picker

A date selector that opens a calendar popup.

Property	Details
Name	Field identifier — max 255 characters
Label	Display text — max 40 characters
Min date	Earliest selectable date
Max date	Latest selectable date
Unavailable dates	Specific dates that cannot be selected
Helper text	Hint below the field
Required	Whether the field must be filled
Visible when	Optional condition to show/hide
Enabled when	Optional condition to enable/disable

Calendar Picker

A visual calendar view for selecting dates. Supports single date or date range selection.

Property	Details
Name	Field identifier — max 255 characters
Title	Calendar header — max 80 characters
Description	Additional text below the title — max 300 characters
Mode	single (one date) or range (start and end date)
Label	Display text — max 40 characters. In range mode, separate labels for start date and end date
Helper text	Hint below the field — max 80 characters. In range mode, separate helper text for start and end date
Error message	Custom validation error — max 80 characters. In range mode, separate messages for start and end date
Required	Whether a date must be selected. In range mode, separate required settings for start and end date
Min date	Earliest selectable date
Max date	Latest selectable date
Unavailable dates	Specific dates that cannot be selected
Include days	Filter by weekday — only the specified days of the week are selectable (e.g., Mon–Fri only)
Min days	Minimum number of days in the selected range (range mode only)
Max days	Maximum number of days in the selected range (range mode only)
Initial value	Pre-selected date — supports dynamic references like ${data.date}. In range mode, separate values for start and end date
On select action	Optional Data Exchange action triggered when a date is selected
Visible when	Optional condition to show/hide
Enabled when	Optional condition to enable/disable

info

Calendar Picker requires WhatsApp Flow JSON version 7.0 or later.

---

Selection components

Let customers choose from predefined options.

Radio Buttons (Single Choice)

A group of options where the customer can select one.

📸

Screenshot: Selection components showing Radio Buttons, Checkbox Group, and Dropdown on a screen

selection-components.png

1. Add Radio Buttons, Checkbox Group, and Dropdown to a screen
2. Configure each with sample options
3. Capture the screen preview showing all selection components
Save to: static/img/screenshots/developer-tools/whatsapp-flows/components/selection-components.png

Property	Details
Name	Field identifier — max 255 characters
Label	Group label — max 30 characters
Options	1–20 options
Required	Whether a selection is required
Images	Optional image for each option
Media size	Small, Medium, or Large (when images are used)
Data source	Static, Initial Payload, or Screen Data
Visible when	Optional condition to show/hide
Enabled when	Optional condition to enable/disable

Option properties

Property	Max characters	Description
Title	30	Main text for the option
Description	300	Additional details (optional)
Metadata	20	Hidden value stored when selected (optional)

Checkbox Group (Multiple Choice)

A group of options where the customer can select multiple.

Property	Details
Name	Field identifier — max 255 characters
Label	Group label — max 30 characters
Options	1–20 options
Required	Whether at least one selection is required
Min selected	Minimum number of selections required
Max selected	Maximum number of selections allowed
Images	Optional image for each option
Data source	Static, Initial Payload, or Screen Data
Visible when	Optional condition to show/hide
Enabled when	Optional condition to enable/disable

Dropdown

A single-select dropdown list. Supports more options than Radio Buttons.

Property	Details
Name	Field identifier — max 255 characters
Label	Display text — max 20 characters
Options	1–200 options (100 when images are used)
Required	Whether a selection is required
Images	Optional image for each option
Data source	Static, Initial Payload, or Screen Data
Visible when	Optional condition to show/hide
Enabled when	Optional condition to enable/disable

Chips Selector

Tap-to-select chip buttons. Supports multi-select.

Property	Details
Name	Field identifier — max 255 characters
Label	Display text — max 80 characters
Options	2–20 options
Chip title	Max 35 characters per chip
Multi-select	Allow multiple chips to be selected
Min selected	Minimum number of selections required
Max selected	Maximum number of selections allowed
On select action	Optional Data Exchange action triggered when a chip is selected
On unselect action	Optional Data Exchange action triggered when a chip is deselected
Data source	Static, Initial Payload, or Screen Data
Visible when	Optional condition to show/hide
Enabled when	Optional condition to enable/disable

Opt-In

A consent checkbox for terms, privacy policies, or marketing opt-ins.

Property	Details
Name	Field identifier — max 255 characters
Label	Consent text — max 120 characters
Required	Whether the checkbox must be checked
Max per screen	5 opt-in components
Visible when	Optional condition to show/hide
Enabled when	Optional condition to enable/disable

---

Footer

The footer is automatically added to every screen and cannot be deleted or reordered. It provides the main action button for each screen.

Property	Details
Label	Button text — max 35 characters
Left Caption	Small text left of the button — max 15 characters
Center Caption	Small text center below button — max 15 characters
Right Caption	Small text right of the button — max 15 characters
Enabled when	Optional condition to enable/disable the button
Action	Navigate, Complete, Data Exchange, or Update Data
Payload	JSON object with ${form.field} references (for Navigate, Data Exchange, Update Data)

For details on footer actions and payloads, see Flow Builder — Footer component.

---

Component limits reference

Quick reference for all component limits:

Component	Max per screen	Max characters (label/text)	Max options
Heading	—	80	—
Subheading	—	80	—
Body	—	4,096	—
Caption	—	409	—
Rich Text	—	4,096	—
Image	3	—	—
Embedded Link	2	25	—
Navigation List	2	80	20 items
Text Input	—	20	—
Text Area	—	20	—
Date Picker	—	40	—
Calendar Picker	—	80 (title) / 40 (label)	—
Radio Buttons	—	30	20
Checkbox Group	—	30	20
Dropdown	—	20	200 (100 with images)
Chips Selector	—	80	20
Opt-In	5	120	—
Footer	1 (auto)	35	—