Input Components
Collect user input with text fields, dropdowns, checkboxes, and more.
Input Components
Input components let you collect information from users directly within your flows. Every input component supports a variableName property that determines how the collected value is stored and referenced, both within the current flow and as a user attribute for future targeting.
All input values collected through these components are available in your flow analytics and can be saved as user attributes for segmentation and targeting.
TextInput
A text field for collecting free-form text responses. Supports single-line and multi-line modes.
Properties
| Property | Type | Description |
|---|---|---|
| Placeholder | text | Ghost text shown when the field is empty. |
| Variable Name | text | Key used to store the entered value. |
| Multiline | boolean | Enable multi-line input (textarea). Default: false. |
| Max Length | number | Maximum character count. |
| Required | boolean | Whether the field must be filled before proceeding. |
| Keyboard Type | select | Input keyboard hint: default, email, numeric, phone, url. |
| Font Size | number | Text size within the field. |
| Text Color | color | Input text color. |
| Background Color | color | Field background color. |
| Border Radius | number | Corner rounding. |
| Border Color | color | Field border color. |
| Padding | spacing | Internal spacing. |
Use cases
- Collecting a user's name during onboarding
- Open-ended feedback after a feature interaction
- Email address capture for lead generation
Dropdown
A selection component that presents a list of options in a native dropdown/picker interface.
Properties
| Property | Type | Description |
|---|---|---|
| Options | array | List of selectable options, each with a value and display label. |
| Placeholder | text | Text shown when no option is selected. |
| Variable Name | text | Key used to store the selected value. |
| Required | boolean | Whether a selection is required. |
| Background Color | color | Dropdown background. |
| Text Color | color | Option text color. |
| Border Radius | number | Corner rounding. |
Option labels are localizable. You can provide translated labels for each language your flow supports.
Checkbox
A multi-selection component where users can toggle one or more options on or off.
Properties
| Property | Type | Description |
|---|---|---|
| Options | array | List of checkbox options with value and label. |
| Variable Name | text | Key used to store the array of selected values. |
| Required | boolean | Whether at least one option must be selected. |
| Min Selections | number | Minimum number of required selections. |
| Max Selections | number | Maximum allowed selections. |
| Check Color | color | Color of the checked indicator. |
| Label Color | color | Text color for option labels. |
| Layout Direction | select | Vertical or horizontal arrangement. |
Use cases
- Multi-topic interest selection during onboarding
- Feature preference gathering
- Terms and conditions acknowledgment
RadioGroup
A single-selection component that presents a list of mutually exclusive options. RadioGroup is one of the most powerful input components because it supports conditional branching: each option can route the user to a different screen.
Properties
| Property | Type | Description |
|---|---|---|
| Options | array | List of radio options with value and label. |
| Variable Name | text | Key used to store the selected value. |
| Required | boolean | Whether a selection is required. |
| Selected Color | color | Color of the selected radio indicator. |
| Label Color | color | Text color for option labels. |
| Layout Direction | select | Vertical or horizontal arrangement. |
Branching
RadioGroup selections can drive the flow path. In the flow graph editor, create a branch node connected to the screen containing the RadioGroup. Map each option value to a target screen:
- Option "Beginner" leads to Screen A (introductory content)
- Option "Advanced" leads to Screen B (power-user features)
- Option "Just browsing" leads to Screen C (quick tour)
This creates genuinely personalized journeys without requiring separate flows.
Segmented Control
A single-select control with two layouts. The default segmented layout is a compact tab strip; the stacked layout renders each option as a full-width card with an icon, title, and description, ideal for goal pickers and onboarding choices.
Properties
| Property | Type | Description |
|---|---|---|
| Options | text | One option per line as value|label, or value|label|description|icon for stacked cards. |
| Layout | select | Segmented (tab strip) or Stacked (full-width cards). |
| Save to Attribute | text | User attribute that stores the selected value. |
| Default Value | text | Value of the initially selected option. Leave empty for no pre-selection. |
| Required | boolean | Block the screen's Continue button until an option is selected. Only applies to the stacked layout (a tab strip always has one active tab). |
| Selected Color | color | Selected segment color (segmented layout). |
| Track Color | color | Background track color (segmented layout). |
| Text Color | color | Option label color. |
The stacked layout adds card styling: Card Background, Card Border, Selected Card Background, and Selected Card Border.
Use cases
- "What do you want to do?" goal selection
- Plan or billing-period toggles (Monthly / Yearly)
- Unit or preference switches (lb / kg)
MultiSelect
A chip-style multi-selection component where users pick from a set of options displayed as tappable chips or tags.
Properties
| Property | Type | Description |
|---|---|---|
| Options | array | List of selectable options with value and label. |
| Variable Name | text | Key used to store the array of selected values. |
| Required | boolean | Whether at least one chip must be selected. |
| Min Selections | number | Minimum selections required. |
| Max Selections | number | Maximum selections allowed. |
| Chip Background | color | Default chip background color. |
| Chip Selected Background | color | Background color when selected. |
| Chip Text Color | color | Label color. |
| Chip Border Radius | number | Corner rounding for chips. |
| Gap | number | Spacing between chips. |
Use cases
- "What are you interested in?" topic selectors
- Feature discovery preferences
- Multi-category filtering
Slider
A numeric range slider for collecting a value within a defined minimum and maximum.
Properties
| Property | Type | Description |
|---|---|---|
| Variable Name | text | Key used to store the selected value. |
| Min Value | number | Minimum slider value. Default: 0. |
| Max Value | number | Maximum slider value. Default: 100. |
| Step | number | Increment step size. Default: 1. |
| Default Value | number | Initial slider position. |
| Show Value | boolean | Display the current value alongside the slider. |
| Track Color | color | Color of the slider track. |
| Active Track Color | color | Color of the filled portion of the track. |
| Thumb Color | color | Color of the draggable thumb. |
Use cases
- Budget or price range selection
- Satisfaction level measurement
- Frequency or intensity preferences
Stepper
A discrete number stepper: a label and a minus / value / plus control. The minus and plus buttons step the value by a fixed amount between a minimum and maximum, and each disables at its bound. Use it when a precise whole number matters more than a quick drag, such as age, height, or quantity.
Properties
| Property | Type | Description |
|---|---|---|
| Label | text | Text shown to the left of the control. |
| Unit | text | Suffix appended after the value (e.g. yr, lb, kg). |
| Min | number | Minimum value. Default: 0. |
| Max | number | Maximum value. Default: 100. |
| Step | number | Increment per tap. Default: 1. |
| Default Value | number | Initial value, clamped into the min / max range. |
| Save to Attribute | text | User attribute that stores the selected value. |
| Disabled | boolean | Render the control as read-only. |
| Text Color | color | Label and value color. |
| Button Background | color | Background of the minus / plus buttons. |
| Button Icon Color | color | Color of the minus / plus glyphs. |
Use cases
- Age, height, or weight during onboarding
- Quantity selection
- Goal targets that need an exact number
DatePicker
A date selection component that opens the native platform date picker.
Properties
| Property | Type | Description |
|---|---|---|
| Variable Name | text | Key used to store the selected date. |
| Placeholder | text | Text shown before a date is selected. |
| Min Date | text | Earliest selectable date. |
| Max Date | text | Latest selectable date. |
| Date Format | select | Display format (e.g., MM/DD/YYYY, DD.MM.YYYY). |
| Background Color | color | Picker background. |
| Text Color | color | Date text color. |
| Border Radius | number | Corner rounding. |
Use cases
- Birthday collection during onboarding
- Event scheduling within flows
- Subscription or trial date preferences