> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/flow/flow-components/input-choice-set.md). # Input Choice Set
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. | Data Source | Best For | | ---------------------------------------------------------------- | --------------------------------------- | | [**Manual**](/flow/component-builder/data-sources/manual.md) | Fixed, pre-defined options | | [**Variable**](/flow/component-builder/data-sources/variable.md) | Options from a Flow collection variable | | [**Picklist**](/flow/component-builder/data-sources/picklist.md) | A Salesforce picklist field's values | | [**Query**](/flow/component-builder/data-sources/query.md) | Options from Salesforce records | {% hint style="success" %} 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. {% endhint %} ### 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. * **Tooltip** — Tooltip text shown on hover. ### Properties The flat set of main settings controls the choice set's label, behavior, and layout. * **Label** — text label displayed above the choice set. * **Type** — rendering style of the choice set. Options: **Default** (standard radio buttons or checkboxes), **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** — **Vertical** (stacked list) or **Horizontal** (side by side). Horizontal layout enables additional column count controls. * **Check Position** — position of the radio/checkbox indicator relative to the label: **Left** or **Right**. Applies to Default and Toggle types. * **Variant** — label placement: Standard, Label Hidden, Label Inline, or Label Stacked. * **Required** — marks the field as mandatory. Customize the error message with **Message When Value Missing**. * **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 after you select a **Type** to give you type-specific controls:
Input TypeDescription
DefaultStandard radio buttons or checkboxes with orientation and check-position options.
ButtonTransforms options into buttons. Configure stretch (full-width), display as row, show checkmark, checkmark position, and orientation.
ToggleRenders 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

Shows the overall flow design with two Input Choice Sets.

Highlights the configuration of the second Input Choice Set, showcasing the connected "controlling value" attribute.

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](/flow/component-builder/interactions-panel.md) 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. | Output variable | Type | What it returns | | ------------------------------ | ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | | **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. {% hint style="info" %} **Which output should I use?** * Need the full record(s)? → **Selected Option** (single) or **Selected Options** (multiple) * Need a semicolon-separated string for a multi-select picklist? → **Value Semi Colon Separated** * Need to validate minimum selections? → **Number of Options Selected** * Passing to Apex? → **Value Serialized** (JSON string) {% endhint %} ### Component Metadata | Output variable | Type | What it returns | | ------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | | **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. {% tabs %} {% tab title="Margin" %} 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. {% endtab %} {% tab title="Padding" %} Controls the *inner* spacing between the component's content and its border. * **Top / Right / Bottom / Left:** Adjust the inner spacing on each side. {% endtab %} {% tab title="Size" %} 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. {% endtab %} {% tab title="Label" %} Styles the field label above the choice set. * **Color:** Set the label text color. * **Font Size / Font Style / Font Weight:** Control the label typography. {% endtab %} {% tab title="Overflow Button" %} Styles the "show more" overflow button when options collapse. * **Spacing Block Start / Block End / Inline Start / Inline End:** Adjust the button spacing. * **Text Color:** Set the button text color, with default, active, and hover states. * **Background Color:** Set the button background, with default, active, and hover states. * **Border Color:** Set the button border color, with default, active, and hover states. {% endtab %} {% tab title="Option Label" %} 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). {% endtab %} {% tab title="Option" %} 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). {% endtab %} {% endtabs %} *** --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.avonnicomponents.com/flow/flow-components/input-choice-set.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.