# ComboBox
#### Description
Custom combo box input
Options have options:
- key - Item key, may be a string or a number
- label - Display text
- icon - Optional name of icon that will be displayed before label
- disabled - Make option disabled
- onClick - On click function
ComboBox perceives all property`s for positioning from DropDown!
If you need to display a custom list of options, you must use advancedOptions property. Like this:
```js
const advancedOptions = (
<>
>
);
action("Selected option")(option)}
selectedOption={{
key: 0,
label: "Select"
}}
isDisabled={false}
scaled={false}
size="content"
directionX="right"
>
;
```
#### Usage
```js
import { ComboBox } from 'asc-web-components';
const options = [
{
key: 1,
icon: 'CatalogEmployeeIcon', // optional item
label: 'Option 1',
disabled: false, // optional item
onClick: clickFunction // optional item
},
...
];
console.log('selected', option)}
/>
```
#### Properties
| Props | Type | Required | Values | Default | Description |
| ------------------- | --------- | :------: | ------------------------------------------ | ------- | --------------------------------------------------------- |
| `options` | `array` | ✅ | - | - | Combo box options |
| `isDisabled` | `bool` | - | - | `false` | Indicates that component is disabled |
| `noBorder` | `bool` | - | - | `false` | Indicates that component is displayed without borders |
| `selectedOption` | `object` | ✅ | - | - | Selected option |
| `onSelect` | `func` | - | - | - | Will be triggered whenever an ComboBox is selected option |
| `dropDownMaxHeight` | `number` | - | - | - | Height of Dropdown |
| `scaled` | `bool` | - | - | `true` | Indicates that component is scaled by parent |
| `size` | `oneOf` | - | `base`, `middle`, `big`, `huge`, `content` | `base` | Select component width, one of default |
| `advancedOptions` | `element` | - | - | - | If you need display options not basic options |