> 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.1.1/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.

### Properties

| Name             | Type                                                                                                                     | Description                                                                                                                                                                                   |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| list             | [`list`](https://docs.navigaglobal.com/writer/6.1.1/api-reference/uicomponents/pages/-LurWCbBHnkEkf__oHpl#UISelect.list) | **Required** - List object containing info for rendering. See [UISelect.list](https://docs.navigaglobal.com/writer/6.1.1/api-reference/uicomponents/pages/-LurWCbBHnkEkf__oHpl#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                                                                                                          |
| 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.1.1/api-reference/uicomponents/pages/-LurWCbBHnkEkf__oHpl#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: [
                    ...
                ]
            }
        }
    ]
}
```