# ef-combo-box

Combines a popup with a filterable selection list

## Properties

| Property            | Attribute             | Type                        | Default                           | Description                                      |
|---------------------|-----------------------|-----------------------------|-----------------------------------|--------------------------------------------------|
| `clears`            | `clears`              | `boolean`                   | false                             | Show clears button                               |
| `data`              |                       | `ComboBoxData<T>`           | []                                | Data array to be displayed                       |
| `disabled`          | `disabled`            | `boolean`                   | false                             | Set disabled state                               |
| `error`             | `error`               | `boolean`                   | false                             | Set error state                                  |
| `filter`            |                       | `ComboBoxFilter<T> \| null` | "createDefaultFilter<T>(this)"    | Custom filter for static data<br />Set this to null when data is filtered externally, eg XHR |
| `freeText`          | `free-text`           | `boolean`                   | false                             | Allow to enter any value                         |
| `label (readonly)`  |                       | `string`                    | ""                                | Label of selected value                          |
| `multiple`          | `multiple`            | `boolean`                   | false                             | Multiple selection mode                          |
| `opened`            | `opened`              | `boolean`                   | false                             | Track opened state of popup                      |
| `placeholder`       | `placeholder`         | `string`                    | ""                                | Set placeholder text                             |
| `query`             |                       | `string \| null`            | null                              | Query string applied to combo-box<br />Set via internal input |
| `queryDebounceRate` | `query-debounce-rate` | `number`                    | "0"                               | Control query rate in milliseconds               |
| `readonly`          | `readonly`            | `boolean`                   | false                             | Set readonly state                               |
| `renderer`          |                       |                             | "createComboBoxRenderer<T>(this)" | Renderer used to render list item elements       |
| `value`             | `value`               | `string`                    | ""                                | Returns the first selected item value.<br />Use `values` when multiple selection mode is enabled. |
| `values`            |                       | `string[]`                  | []                                | Returns a values collection of the currently<br />selected item values |
| `warning`           | `warning`             | `boolean`                   | false                             | Set warning state                                |

## Events

| Event            | Description                                      |
|------------------|--------------------------------------------------|
| `opened-changed` | Fired when the user opens or closes control's popup. The event is not triggered if `opened` property is changed programmatically. |
| `query-changed`  | Fired when the user changes value in the input to change a query word. If `query-debounce-rate` is set, this event will be triggered after debounce completion. The event is not triggered if `query` property is changed programmatically. |
| `value-changed`  | Fired when the user commits a value change. The event is not triggered if `value` property is changed programmatically. |