> For the complete documentation index, see [llms.txt](https://docs.bdb.ai/bdb-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.bdb.ai/bdb-documentation/data-visualization/governed-dashboards/charts-gallery/filters/combobox.md).

# Combobox

{% hint style="success" %}
*Check out the walk-through given below on how to use a Combobox filter component in the Designer.*
{% endhint %}

![](https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2FhtTlMqoYTzadOZGc4eMj%2FCombobox%20filter.gif?alt=media\&token=ad12eaf0-d93e-4d6f-8854-e209142b28e5)

Combo Box is used to filter data on any associated components. Selecting an item from the drop down menu will change the data displayed in the associated components.

### **Best situation to use Combo Box :**

When user wants to filter data on associated components. 

When users wants to select only a particular item.

### Default Component Image: 

<div align="left"><img src="https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2FMHc9m5Acz4CQCJrY80u8%2FDefault%20Component%20Image.png?alt=media&amp;token=f864c9fc-efad-4501-bc80-48a38c6196df" alt=""></div>

### Properties of the Combo Box Filter:

#### **Background:**&#x20;

* The user can get the reflection of the chart by enabling the shadow option.&#x20;
* The user can also change the color and increase/ decrease the transparency of the shadow.

#### **General:**&#x20;

* The user can change the height, width, top and left position of the combo box filter component. &#x20;
* Font color-size-weight-family can be adjusted from the General Properties.&#x20;
* The user can select between different 'Selection' options.&#x20;
  * If selection is default, then no checkboxes will appear, directly user need to select a value by scrolling.&#x20;
  * If the selection is 'Single' then we can search one value and select. It is used when we have lots of values to select.&#x20;
  * If the selection is 'Multiple', then more than one value can be selected.&#x20;
  * If the user sets a value in selected index, that value gets displayed initially in the filter. In this scenario the user needs to enable the notify GV update.

{% hint style="info" %} <mark style="color:green;">Please Note</mark>: If initial visibility is not enabled, then the chart won’t be available for the first preview.
{% endhint %}

#### **Style:**&#x20;

* In this section user can set the Rollover color, Selection color and background color.

#### **Title:**&#x20;

* If user need to see the title, then enable that option. And in description section give a title user want to see along with the filter values.

#### General Properties:

<div align="left"><img src="https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2FJm6uvM1qqVmbdRlg4jm6%2FGeneral%20properties.png?alt=media&amp;token=7a9544c4-ff99-49f9-a8db-aefa1ba02fa7" alt=""></div>

#### Title properties:

<div align="left"><img src="https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2FFKGff4dvqFC05SDNZOSe%2Ftitle.png?alt=media&amp;token=dcc8638b-b04a-4ad1-88ff-20cd810c2ab3" alt=""></div>

#### Combo Box Filter variants after changing its properties

#### When selection is default

<div align="left"><img src="https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2FPXp8FwCw9SbwIuUP0j1z%2FWhen%20selection%20is%20default%20%20%20.png?alt=media&amp;token=803181f1-13a7-4ef6-8e0c-e28e53cdd36c" alt=""></div>

#### When selection is single select

<div align="left"><img src="https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2FrCbDyGmLh2NBOl7AiK4i%2FWhen%20selection%20is%20Single%20%20%20%20%20%20%20.png?alt=media&amp;token=b56ec464-cb1f-427f-b860-f108f3e22e18" alt=""></div>

#### When selection is Multiselect with enhance checkbox

<div align="left"><img src="https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2FXojyh7qyPVjc0UbBK3TP%2FWhen%20selection%20is%20Multiple.png?alt=media&amp;token=56e0d356-1030-4e2e-a042-c6dff07214ea" alt=""></div>