> For the complete documentation index, see [llms.txt](https://docs.navigaglobal.com/writer/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.navigaglobal.com/writer/8.1.3/api-reference/uicomponents/uidropdown.md).

# 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`                            | `"&quot;normal&quot;"`  | Set size. normal\|huge\|large\|small\|tiny                                                                                                                                  |
| type             | `string`                            | `"&quot;default&quot;"` | Style of dropdown. default\|primary\|secondary\|text default                                                                                                                |
| tabindex         | `number`                            | `0`                     | Provied tabindex. Use -1 to disable tab navigation                                                                                                                          |
| direction        | `string`                            | `"&quot;down&quot;"`    | Direction of the selection list postion. down\|up                                                                                                                           |
| optionsListAlign | `string`                            | `"&quot;left&quot;"`    | Option list alignment against button. left\|right                                                                                                                           |
| optionsListWidth | `string`                            | `"&quot;auto&quot;"`    | 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

```js
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 }
     })
  )
}
```