# Flow Elements

Add interactive elements to your flows: multiple choice, text entry, progress indicators, and date pickers.

Flows can be enhanced with interactive components designed for multi-page experiences. They capture user input, show progress, or request permissions. Use them to personalize the flow or gather information for branching.

Multiple Choice [#multiple-choice]

The multiple choice element presents options for users to select. This is the key element for enabling branching. User selections can determine which page they see next.

<img alt="A multiple choice element in a flow" src="__img0" />

Configuration [#configuration]

* **Single-select or multi-select:** Choose whether users can pick one option or multiple.
* **Randomize order:** Shuffle the options each time (useful for surveys to reduce bias).
* **Choice items:** Each choice has a label and a value.

Labels and values [#labels-and-values]

Each choice has two parts:

* **Label:** What users see (e.g., "Grow subscriptions").
* **Value:** What gets stored (e.g., `goal_grow`).

The value is used internally for routing conditions and user attributes. Keep values short and consistent (lowercase, underscores).

<img alt="Labels and values for multiple choice items" src="__img1" />

Storing selections [#storing-selections]

When a user makes a selection, two variables are available: `selectedValue` (the internal value, e.g., `goal_grow`) and `selectedLabel` (the display text, e.g., "Grow subscriptions"). If localization is active, `selectedLabel` returns the translated label for the user's locale.

You can use these in routing conditions to branch the flow, store them as user attributes for analytics or personalization, reference them in dynamic content on later pages, or pass them to your backend via webhooks.

> **Tip**

Multiple choice controls are commonly used for [branching](/docs/dashboard/dashboard-creating-flows/linking-pages).



Input [#input]

The input element lets users type a response, like their name, email, or feedback.

<img alt="An input element in a flow" src="__img2" />

Configuration [#configuration-1]

* **Placeholder text:** The hint shown before users type.
* **Keyboard type:** Choose the appropriate keyboard (default, email, number, etc.).

Storing responses [#storing-responses]

Like multiple choice, text entry values can be stored as user attributes. This is useful for personalizing later pages with the user's name, capturing email addresses for follow-up, or collecting feedback or custom responses.

Indicator [#indicator]

The indicator element shows progress through the flow, like "Step 2 of 5."

<img alt="An indicator element in a flow" src="__img3" />

Configuration [#configuration-2]

* **Style:** Choose from different visual styles (dots, bars, numbers).
* **Current step:** Which step to highlight.
* **Total steps:** How many steps to show.

Add an indicator when your flow has more than 3-4 pages. Users are more likely to complete a flow when they can see their progress and know how much is left. You can also use their properties in dynamic values such as progression:

<img src="__img4" />

Date Picker [#date-picker]

The date picker element lets users select a date, time, or both using a scrollable wheel or compact input. This is useful for collecting birthdates, scheduling preferences, or any date-related input during onboarding.

<img alt="A date picker element in a flow" src="__img5" />

Configuration [#configuration-3]

* **Style:** Choose between **Wheel** (scrollable columns) or **Compact** (native date/time input).
* **Components:** Choose what to collect.
  * Wheel style supports **Date & Time**, **Date**, **Time**, and **Time List** (a single scrolling column with pre-formatted time options).
  * Compact style supports **Date** and **Time**.
* **Min Date / Max Date:** Constrain the selectable range. Options are **No Limit**, **Today**, **Relative** (e.g., 30 days before or 1 year after today), or a **Fixed Date**.
* **Minute Interval:** When using a time component with the wheel style, set the interval between selectable minutes (1, 5, 10, 15, 30, or 60).

Storing selections [#storing-selections-1]

The selected value is stored as a string and accessible as a variable. The format depends on what components are configured: `YYYY-MM-DD` for date, `HH:MM:SS` for time, or `YYYY-MM-DDTHH:MM:SS` for date and time. You can use this value in routing conditions, dynamic content on later pages, or pass it to your backend.