# Checkbox Group

## Overview

The Avonni Checkbox Group component enables users to select one or multiple options from a list, making it ideal for use in forms, filters, or preference selections within Salesforce Dynamic Components. It supports various data sources to populate options dynamically from Salesforce.

{% hint style="info" %}
In the Dynamic Components Builder, the Checkbox Group component is referred to as "Input Choice Set" when you're working with its attributes (e.g., for bindings like `$Component.InputChoiceSet.Value`).
{% endhint %}

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FPGVu2nLJKHJwAmBNYzIj%2F2025-07-16_09-23-00.png?alt=media&#x26;token=a3cd164e-3e1f-4870-817f-d7b89b8e5be5" alt=""><figcaption></figcaption></figure>

### Key features

* **Flexible Data Sources:** Connect to manual lists, variables, queries, or picklists for option population.
* **Selection Modes:** Single or multi-select with bound values.
* **Customization:** Variants, types (e.g., buttons, toggles), orientations, and layouts for UI fit.
* **Interactivity Controls:** Required, read-only, or disabled states.

*Tip:* Use for multi-choice scenarios; for single toggles, consider the Avonni Toggle component.

### Use Cases

* Filter records in Data Tables (e.g., select multiple stages for Opportunities).
* Capture user preferences (e.g., newsletter topics).
* Form multi-selections (e.g., interests in lead forms).
* Dynamic queries (e.g., choose product categories from a picklist).
* Status indicators (e.g., toggle-like buttons for task checklists).

## Configuration

Select the Checkbox Group on the canvas to access properties in the right-hand Properties Panel.

### **Basic Properties**

These handle identification, labeling, and data sourcing.

| Property        | Type            | Description                                                                                                                          | Example                                 |
| --------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------- |
| API Name        | Text            | Unique identifier for the instance.                                                                                                  | StageFilter                             |
| Label           | Text            | Main label for the group.                                                                                                            | "Select Stages:"                        |
| Field Help Text | Text (Optional) | Additional guidance next to the label.                                                                                               | "Choose one or more."                   |
| Data Source     | Select          | Source for options: manual (static list), variable (from Variable resource), query (Salesforce query), picklist (from object field). | picklist (e.g., Opportunity StageName). |

### **Core Functionality & Data Binding**

These define selections and bindings.

| Property         | Type/Condition                | Description                                                                              |
| ---------------- | ----------------------------- | ---------------------------------------------------------------------------------------- |
| Is Multi Select  | Boolean (Toggle)              | On: Allows multiple selections (uses Value Collection); Off: Single select (uses Value). |
| Value            | Text                          | Bound to selected value (e.g., Variable or Formula).                                     |
| Value Collection | Text (Active if multi select) | Bound to array of selected values (e.g., Collection Variable).                           |

### **Appearance & Formatting**

These control visual style and layout.

| Property       | Type/Condition                  | Description                                                                                                | Options/Examples               |
| -------------- | ------------------------------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------ |
| Variant        | Select                          | Label positioning: standard (above), label-hidden, label-inline (beside), label-stacked.                   | standard.                      |
| Type           | Select                          | Display style: default (checkboxes), button (button group), toggle (switches).                             | button for modern look.        |
| Orientation    | Select                          | Arrangement: vertical (stacked), horizontal (side-by-side).                                                | horizontal.                    |
| Layout         | Settings (Active if horizontal) | Sub-options: Multiple Rows (toggle for wrapping), Number of Columns (e.g., 2-12, based on container size). | Multiple Rows: On, Columns: 3. |
| Check Position | Select                          | Checkbox/toggle placement: left or right of label.                                                         | left.                          |

{% hint style="success" %}

## Tip

For horizontal layouts, set columns to match the container width for responsive design.
{% endhint %}

### **Behavior Properties**

These manage user interaction.

| Property  | Type    | Description                                           |
| --------- | ------- | ----------------------------------------------------- |
| Required  | Boolean | Mandates at least one selection; use with validation. |
| Read Only | Boolean | Displays selections but prevents changes.             |
| Disabled  | Boolean | Disables all interactions.                            |

## Examples

### **Example 1: Single-Select Stage Filter**

