Combobox
Overview
The Avonni Combobox provides a dropdown input for selecting one or multiple options in a Screen Flow. It supports searchable dropdowns, manual lists, Salesforce records, and picklist fields as data sources, with optional custom actions inside the dropdown.
Key features include:
Flexible Selection: Supports single or multi-select with optional search.
Customizable UI: Adjust labels, variants, placeholders, and dropdown alignment.
Data Sources: Manual, Variable, Picklist, or Query for dynamic options.
Actions: Add custom actions within the dropdown for enhanced interactivity.
Output Support: Captures selected values for Flow logic or multi-select picklist fields.
Audience: Flow builders, business analysts, or admins creating interactive forms or record pickers in Screen Flows.
Tip: Use multi-select for fields like contact roles; bind Value to Flow variables for real-time updates.
Use Cases:
Case Form: Select a single Contact or multiple Categories for case classification.
Opportunity Page: Pick a Campaign or multiple Products.
Survey Flow: Allow multi-select of interest areas from a Picklist.
Approval Workflow: Select a single Approver or multiple Reviewers.
Dynamic Lookup: Query Accounts for a searchable dropdown in a custom process.
Tutorials
Configuration
To configure it, click the component on the Flow screen. The Edit Combobox Component panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab.
Data Source
This section determines where the Combobox gets its list of options. Without a data source, the dropdown is empty.
Use a Flow Collection Variable (e.g., from Get Records) for a dynamic list of records.
When options come from queried data (e.g., Contact records).
Pull options from a Picklist field on a Salesforce object.
For fixed values from a field (e.g., StageName on Opportunity).
Data Mapping
Map fields from your data source to the Combobox's display properties.
Label
Main text displayed for each option. It is display-only.
Value
Required stored selection. Map the record ID, or another uniquely matching value, needed by downstream Flow logic and reactive filters.
Secondary Text
Additional text below the label for context.
Disabled
Marks an option as unselectable.
Avatar
Optional avatar (icon, image, initials, or presence) shown next to the option.
Properties
Label sets the text label shown above the combobox input.
Value sets the selected value(s) as a single string separated by semicolons (primarily used for multi-select defaults). Cannot be used together with Value Collection.
Value Collection pre-fills the Combobox with multiple selected values. Requires Is Multi Select to be enabled.
Field Level Help adds a tooltip next to the label detailing the purpose and function of the input.
Variant controls label placement: Standard (above), Label Hidden, Label Inline (beside), or Label Stacked.
Placeholder sets hint text shown when the field is empty, prompting the user for a valid entry.
Dropdown Alignment specifies where the dropdown is anchored relative to the input: Auto, Left, Center, Right, Bottom Left, Bottom Center, or Bottom Right (default: Auto).
Dropdown Length caps how many items show before scrolling: 5 Items, 7 Items, or 10 Items (default: 7 Items).
Is Multi Select enables multiple selections.
Maximum Selected Items caps how many items can be selected. Requires Is Multi Select to be enabled.
Minimum Selected Items requires a minimum number of selections. Requires Is Multi Select to be enabled.
Message When Range Overflow / Message When Range Underflow show validation error messages when the selection count exceeds the maximum or falls below the minimum. Requires Is Multi Select to be enabled.
Keep Open on Select keeps the dropdown open after selecting an option. Requires Is Multi Select to be enabled.
Show Search displays a search box inside the dropdown for filtering options.
Hide Options Until Search hides all options until the user enters a search value. Requires Show Search to be enabled.
Required requires a selection before the screen can advance.
Disabled disables the input so users cannot interact with it.
Hide Clear Icon hides the clear icon so selected values cannot be cleared via the input control.
Hide Selected Options hides the selected option pills (mainly relevant for multi-select).
Actions
Add custom action buttons inside the dropdown (e.g., "Create New", "View All").
Label
Text for the action button.
Name
Unique identifier for the action.
Icon Name
SLDS icon for the action.
Position
Top or Bottom of the dropdown (default: Top).
Display on Search
Shows the action only while the user is searching.
Display When No Results
Shows the action only when a search returns no results (often used for "Create '{search}'").
Fixed
Keeps the action visible regardless of scroll.
Disabled
Disables the action.
Interactions
Interactions define what happens when users interact with the Combobox. Configure them from the Interactions tab of the Edit Combobox panel.
Change
Fires when the user selects or changes the combobox value. The selected value and record are exposed through outputs such as value, valueCommaSeparated, selectedOption, and selectedOptions.
Action Click
Fires when a user clicks a custom action inside the dropdown. Use the targetName output to identify which action was clicked, or read clickedActionName to route your flow logic.
Examples
Example 1: Simple Contact Selection for Case
This example allows users to select a single Contact for a Case form and display the selected Contact ID on a confirmation screen.
Create Flow Screens and Elements
Add the following elements:
Screen 1 (Contact Selection): Add a Next button.
Screen 2 (Confirmation): Add a Text component with "Selected Contact ID: {!selectedContactId}" and a Finish button.
Assignment Element (Assign Contact ID): Between Screen 1 and Screen 2, set
{!selectedContactId}=$Component.ContactPicker.Value.
Result: Users select a Contact on Screen 1, see a toast, click Next to assign the Contact ID to {!selectedContactId}, and view it on Screen 2.
Example 2: Outputting Multi-Select Values to a Picklist Field
Enable Is Multi Select and bind the Combobox's Value to a Text Collection Variable. Use the valueCollectionSerialized output (semicolon-separated, e.g., Hiking;Reading) in an Update Records element to save directly to a multi-select picklist field.
Prerequisites: The target multi-select picklist field must already exist on the object.
Styling
The Style tab gives you fine-grained control over the Combobox's appearance. Configure it from the Style tab of the Edit Combobox panel.
Controls the outer spacing around the combobox, creating space between it and other elements on the screen.
Top / Right / Bottom / Left: Adjust the space on each side.
Controls the inner spacing between the combobox content and its border.
Top / Right / Bottom / Left: Adjust the inner spacing on each side.
Adjusts display when the combobox is opened as a modal dialog inside a Flow screen.
Width / Height: Dialog dimensions.
Background Color: Dialog background color.
Styles the combobox label.
Color: Set the label text color.
Font Size / Font Style / Font Weight: Control the label typography.
Customizes the border surrounding the combobox input.
Color: Set the border color.
Size: Adjust the border thickness.
Style: Choose a border style (e.g. solid, dashed, dotted).
Radius: Control the roundness of the corners.
Styles the dropdown options. Colors are set per state (default, hover, disabled).
Background Color: Set the option background in each state.
Styles the option label text. Colors are set per state (default, hover, disabled).
Color: Set the label color in each state.
Font Size / Font Style / Font Weight: Control the label typography.
Styles the secondary text shown under each option. Colors are set per state (default, hover, disabled).
Color: Set the secondary text color in each state.
Font Size / Font Style / Font Weight: Control the secondary text typography.
Styles the avatar shown beside an option. Icon and initials colors are set per state (default, hover, disabled).
Border Color / Size / Style / Radius: Style the avatar border.
Icon Background / Foreground Color: Set the fallback icon colors.
Image Object Fit: Control how the avatar image fits.
Initials Color / Font Style / Font Weight: Style the avatar initials.
Styles the presence indicator on option avatars. Background color is set per presence status.
Border Color / Radius: Style the presence indicator border.
Background Color: Set the indicator color for each status (Away, Blocked, Busy, Focus, Offline, Online).
Styles the action items in the dropdown. Colors are set per state (default, hover, disabled).
Background Color: Set the action background in each state.
Styles the action label text. Colors are set per state (default, hover, disabled).
Color: Set the label color in each state.
Font Size / Font Style / Font Weight: Control the label typography.
Styles the action icons. Colors are set per state (default, hover, disabled).
Background / Foreground Color: Set the icon colors in each state.
Radius: Control the roundness of the icon corners.
Styles the selection pills shown for chosen values. Colors are set per state (default, hover).
Background Color / Text Color: Set the pill colors in each state.
Border Color / Size / Style / Radius: Style the pill border.
Output Variables
The Combobox exposes these output variables you can reference in your flow after the screen. To use them, select the screen element in Flow Builder, then the Combobox component, and pick the output variable you need.
Item Selection
Updated each time the user selects or clears a value.
Value
Text (String)
The selected mapped value. Use it for ID or value-based reactive filters.
Selected Option
Record (SObject)
The full record behind the selected option (single-select).
Selected Options
Record Collection
All selected records when multi-select is enabled.
Value Comma Separated
Text (String)
The selected value(s) as a comma-separated string — useful for display or storing in a single Text field.
Search Term
Text (String)
The text the user typed in the search box at the moment the interaction fired.
Example: After a Contact picker combobox fires On Change, read Selected Option to get the full Contact record and use its Id in a Create Records element downstream.
Use Value when the mapped value is the ID used by a downstream lookup filter. Use Selected Option when downstream logic needs returned record fields.
Selected Option exposes only fields made available by its source query or data mapping. In Flow Builder, bind or assign it to a correctly typed Record variable before selecting individual fields. Use the output and field selectors provided by the UI.
For a reactive selected-record filter, see How to Create a Combobox-Filtered Data Table.
Action Click
Updated when the user clicks a custom action inside the dropdown.
Clicked Action Name
Text (String)
The unique name of the action the user clicked, matching the Name you set in the Actions section.
Example: If you have a "Create New" action with Name
createNew, check Clicked Action Name in a Decision element to branch into a record-creation sub-flow.
Others
Number of Items
Integer
The total number of options currently loaded in the dropdown.
Flow Interaction Output Variables
Like all interactive Flow components, the Combobox exposes generic output slots (Variable 1–10) that an Open Flow Dialog or Open Flow Panel interaction can fill with values from a launched flow. See Flow Interaction Output Variables.
Key Considerations
Data Source Choice: Use Query for dynamic records; Picklist for fixed options; map fields accurately.
Multi-Select Output: Bind Value to a Text Collection Variable for multi-select; use
valueCollectionSerializedfor picklist fields.Actions Use Case: Actions (e.g., "Create New") enhance workflows; use sparingly to avoid clutter.
Performance: Limit Dropdown Length and Query results for speed.
Accessibility: Ensure clear Labels and Placeholders; test keyboard navigation.
Troubleshooting Common Issues
No Options Shown — Verify the Data Source is configured and field mappings are correct; check that the running user has object-level read permissions.
Search Not Working — Enable the Show Search property; ensure the fields used for searching are Text-based, as other field types are not searchable.
Value Not Captured — Bind the Value output to a Flow variable in the Interactions tab; confirm the interaction is set to fire on Change.
Multi-Select Values Not Saving — Bind Value to a Text Collection Variable for multi-select; use the
valueCollectionSerializedoutput when writing to a multi-select picklist field.Dropdown Overlapping Other Elements — Adjust the Dropdown Alignment and Dropdown Length settings; test the layout on mobile to confirm there are no overlap issues.
Custom Actions Not Appearing — Add actions in the Actions section of the Properties tab and ensure each action has a unique Name value.
Last updated
Was this helpful?