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 stores its value under a key: most use a variableName property, while Segmented Control, Switch, Chip, and Quiz use saveToAttribute. Either way the collected value is available within the current flow and can be saved 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.
Required messages
Most input components have a Required toggle. When it is on and the user tries to continue without answering, the flow shows the component's Required Message, which defaults to "Answer this to continue". You can rewrite that message per component, and it is localizable like any other authored string, so translate it alongside your labels and options.
Required Message exists on TextInput, Dropdown, MultiSelect, Checkbox, Segmented Control, RadioGroup, DatePicker, Quiz, Rating, NPS, Emoji Feedback, and Thumbs.
TextInput
A single-line text field for collecting free-form text responses. The Input Type setting adapts the keyboard and, for password, masks the entry.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| Label | text | empty | Text shown above the field. |
| Placeholder | text | "Enter text..." | Ghost text shown when the field is empty. |
| Helper Text | text | empty | Supporting text shown below the field. |
| Input Type | select | text | Keyboard and entry mode: text, email, tel, url, password. Stored as inputType. |
| Variable Name | text | empty | Key used to store the entered value. |
| Max Length | number | none | Maximum character count. |
| Validation | text | empty | Regular expression the value must match. Stored as pattern. |
| Required | boolean | false | Whether the field must be filled before proceeding. |
| Required Message | text | "Answer this to continue" | Message shown when Required is on and the field is empty. |
| Disabled | boolean | false | Render the field as read-only. |
| Full Width | boolean | true | Stretch the field to the width of its container. |
| Margin | spacing | 16 bottom | Outer spacing around the field. |
| Border Radius | number | 8 | Corner rounding. |
| Border Color | color | #D1D5DB | Field border color at rest. |
| Focus Border Color | color | #3B82F6 | Border color while the field is focused. |
| Background Color | color | #FFFFFF | Field background color. |
TextInput is single-line only. There is no multiline mode, and no font size, text color, or padding properties. For longer-form answers, keep the field short and ask a narrower question, or split the answer across screens.
Use cases
- Collecting a user's name during onboarding
- Email address capture for lead generation
- A referral or promo code, paired with a Validation pattern
Dropdown
A selection component that presents a list of options in a native dropdown/picker interface.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| Label | text | empty | Text shown above the dropdown. |
| Placeholder | text | "Select an option..." | Text shown when no option is selected. |
| Options | textarea | empty | One option per line. Stored as options. |
| Variable Name | text | empty | Key used to store the selected value. |
| On Select | action | none | Action fired when the user picks an option. |
| Required | boolean | false | Whether a selection is required. |
| Required Message | text | "Answer this to continue" | Message shown when Required is on and nothing is selected. |
| Disabled | boolean | false | Render the dropdown as read-only. |
| Full Width | boolean | true | Stretch the dropdown to the width of its container. |
| Margin | spacing | 16 bottom | Outer spacing around the dropdown. |
| Border Radius | number | 8 | Corner rounding. |
Options is a plain textarea, one option per line, not a structured list editor. Blank lines produce empty options, so keep the list tight.
Option labels are localizable. You can provide translated labels for each language your flow supports.
Checkbox
A single checkbox with a label and an optional description. Use it for one yes/no acknowledgment, not for picking from a list.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| Label | text | "Checkbox label" | Text shown next to the box. |
| Description | textarea | empty | Supporting text below the label. |
| Size | select | medium | Box size: small, medium, large. Stored as checkboxSize. |
| Checked Color | color | #3B82F6 | Color of the box when checked. |
| Variable Name | text | empty | Key used to store the checked state. |
| Default Checked | boolean | false | Whether the box starts checked. |
| Required | boolean | false | Whether the box must be checked before proceeding. |
| Required Message | text | "Answer this to continue" | Message shown when Required is on and the box is unchecked. |
| Disabled | boolean | false | Render the checkbox as read-only. |
| Margin | spacing | 12 bottom | Outer spacing around the checkbox. |
Checkbox holds one boolean value. To let users pick several options from a list, use MultiSelect in
checkboxList display mode, or Chip for a compact tag layout.
Use cases
- Terms and conditions acknowledgment
- Marketing opt-in
- A single "remember this" preference
Switch
A toggle for a single on/off preference. Same job as Checkbox, presented as a platform-native switch.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| Label | text | "Enable" | Text describing what the switch controls. |
| Description | textarea | empty | Supporting text below the label. |
| Layout | select | spaceBetween | spaceBetween pushes the switch to the far edge; inline keeps it adjacent. |
| Alignment | select | left | Horizontal alignment: left, center, right. Stored as align. |
| On Color | color | #3B82F6 | Track color when the switch is on. |
| Label Color | color | #000000 | Label text color. |
| Save to Attribute | text | empty | User attribute that stores the on/off value. |
| Default On | boolean | false | Whether the switch starts on. |
| Disabled | boolean | false | Render the switch as read-only. |
| Margin | spacing | 12 bottom | Outer spacing around the switch. |
Switch has a Required option. Turn it on when the user has to make the choice explicitly rather than accepting the default.
Use cases
- Push notification or email preferences
- Feature opt-in during onboarding
- Unit or mode preferences that default sensibly
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 | Default | Description |
|---|---|---|---|
| Group Label | text | "Select an option" | Text shown above the options. Stored as label. |
| Options | textarea | empty | One option per line. |
| Orientation | select | vertical | Stack options vertically or lay them out horizontally. |
| Selected Color | color | #3B82F6 | Color of the selected radio indicator. |
| Variable Name | text | empty | Key used to store the selected value. |
| On Select | action | none | Action fired when the user picks an option. |
| Required | boolean | false | Whether a selection is required. |
| Required Message | text | "Answer this to continue" | Message shown when Required is on and nothing is selected. |
| Disabled | boolean | false | Render the group as read-only. |
| Margin | spacing | 16 bottom | Outer spacing around the group. |
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.
Quiz
The richest choice component, and the one purpose-built for onboarding question screens and branching. Quiz renders option cards in five different styles, can filter a long option list with a search field, and takes per-option configuration rather than a flat list of strings.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| Question | textarea | "Your question?" | The question shown above the options. This is the component's main content field. |
| Style | select | list | Option layout: list, grid, imageChoice, emoji, scale. Stored as variant. |
| Options | array | empty | The options, each configured individually rather than as one line of text. |
| Searchable | boolean | false | Show a search field above the options for filtering long lists. |
| Search Placeholder | text | "Search…" | Ghost text in the search field. Only used when Searchable is on. |
| No Results Text | text | "No matches" | Shown when a search matches no options. |
| Columns | number | 2 | Number of columns, for the grid and imageChoice styles. |
| Selected Color | color | #3B82F6 | Highlight color of a selected option. |
| Allow Multiple | boolean | false | Let the user pick more than one option. |
| Max Selections | number | 0 | Cap on selections when Allow Multiple is on. 0 means no cap. Stored as maxSelect. |
| Save to Attribute | text | empty | User attribute that stores the answer. |
| Required | boolean | true | Whether an answer is required. Note this defaults to on, unlike other inputs. |
| Required Message | text | "Answer this to continue" | Message shown when the user tries to continue without answering. |
| Margin | spacing | 16 bottom | Outer spacing around the quiz. |
Quiz is the component to reach for on personalization screens ("What is your goal?", "How experienced are you?"). Because the answer is stored as a user attribute, it can drive a branch node in the flow graph and stay available for targeting later flows.
Use cases
- Goal and motivation questions during onboarding
- Visual pickers with imageChoice or emoji styles
- Long lists such as country or interest selection, with Searchable on
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 | Default | Description |
|---|---|---|---|
| Options | textarea | empty | One option per line as value|label, or value|label|description|icon for stacked cards. |
| Layout | select | segmented | Segmented (tab strip) or Stacked (full-width cards). |
| Save to Attribute | text | empty | User attribute that stores the selected value. |
| Default Value | text | empty | Value of the initially selected option. Leave empty for no pre-selection. |
| Required | boolean | false | 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). |
| Required Message | text | "Answer this to continue" | Message shown when Required is on and nothing is selected. |
| Selected Color | color | #FFFFFF | Selected segment color (segmented layout). |
| Track Color | color | #E5E7EB | Background track color (segmented layout). |
| Text Color | color | #111827 | Option label color. |
| Margin | spacing | 16 bottom | Outer spacing around the control. |
The stacked layout adds card styling: Card Background (#FFFFFF), Card Border (#ECECEE), Selected Card Background (#F1F8F5), and Selected Card Border (#1F8A5B).
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 multi-selection component. It renders either as tappable chips or as a list of checkboxes, controlled by Display Mode.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| Label | text | empty | Text shown above the options. |
| Placeholder | text | "Select options..." | Text shown when nothing is selected. |
| Options | textarea | empty | One option per line. |
| Display Mode | select | chips | chips for tappable tags, checkboxList for a vertical list of checkboxes. |
| Chip Color | color | #3B82F6 | Chip color. This is the only chip color property on MultiSelect. |
| Variable Name | text | empty | Key used to store the array of selected values. |
| Min Selections | number | 0 | Minimum selections required. 0 means no minimum. |
| Max Selections | number | 0 | Maximum selections allowed. 0 means no maximum. |
| Required | boolean | false | Whether at least one option must be selected. |
| Required Message | text | "Answer this to continue" | Message shown when Required is on and nothing is selected. |
| Disabled | boolean | false | Render the options as read-only. |
| Full Width | boolean | true | Stretch the component to the width of its container. |
| Border Radius | number | 8 | Corner rounding. |
| Margin | spacing | 16 bottom | Outer spacing around the component. |
There is one chip color, not a set. MultiSelect has no separate chip background, chip text color, chip border radius, or gap properties.
Use cases
- "What are you interested in?" topic selectors
- Feature discovery preferences
- Multi-category filtering
Chip
A compact row of tappable tags. Chip is lighter than MultiSelect: no label and no placeholder, just the tags and how they wrap.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| Chips | textarea | empty | One chip per line. Stored as options. |
| Alignment | select | left | Align the chips left or center. Stored as justify. |
| Allow Multiple | boolean | true | Let the user select more than one chip. |
| Selected Color | color | #3B82F6 | Color of a selected chip. |
| Chip Color | color | #F3F4F6 | Color of an unselected chip. |
| Save to Attribute | text | empty | User attribute that stores the selection. |
| Margin | spacing | 16 bottom | Outer spacing around the chip row. |
Chip has a Required option but no min or max selection limits. If you need to require a specific number of choices, use MultiSelect or Quiz instead.
Use cases
- Interest or tag pickers where an answer is optional
- Quick filters inside a longer screen
- Compact secondary questions alongside a primary input
Slider
A numeric range slider for collecting a value within a defined minimum and maximum.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| Label | text | empty | Text shown above the slider. |
| Variable Name | text | empty | Key used to store the selected value. |
| Minimum | number | 0 | Minimum slider value. |
| Maximum | number | 100 | Maximum slider value. |
| Step | number | 1 | Increment step size. |
| Default Value | number | 50 | Initial slider position, the midpoint of the default range. |
| Show Value | boolean | true | Display the current value alongside the slider. |
| Track Color | color | #E5E7EB | Color of the unfilled slider track. |
| Active Color | color | #3B82F6 | Color of the filled portion of the track. Stored as activeColor. |
| Disabled | boolean | false | Render the slider as read-only. |
| Margin | spacing | 16 bottom | Outer spacing around the slider. |
The thumb is not separately themable. Active Color styles the filled track, and there is no thumb color property.
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 | Default | Description |
|---|---|---|---|
| Label | text | empty | Text shown to the left of the control. |
| Unit | text | empty | Suffix appended after the value (e.g. yr, lb, kg). |
| Minimum | number | 0 | Minimum value. |
| Maximum | number | 100 | Maximum value. |
| Step | number | 1 | Increment per tap. |
| Default Value | number | 0 | Initial value, clamped into the min / max range. |
| Save to Attribute | text | empty | User attribute that stores the selected value. |
| Disabled | boolean | false | Render the control as read-only. |
| Text Color | color | #16181B | Label and value color. |
| Button Background | color | #F4F5F7 | Background of the minus / plus buttons. |
| Button Icon Color | color | #16181B | Color of the minus / plus glyphs. |
| Margin | spacing | 0 | Outer spacing around the control. |
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 | Default | Description |
|---|---|---|---|
| Label | text | empty | Text shown above the field. |
| Placeholder | text | "Select date..." | Text shown before a date is selected. |
| Variable Name | text | empty | Key used to store the selected date. |
| Min Date | text | empty | Earliest selectable date. |
| Max Date | text | empty | Latest selectable date. |
| Required | boolean | false | Whether a date is required before proceeding. |
| Required Message | text | "Answer this to continue" | Message shown when Required is on and no date is selected. |
| Disabled | boolean | false | Render the field as read-only. |
| Full Width | boolean | true | Stretch the field to the width of its container. |
| Margin | spacing | 16 bottom | Outer spacing around the field. |
DatePicker renders the platform's native picker, so its display format and styling follow the device. There are no date format, background color, text color, or border radius properties.
Use cases
- Birthday collection during onboarding
- Event scheduling within flows
- Subscription or trial date preferences