This example creates a single-select checkbox group for Opportunity stages, bound to a picklist.

{% stepper %}
{% step %}

#### **Configure Properties**

* **Label**: "Select Stage"
* **Data Source**: picklist (Opportunity > StageName)
* **Is Multi Select**: Off
* **Variant**: standard
* **Type**: button
* **Orientation**: vertical

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FTHgaGcj30Te7DA0jIKWT%2F2025-07-16_09-08-44.png?alt=media&#x26;token=1c8b88e8-ed1e-4b18-8dcb-b3b734002bae" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### Integrate with Data Table for Dynamic Filtering

Connect the Checkbox Group to an Avonni Data Table. This filters Opportunity records based on the selected stage(s), showing only matching data. The table's query retrieves data from Salesforce and responds to user selections.

1. **Add Data Table Component:** Drag the "Data Table" from the Component Library onto the canvas, below the Checkbox Group.
2. **Configure Query Data Source:** In the Data Table's Properties Panel:
   * Set Data Source to "Query" mode.
   * Choose Object: "Opportunity".
   * Add a reactive filter: StageName equals {!selectedStage} (bind to the Value or Value Collection from the Checkbox Group; for multi-select, use "in" operator and the collection).
3. **Add Columns:** Select Opportunity fields to display (e.g., Name, Amount, Close Date).

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FgBNQ8Cv8mesAxQnd0lk5%2F2025-07-16_09-10-13.png?alt=media&#x26;token=00abf366-9061-4e07-a2e3-470d0493db87" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

**Result:** Users select one stage, updating the variable for filtering.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FvCirScmsK34C7vMnL5ou%2F2025-07-16_09-18-59%20(1).gif?alt=media&#x26;token=bea209ff-b7b6-4473-93cb-49b589e92ccb" alt=""><figcaption></figcaption></figure>

***

### **Example 2: Controlling the Visibility of Other Components**

Combine the Checkbox Group with the "[Set Component Visibility](https://docs.avonnicomponents.com/dynamic-components/core-concepts/component-visibility)" feature to show/hide other components dynamically based on user selections. This is useful for conditional UIs, such as revealing a Kanban board only when specific filters are selected.

{% stepper %}
{% step %}

#### **Configure Checkbox Group**

* API Name: statusFilter
* Label: "Select Status"
* Data Source: manual (options: "Active", "Inactive", "Pending")
* Is Multi Select: Off (for single select; adjust for multi)
* Value: Bind to {!selectedStatus} (create a Text Variable)
* Variant: standard
* Type: default
* Orientation: vertical
  {% endstep %}

{% step %}

#### **Add Target Component (e.g., Kanban)**

Drag a Kanban component onto the canvas
{% endstep %}

{% step %}

#### **Set Visibility Rule on Kanban**

* Select the Kanban.
* In Properties Panel > Set Components Visibility, add a visibility condition like Input Choice Set value equal to a specific name.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FInBtHSarlZfERil7DpOm%2F2025-07-16_09-39-09.png?alt=media&#x26;token=275ac97d-2bc9-4799-99d6-58d19c5be51e" alt="" width="375"><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

**Result:** The Kanban appears only when "All Divisions" is selected (or contains the value in multi-select), hiding otherwise for a cleaner, context-aware interface

## Key Considerations

* **Data Source Matching:** Ensure options align with the selected mode (e.g., picklist for enums); test queries for large datasets.
* **Layout Responsiveness:** For horizontal, adjust columns based on screen size to prevent overflow.
* **Validation:** Combine Required with flows to enforce selections in forms.
* **Accessibility:** Use descriptive labels; toggles/buttons improve touch-friendliness.

## **Troubleshooting Common Issues**

* **Options Not Loading:** Verify Data Source config (e.g., query permissions, picklist field).
* **Layout Overflow:** If horizontal, enable Multiple Rows or reduce the number of columns.
* **Disabled Not Working:** Ensure no conflicting interactions; test in preview.
* **No Defaults:** Pre-populate Variables for initial selections if needed.

## Summary

The Avonni Checkbox Group component offers versatile option selection with Salesforce data integration and customizable styles. It's great for filters and forms in Dynamic UIs. For related components, see Avonni Picklist or Data Sources Guide