# UIDropdown

Simple Drop down component, which renders a `select`-element containing `option`-elements.

**Since**: 7.0.0 (3.9.0)

| Name             | Type                                | Default         | Description                                                                                                                                                                 |
| ---------------- | ----------------------------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| options          | `Array.<{label: string, value: *}>` |                 | **Required** - An array of Objects with "label" and "value" properties                                                                                                      |
| header           | `string`                            |                 | **Deprecated**. Should be handle outside. Optional header property, renders an `h2`-element above the dropdown                                                              |
| disabled         | `boolean`                           | `false`         | Set to true to disable selection of the dropdown                                                                                                                            |
| size             | `string`                            | `"\"normal\""`  | Set size. normal\|huge\|large\|small\|tiny                                                                                                                                  |
| type             | `string`                            | `"\"default\""` | Style of dropdown. default\|primary\|secondary\|text default                                                                                                                |
| tabindex         | `number`                            | `0`             | Provied tabindex. Use -1 to disable tab navigation                                                                                                                          |
| direction        | `string`                            | `"\"down\""`    | Direction of the selection list postion. down\|up                                                                                                                           |
| optionsListAlign | `string`                            | `"\"left\""`    | Option list alignment against button. left\|right                                                                                                                           |
| optionsListWidth | `string`                            | `"\"auto\""`    | Option list width. Auto takes up just width it's need. auto\|full                                                                                                           |
| onChangeList     | `function`                          |                 | **Required** - Callback function when selected option changes. Selected item's value as parameter                                                                           |
| isSelected       | `function`                          |                 | **Required** - Callback which should return true for the currently selected option, runs for each item when rendered and gets all options and current option as parameters. |

## Example

```javascript
import {UIDropdown} from 'writer'

render($$) {
  const el = $$('div')
  return el.append(
     $$(UIDropdown, {
         options: [
             {label: "one", value: 1},
             {label: "two", value: 2}
         ],
         onChangeList: (value) => { this.extendState({ selectedValue: value }) },
         isSelected: (options, option) => { return option.value === this.state.selectedValue }
     })
  )
}
```