> 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.4.0/api-reference/uicomponents/uiconceptsearch.md).

# UIConceptSearch

Presentation component searching against concepts for example and present selected items

## Properties

| Name              | Type       | Default         | Description                                             |
| ----------------- | ---------- | --------------- | ------------------------------------------------------- |
| listItems         | `array`    |                 | **Required** - Array of items to present in search list |
| selectedItems     | `array`    |                 | **Required** - Array of item selected                   |
| label             | `string`   |                 | Label for the input/form                                |
| addButtonLabel    | `string`   |                 | **Required** - Add button label                         |
| addButtonIcon     | `string`   | `"\"fa-plus\""` | Add button label                                        |
| searchPlaceholder | `string`   |                 | **Required** - Placeholder text for input               |
| icon              | `string`   |                 | Default icons if avatar doesn't exists                  |
| width             | `string`   |                 | Full if you want it to take up full width               |
| loading           | `boolean`  |                 | **Required** - Tells if the component is loading items  |
| onAddClick        | `function` |                 | **Required** - Add click button callback                |
| onInputChange     | `function` |                 | **Required** - Input change callback                    |
| onItemSelect      | `function` |                 | **Required** - Item select callback                     |
| onItemRemove      | `function` |                 | **Required** - Iten remove cllback                      |
| onItemCreate      | `function` |                 | Item create callback                                    |

## Example

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

render($$) {
    const el = $$('div')

    return el.append(
        $$(UIConceptSearch, {
          listItems: this.state.listItems,
          loading: this.state.loading,
          selectedItems: this.state.selectedItems,
          label: 'Creator',
          addButtonLabel: 'Add creator',
          searchPlaceholder: 'Search for author',
          icon: 'fa-user',
          onAddClick: async () => {
              this.extendState({
                  loading: true,
                  listItems: [],
                  query: '*'
              })

              const result = await ConceptService.searchForConceptSuggestions(
                  'x-im/author',
                  this.state.query,
              )

              this.extendState({
                  loading: false,
                  listItems: result
              })
          },
          onInputChange: async (value) => {
              this.extendState({
                  loading: true,
                  listItems: [],
                  query: value
              })

              const result = await ConceptService.searchForConceptSuggestions(
                  'x-im/author',
                  this.state.query,
              )

              this.extendState({
                  listItems: result,
                  loading: false,
              })
          },
          onItemSelect: (authorItem) => {
              this.extendState({
                  selectedItems: [...this.state.selectedItems, authorItem]
              })
          },
          onItemCreate: () => {
              const newAuthor = {
                  ConceptName: this.state.query,
                  name: this.state.query,
                  uuid: NilUUID.getNilUUID()
              }

              this.extendState({
                  selectedItems: [
                      ...this.state.selectedItems,
                      newAuthor
                  ]
              })
          },
          onItemRemove: (item) => {
              this.extendState({
                  selectedItems: this.state.selectedItems.filter(author => {
                      if (NilUUID.isNilUUID(item.uuid)) {
                          return author.name !== item.name
                      }

                      return author.uuid !== item.uuid
                  })
              })
          }
        })
    )
}
```