# UIDropdown

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

## Properties

| Name         | Type                                | Default | Description                                                                                                                                                                 |
| ------------ | ----------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| options      | `Array.<{label: string, value: *}>` |         | **Required** - An array of Objects with "label" and "value" properties                                                                                                      |
| header       | `string`                            |         | Optional header property, renders an `h2`-element above the dropdown                                                                                                        |
| disabled     | `boolean`                           | `false` | Set to true to disable selection of the dropdown                                                                                                                            |
| 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} 
         ],
         header: "One or two",
         onChangeList: (value) => { this.extendState({ selectedValue: value }) },
         isSelected: (options, option) => { return option.value === this.state.selectedValue }
     })
  )
}
```