> 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/6.5.0/api-reference/uicomponents/uiselect.md).

# UISelect

This component renders a list of selectable items. Toggles, Buttons or Dropdown. Should be rewritten because kind of mess.

**Since**: 6.4.0 (3.2.0)

### Properties

| Name             | Type                                                                                                                     | Default     | Description                                                                                                                                                                                   |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------ | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| list             | [`list`](https://docs.navigaglobal.com/writer/6.5.0/api-reference/uicomponents/pages/-MI-NyoOc7paKsTzQ3jA#UISelect.list) |             | **Required** - List object containing info for rendering. See [UISelect.list](https://docs.navigaglobal.com/writer/6.5.0/api-reference/uicomponents/pages/-MI-NyoOc7paKsTzQ3jA#UISelect.list) |
| placeholder      | `string`                                                                                                                 |             | For dropdown. To provied placeholder value                                                                                                                                                    |
| emptyOptionLabel | `string`                                                                                                                 |             | For dropdown. Used insted of placeholder if want to provied reset option to dropdown                                                                                                          |
| size             | `string`                                                                                                                 | `"large"`   | **Only available for dropdown** Size of select. Variants: large\|small                                                                                                                        |
| direction        | `string`                                                                                                                 | `"down"`    | **Only available for dropdown** Direction of rendered options list. Variants: down\|up                                                                                                        |
| type             | `string`                                                                                                                 | `"default"` | **Only available for dropdown** Different types will be passed into this property. Variants default\|secondary                                                                                |
| isSelected       | `function`                                                                                                               |             | **Required** - Callback check if selected                                                                                                                                                     |
| onChangeList     | `function`                                                                                                               |             | **Required** - Callback when list changes                                                                                                                                                     |

### Example

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

render($$) {
    const el = $$('div')
    return el.append(
      $$(UISelect, {
          list: this.state.list,
          onChangeList: (listItems, selectedItem) => {
             this.addToSelectedItems(selectedItem)
          },
          isSelected: (listItems, item) => {
              const selectedItems = this.getSelectedItems()
              return selectedItems.some((selectedItem) => return selectedItem.value === item.value)
          }
      })
    )
}
```

## UISelect.list

This component renders a list of selectable items.

It supports 3 types of lists: drop-down list, toggle list and button list.

The list is defined as a property, that should contain:

### Properties

| Name         | Type                                                                                                                     | Default | Description                                                                         |
| ------------ | ------------------------------------------------------------------------------------------------------------------------ | ------- | ----------------------------------------------------------------------------------- |
| label        | `string`                                                                                                                 |         | **Required** - Only on top level list                                               |
| type         | `string`                                                                                                                 |         | **Required** - Type of output. toggle\|button\|dropdown                             |
| multivalue   | `boolean`                                                                                                                | `false` | Determines you should be able to select many options. **Don't works with dropdown** |
| values       | `Array.<object>`                                                                                                         |         | **Required** - List with values                                                     |
| values.title | `string`                                                                                                                 |         | **Required** - Title for value in list                                              |
| values.list  | [`list`](https://docs.navigaglobal.com/writer/6.5.0/api-reference/uicomponents/pages/-MI-NyoOc7paKsTzQ3jA#UISelect.list) |         | Toggle option. Optional list to be display when choosen                             |

### Example

```javascript
{
    label: '[a list label]',
    type: '[dropdown/toggle/button]',
    values: [
        {
            title: 'title 1', ...
        },
        {
            title: 'title 2', ...
        },
        {
            title: 'Additional options',
            list: {
                title: 'Other options',
                type: '[dropdown/toggle/button]',
                values: [
                    ...
                ]
            }
        }
    ]
}
```