# Combobox
## Overview
Combobox is a standard input component that allows the user to pick one of the options in it's drop-down list.
To see a live sample of the component you can go [here](https://samples-prod.demo.servoy-cloud.eu/solution/components?a=combobox).
## Get Started
Combobox
### Add a Combobox to a form
In the [Form Editor](https://docs.servoy.com/reference/servoy-developer/object-editors/form-editor), drag the Combobox component from the Pallet onto the form, then select a dataprovider and a valuelist.
Create Combobox
{% hint style="info" %}
If the component does not appear in the pallet, it means you do not have the Bootstrap Components package installed. Click "Get more components" at the top of the pallet to open the [Servoy Package Manager](https://docs.servoy.com/reference/servoy-developer/package-manager) and install it.
{% endhint %}
## Modifying a Combobox at Design-Time
Comboboxes, like all components, have properties that can be modified at design time to set the appearance and behavior of the component. Select the label in the [Form Editor](https://docs.servoy.com/reference/servoy-developer/object-editors/form-editor) to see a list of properties in the [Component Properties Editor](https://docs.servoy.com/reference/servoy-developer/views/properties#properties). Below are some common properties and how to set them at design time.
{% hint style="info" %}
See the reference docs for [Combobox](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/combobox) for a complete list of its [properties](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/combobox#properties).
{% endhint %}
### Setting the data-provider
Combobox's dataprovider can be set after the component has been added to the form or by setting it in [dataprovider](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/combobox#dataproviderid) property, found in the [Component Properties Editor](https://docs.servoy.com/reference/servoy-developer/views/properties#properties).
### Setting the valuelist
Combobox's [valuelist](https://docs.servoy.com/guides/develop/data-modeling/value-lists#overview) can be set it in [valuelist](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/combobox#valuelistid) property, found in the [Component Properties Editor](https://docs.servoy.com/reference/servoy-developer/views/properties#properties) and it should match the set [dataprovider](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/combobox#dataproviderid).
Example:
In order to get a drop down menu with orders' ship countries, the followings settings should be made:
1. set `shipcountry` as the Combobox [dataprovider](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/combobox#dataproviderid)
2. in case it doesn't exist, create a [valuelist](https://docs.servoy.com/guides/develop/data-modeling/value-lists#overview) using Table values and `shipcountry` column as dataprovider
3. set the countries list in [valuelist](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/combobox#valuelistid) property of the Combobox
## Handling Click Events
Like most components, Comboboxes have events, which allow you to execute some logic when something happens in the UI. Of course, the most common event for a combobox is the `onDataChange` event, which is triggered when the combobox is clicked and the value is changed.
To Handle the event, double-click the value for the [onDataChange](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/combobox#ondatachangemethodid) property in the [Properties Editor](https://github.com/Servoy/gitbook/blob/master/reference/servoy-developer/views/component-properties-editor.md). You will see the [Method Selection Wizard](https://docs.servoy.com/reference/servoy-developer/object-editors/method-selection-wizard). You'll have the option to select an existing Method or create a new Method. The method will be called when the Combobox's `onDataChange` event is fired and the [Event](https://docs.servoy.com/reference/servoycore/dev-api/application/jsevent) object will be passed to it.
Create method to handle the onDataChange event
```javascript
/**
*
* @param oldValue
* @param newValue
* @param {JSEvent} event
*
* @return {Boolean}
*
* @private
*
* @properties={typeid:24,uuid:"D2499C52-AC5E-4C9E-9B51-1415F0E83D04"}
*/
function onDataChange(oldValue, newValue, event) {
//enable and disable another page element according to the selected value
if (newValue == 'Yes')
{
elements.buttonDetails.enabled = true;
} else {elements.buttonDetails.enabled = false;}
return true;
}
```
{% hint style="info" %}
See the [Combobox reference](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/combobox) for a comprehensive list of [all events](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/combobox#events)
{% endhint %}
## Modifying a Combobox at Runtime
Comboboxes, like many components, can be modified at runtime through code. Below are a few examples of controlling a Combobox from code.
### Enabling / Disabling a Combobox
You can easily change the `enabled` state of a Combobox at runtime.
Example:
```javascript
function disableCombobox(){
elements.myCombobox.enabled = false;
}
```
### Hiding/Showing a Combobox
You can easily change the `visible` state of a Combobox at runtime.
Example:
```javascript
function hideCombobox(){
elements.myCombobox.visible = false;
}
```
## Calling Combobox API Methods
Like most components, a Combobox has API methods which can be called from code. Below is an example of common API calls.
### Add CSS Style Class
You can easily add a style class to a Combobox using the [`addStyleClass`](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/combobox#api) method.
Example:
```javascript
function AddStyleClassCombobox(){
elements.myCombobox.addStyleClass('mycssclass');
}
```
{% hint style="info" %}
See the [Combobox reference](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/combobox) for a complete list of programmable [properties](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/combobox#properties) and [methods](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/combobox#api).
{% endhint %}
## Related Articles
The following articles are recommended for additional reading
* [Combobox Reference Documentation](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/combobox)
* [Styling and Themes](https://docs.servoy.com/guides/develop/application-design/styling-and-themes)
* [Scripting the UI](https://docs.servoy.com/guides/develop/programming-guide/scripting-the-ui)
---
# 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.servoy.com/guides/develop/application-design/ui-components/input-controls/combobox.md?ask=
```
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.
