> 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-grid.md). # Input Choice Set Grid The Avonni Input Choice Set Grid presents choices in an organized grid, simplifying selection in forms and data entry.
The Input Choice Set Grid lets users make selections in a matrix format — columns define the available criteria and rows define the items to evaluate. Each cell holds a value that is captured when the user selects it. *** ## Overview The Input Choice Set Grid functions similarly to a spreadsheet and consists of three main elements: **columns**, **rows**, and **values**. **Columns** represent the choices or criteria displayed across the top of the grid. You can populate columns manually, from a Flow variable, from a Salesforce picklist field, or via a direct Salesforce query.
**Rows** are created manually and represent different items, records, or categories that users evaluate. Each row provides context for the column options.
**Values** — each cell (where a row and column meet) has a value you define. When a user selects a cell, that value is stored, allowing for precise data capture. ### Common Uses * **Data Collection**: Organize complex data inputs, such as schedules, resource allocations, or preference mappings. * **Surveys and Feedback**: Gather user feedback across multiple criteria efficiently. * **Prefilling Values**: Prepopulate the grid with default selections to guide users or streamline data entry. *** ## Configuration To configure it, click the component on the Flow screen. The Edit Input Choice Set Grid 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 column choices come from. Pick it first — it controls what appears across the top of the grid. | Data Source | Best For | | ---------------------------------------------------------------- | -------------------------------------- | | [**Manual**](/flow/component-builder/data-sources/manual.md) | Fixed, pre-defined column options | | [**Variable**](/flow/component-builder/data-sources/variable.md) | Column options from a Flow collection | | [**Picklist**](/flow/component-builder/data-sources/picklist.md) | A Salesforce picklist field's values | | [**Query**](/flow/component-builder/data-sources/query.md) | Column options from Salesforce records | ### 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. * **Key Field** — Unique identifier for each option; used in output variables when an option is selected. (Advanced.) ### Properties * **Label** — the text label shown above the grid. * **Rows** — define the row items manually. Each row has a **Label** (display text) and a **Name** (unique identifier used to track selections). * **Value** — pre-select cells when the screen loads. Each entry pairs a **Row Name** and **Column Name** with a **Value** (checked or not). * **Is Multi Select** — when enabled, users can select more than one cell at a time. When off, selecting a new cell clears the previous selection. * **Variant** — controls label placement: Standard (above the grid), Label Hidden, Label Inside, or Label Stacked. * **Required** — marks the grid as mandatory. Customize the error message with **Message When Value Missing**. * **Read Only** — the grid is visible but not interactive. * **Disabled** — greys out the entire grid and prevents interaction. * **Field Level Help** — optional tooltip text shown next to the label. ## Interactions [Interactions](/flow/component-builder/interactions-panel.md) define what happens when users interact with the Input Choice Set Grid. Configure them from the **Interactions** tab of the Edit Input Choice Set Grid panel. ### Change Fires when the user selects or deselects a cell in the grid. Use this to store the updated selection or drive conditional logic downstream. *** ## Styling From the Style tab, you can customize the Input Choice Set Grid's appearance: {% tabs %} {% tab title="Margin" %} Controls the *outer* spacing around the component. * **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 edges. * **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="Border" %} Customizes the border surrounding the component. * **Color / Size / Style / Radius:** Set the component border color, thickness, line style, and corner roundness. {% endtab %} {% tab title="Background" %} Sets the component's background. * **Color:** Set the background color. {% endtab %} {% tab title="Grid" %} Styles the grid container itself. * **Background Color:** Set the grid's background color. * **Border Color / Border Size / Border Style / Border Radius:** Customize the grid's border. {% endtab %} {% tab title="Label" %} Styles the main label above the grid. * **Inline Start / Inline End:** Adjust the horizontal spacing around the label. * **Color:** Set the label text color. * **Font Size / Font Style / Font Weight / Font Family:** Control the label typography. {% endtab %} {% tab title="Columns Label" %} Styles the labels that identify each column. * **Color:** Set the column label color. * **Font Size / Font Style / Font Weight / Font Family:** Control the typography. * **Line Clamp:** Limit each column label to a maximum number of lines. {% endtab %} {% tab title="Rows Label" %} Styles the labels that identify each row. * **Inline Start / Inline End:** Adjust the horizontal spacing around the label. * **Color:** Set the row label color. * **Font Size / Font Style / Font Weight / Font Family:** Control the typography. * **Line Clamp:** Limit each row label to a maximum number of lines. {% endtab %} {% tab title="Input" %} Styles the selectable cells within the grid. * **Background Color / Background Color Checked:** Set the cell background for the default and selected states. * **Checkmark Color:** Set the color of the checkmark shown on a selected cell. * **Border Color / Border Color Checked / Border Color Focus:** Set the cell border color for the default, selected, and focused states. * **Shadow / Shadow Focus:** Set the cell shadow for the default and focused states. {% endtab %} {% endtabs %} *** ## Output Variables The Input Choice Set Grid 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 Input Choice Set Grid component, and pick the output variable you need. ### Cell Selection | Output variable | Type | What it returns | | -------------------- | ------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Value Collection** | Collection of Input Choice Set Grid Values | The selected cells as a typed Apex collection. Each item exposes the row name, column name, and the captured cell value — use this when you need to process selections in Apex or iterate through them in a Loop element. | | **Value Serialized** | Text (String) | The selected cells as a JSON string. Each object in the array contains a `row` key (row label), a `col` key (column label), and a `value` key (always `true` for selected cells). Parse it with an Apex invocable action to convert it into a collection you can loop over. | > **Example:** After a resource-allocation screen, read **Value Collection** in a Loop element to update records for each selected row–column pair, or pass **Value Serialized** to an Apex action that deserializes and processes the matrix in bulk. ### Others | Output variable | Type | What it returns | | ------------------- | ------- | ---------------------------------------------------------------- | | **Number of Items** | Integer | The total number of column choices currently loaded in the grid. | ### Flow Interaction Output Variables Like all interactive Flow components, the Input Choice Set Grid exposes generic output slots (Variable 1–10) that an [Open Flow Dialog](/flow/component-builder/interactions-panel/open-flow-dialog.md) or [Open Flow Panel](/flow/component-builder/interactions-panel/open-flow-panel.md) interaction can fill with values from a launched flow. See [Flow Interaction Output Variables](/flow/component-builder/interactions-panel/flow-interaction-output-variables.md). --- # 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-grid.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.