Input Choice Set
The Avonni Input Choice Set offers highly customizable input options for forms, supporting various input types and visual adjustments.
The Input Choice Set displays a set of selectable options as radio buttons, checkboxes, buttons, or toggle-style controls. It supports static lists, Salesforce picklists, flow variables, and dependent picklists.
Overview
The Input Choice Set component offers three types of input rendering — Default, Button, and Toggle — letting you match the interaction style to your form's purpose. Combined with picklist support and multi-select, it handles everything from simple yes/no choices to complex multi-option surveys.
Configuration
To configure it, click the component on the Flow screen. The Edit Choice Set Component panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab.
Data Source
The Data Source setting determines where the options come from. Pick it first — everything else builds on this choice.
The Input Choice Set component works with dependent picklists. If you pick a dependent picklist field for your second Input Choice Set, you'll see a new option called "controlling value".
In the screenshot below, the second Input Choice Set has this "controlling value" option because it's a dependent picklist. We've connected this to the "Value semi-colon separated" option from the first Input Choice Set.
Data Mapping
When using Variable, Query, or Picklist, configure Data Mappings in the Properties tab to tell the component how to build each choice from your data:
Label — Display text for each choice option.
Value — The value submitted when this option is selected.
Hide Label — Whether to suppress the label on this option.
Color — Color applied to the option's indicator. (Advanced.)
Tooltip — Tooltip text shown on hover. (Button type only.)
Properties
The flat set of main settings controls the choice set's label, behavior, and layout.
Label — text label displayed above the choice set.
Value / Value Collection — the option(s) selected by default when the screen loads. Value applies to single-select (shown when Is Multi Select is off); Value Collection applies to multi-select (shown when Is Multi Select is on).
Type — rendering style of the choice set. Options: Default (standard radio buttons or checkboxes, the default), Button (button group), Toggle (toggle switches).
Is Multi Select — when enabled, users can select more than one option (renders as checkboxes or multi-select buttons). When off, only one option can be selected at a time.
Orientation — arranges the options Vertical (stacked list, the default) or Horizontal (side by side).
Layout — available when Orientation is Horizontal. Enable Multiple Rows to let options wrap onto additional lines, then set the columns per row for each container size: Number of Columns (smallest containers, and the fallback for all sizes), Number of Columns Small Container, Number of Columns Medium Container, and Number of Columns Large Container.
Check Position — position of the radio/checkbox indicator relative to the label: Left (the default) or Right. Applies to Default and Toggle types.
Variant — label placement: Standard (the default), Label Hidden, Label Inline, or Label Stacked.
Required — marks the field as mandatory. Customize the error message with Message When Value Missing (shown when Required is enabled).
Read Only — the choice set is visible but not interactive.
Disabled — greys out all options and prevents interaction.
Field Level Help — optional tooltip text shown next to the label.
Type Attributes become available when Type is set to Button or Toggle, giving you type-specific controls:
Default
Standard radio buttons or checkboxes with orientation and check-position options.
Button
Transforms options into buttons. Configure stretch (full-width), display as row, show checkmark, checkmark position, and orientation.
Toggle
Renders options as toggle switches. Configure stretch, show checkmark, checkmark position, size (X-Small through Large), active/inactive messages, orientation, and check position.
Default Type additional settings
Button Type additional settings
Toggle Type additional settings
Using Dependent Picklists
The Avonni Input Choice Set component supports dependent picklists, allowing you to create dynamic and user-friendly flows that adapt based on prior selections.
Key Points
Dependent Picklist Support: The Input Choice Set component integrates with dependent picklist fields.
Controlling Value Attribute: When you select a dependent picklist field for your Input Choice Set, a "controlling value" attribute becomes available.
Connecting to Controlling Field: The "controlling value" attribute should be connected to the "Value semi-colon separated" attribute of the Input Choice Set that represents the controlling field.
Example Scenario
Imagine a flow designed to help users select their desired car. In the first Input Choice Set, they choose a "Car Maker" (e.g., Toyota, Honda, Ford). This acts as the controlling field.
The second Input Choice Set presents the "Car Model" options. Crucially, its "controlling value" attribute is connected to the "Value semi-colon separated" attribute of the "Car Maker" Input Choice Set.
As a result, when a user selects "Toyota" in the first step, the second Input Choice Set dynamically adjusts to display only Toyota models (e.g., Camry, Corolla, RAV4). If they switch to "Honda," the model options instantly update to reflect Honda's lineup (e.g., Civic, Accord, CR-V).
Visual Demonstration
By effectively utilizing dependent picklists with the Input Choice Set component, you can create intuitive user flows and maintain data integrity by presenting only valid choices at each step.
Interactions
Interactions define what happens when users interact with the Choice Set. Configure them from the Interactions tab of the Edit Choice Set panel.
Change
Fires when the user selects or deselects an option. Use this to navigate to another screen, show a toast notification, or trigger other flow logic immediately — without waiting for the user to click Next.
Output Variables
The Input Choice Set exposes several output variables you can reference in your flow after the screen. To use them, select the screen element in Flow Builder, then the Input Choice Set component, and pick the output variable you need.
Selection
When users select one or more options, these variables capture the selection.
Selected Option
Record (SObject)
The Salesforce record of the option the user selected. When using radio buttons (single-select), this is the one selected option.
Selected Options
Record Collection (SObject[])
All selected options as a collection of Salesforce records. Use this when Is Multi Select is enabled.
Value Collection
Text Collection (String[])
The values of all selected options as a list of strings. Works for both single and multi-select modes.
Value Serialized
Text (String)
The selected values as a JSON string. Useful for passing to an Apex action or subflow.
Value Semi Colon Separated
Text (String)
All selected values joined by semicolons into a single string (e.g., "Value1;Value2;Value3"). Matches the standard Salesforce multi-select picklist format.
Number of Options Selected
Integer
The count of how many options the user selected. Useful for validation logic or conditional branching.
Example: A survey form uses checkboxes for "Which features do you use?". After the screen, use Selected Options to loop through and log each feature, or use Value Semi Colon Separated to store all selections in a multi-select picklist field.
Component Metadata
Number of Items
Integer
The total number of options currently loaded in the Input Choice Set. Useful for displaying a count or making decisions when no options are available.
Styling
The Style tab lets you fine-tune the Input Choice Set's spacing, label, and the appearance of each option. The option sections adapt to the selected display type. Configure it from the Style tab of the Edit panel.
Controls the outer spacing around the component, 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 component's content and its border.
Top / Right / Bottom / Left: Adjust the inner spacing on each side.
Controls the component's dimensions.
Width / Height: Set fixed dimensions for the component.
Min Width / Max Width / Min Height / Max Height: Constrain the size within bounds.
Overflow: Control how content that exceeds the bounds is handled.
Styles the field label above the choice set.
Color: Set the label text color.
Font Size / Font Style / Font Weight: Control the label typography.
Styles the text label of each option. (set per display type: Default/Checkbox, Toggle, Button.)
Color: Set the option label color. For the Button type, default, checked, checked-hover, and hover states are available.
Font Size / Font Style / Font Weight: Control the option label typography.
Line Clamp: Limit each option label to a maximum number of lines (Default and Toggle types).
Styles the selectable control of each option. (set per display type: Default/Checkbox, Toggle, Button.)
Background Color: Set the option background, with checked, hover, and focus states depending on the type.
Foreground / Checkmark Color: Set the checkmark or foreground color.
Switch Background Color: Set the toggle switch color (Toggle type), with a checked state.
Border Color: Set the option border color, with checked and hover states.
Border Size / Border Style / Border Radius: Adjust the option border (Toggle and Button types).
Last updated
Was this helpful?