# Combobox

## Combobox Tutorial Examples

{% content-ref url="<https://app.gitbook.com/s/dHOej9Pd5IxJNGEJMZKW/dynamic-components/working-with-data/user-activity-report>" %}
[User Activity Report](https://app.gitbook.com/s/dHOej9Pd5IxJNGEJMZKW/dynamic-components/working-with-data/user-activity-report)
{% endcontent-ref %}

***

## Setting Up Your Combobox

### Choose a Data Source

In the Properties Panel, find the Data Source property and select one of the following:

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Manual</strong></td><td>Enter data directly into the component configuration.</td><td></td></tr><tr><td><strong>Variable</strong></td><td>This is useful for data that changes based on user interactions or other component logic.</td><td></td></tr><tr><td><strong>Query</strong></td><td>This is the most common option for displaying Salesforce records.</td><td></td></tr><tr><td><strong>Picklist</strong></td><td>Retrieve data dynamically from a standard or custom picklist field within Salesforce.</td><td><a href="../component-builder/data-sources/picklist">picklist</a></td></tr></tbody></table>

### Data Mappings (for Variable and Query sources)

After choosing your data source (Variable or Query), you need to tell the Combobox *which fields* from that data source should be used to display each option in the dropdown list. This is done through *data mappings*. You're essentially linking fields from your data to specific parts of the Combobox's appearance.

* **Label**: Select the field that contains the text you want to display for each option in the dropdown (e.g., Contact.Name, Account.Name, or a formula to combine fields).
* **Description**: Select the field that contains the subtext you want to display for each option in the dropdown.
* **Avatar Image Source**: Map a field (usually a URL field) containing the image to display in the combobox option.

### Configure General Settings

After setting up your data source and mappings, you can customize the Combobox's basic behavior and appearance using these general settings.

* **Label**: (Text) Enter a label for the Combobox itself (e.g., "Select a Contact:"). This label is displayed above the dropdown.
* **Value**: (Text/Collection)
  * This holds the currently selected value(s). It's essential to bind this to the proper field type.
  * For single-select, bind it to the value.
  * For Multiple select, bind it to a collection variable.
* **Placeholder**: (Text) Placeholder text to display when no option is selected.
* **Variant**: (Text) Select how the combobox is displayed: Standard, Label Inline, Label Stacked, Label Hidden

### Configure Dropdown List Settings

These settings control the behavior and appearance of the *dropdown list* itself (the part that appears when the user clicks on the Combobox):

* **Dropdown Alignment:** Align the dropdown list (Left, Center, Right, Auto).
* **Dropdown Length:** Visible dropdown height (5 or 7 options).
* **Multiselect:** Allow multiple selections (yes/no).
* **Maximum Selected Options:** (If Multiselect) Maximum selections allowed.
* **Minimum Selected Options:** (If Multiselect) Minimum selections required.
* **Keep Open on Select:** (If Multiselect) Keep dropdown open after selecting.
* **Show Search Input:** Show a search box within the dropdown.
* **Required:** Make a selection mandatory.
* **Disabled:** Disable the entire Combobox.
* **Hide Clear Icon:** Hide the "x" (clear) icon.
* **Hide Selected Options:** Hide options already selected

### Adding Interactions

The Combobox component supports interactions, allowing you to trigger actions when the user changes the selection. The most common event is **On Change**, which fires whenever the selected option (or options, in multi-select mode) changes.

#### **To add an interaction**

1. **Select the Combobox:** Click on the Combobox component in the Component Builder canvas.
2. **Go to the Interactions Panel:** Find the "Interactions" panel (or the "Interactions" section within the Properties Panel).
3. **Add a New Interaction:** Click the button or link to add a new interaction.
4. **Choose the Event:** Select the **On Change** event.
5. **Choose an Action:** When the selection changes, select the action you want to perform. Examples include:
   * **Navigate:** Go to a different page or record.
   * **Open Flow Dialog/Panel:** Launch a Screen Flow.
   * **Show Toast:** Display a notification message.
   * **Refresh Data Source:** Refresh a data source (often used in conjunction with reactive filtering, as shown in the example below).
   * **Set Variable Value**: Set a variable value.
6. **Configure the Action:** Provide the necessary settings for the chosen action. This often involves referencing the Combobox's current value.