# Combobox

## Combobox Tutorial Examples

{% content-ref url="/spaces/dHOej9Pd5IxJNGEJMZKW/pages/9sEBLKlcd755E6HDFStc" %}
[User Activity Report](/projects/dynamic-components/working-with-data/user-activity-report.md)
{% 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="/pages/NMTcHeq9UuKYUmBedI8t">/pages/NMTcHeq9UuKYUmBedI8t</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.


---

# Agent Instructions: 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:

```
GET https://docs.avonnicomponents.com/dynamic-components/components/combobox.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.