> 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

<figure><img src="/files/czN7dOnP5tejdYX3tZtP" alt="" width="375"><figcaption></figcaption></figure>

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.

<figure><img src="/files/ba1ndFGMPqN5hMZgLHfx" alt=""><figcaption></figcaption></figure>

**Rows** are created manually and represent different items, records, or categories that users evaluate. Each row provides context for the column options.

<figure><img src="/files/RW5Uepsk3ecPtYIpQdQy" alt=""><figcaption></figcaption></figure>

**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.
* **Name** — Unique identifier for the option; used in output variables when an option is selected.

### 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).
* **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="Layout and Dimensions" %}

* **Margin:** Control the spacing around the grid to position it correctly within its surrounding elements.
* **Size:** Adjust the overall size of the grid container to fit your layout requirements.
  {% endtab %}

{% tab title="Grid Appearance" %}

* **Grid Background:** Customize the background color of the entire grid container.
* **Grid Border:** Add a border around the grid to provide visual definition. You can customize the border's style (solid, dashed, etc.), color, and thickness.
  {% endtab %}

{% tab title="Labels and Headings" %}

* **Label:** Style the main label or title that appears above the grid. Adjust the font, size, color, and weight to clearly identify the grid's purpose.
* **Columns Label:** Customize the appearance of the labels that identify each column in the grid.
* **Rows Label:** Customize the appearance of the labels that identify each row in the grid.
  {% endtab %}

{% tab title="Input Cell Customization" %}
**Input:** Style the individual input cells within the grid. This includes options for:

* **Background:** Set the background color of the cells.
* **Border:** Add or customize borders around the cells.
* **Text:** Style the text within the cells, including font, size, and color. You can also customize the appearance of selected or unselected cells.
  {% endtab %}
  {% endtabs %}

By utilizing these styling options, you can create Input Choice Set Grids that are functional, easy to use, visually appealing, and consistent with your application's overall design.

***

## 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=<question>&goal=<endgoal>
```

`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.