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

# UIConceptSearch

Presentation component searching against concepts for example and present selected items

**Since**: 7.0.0 (6.4.0)

| 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                                                                 |
| icon              | `string`   |                             | Optional icon to use if avatar doesn't exists, if omitted presets per concept type will be used |
| addButtonIcon     | `string`   | `""search-bold""` | Add button label                                                                                |
| searchPlaceholder | `string`   |                             | **Required** - Placeholder text for input                                                       |
| width             | `string`   |                             | Full if you want it to take up full width                                                       |
| loading           | `boolean`  | `false`                     | Tells if the component is loading items                                                         |
| working           | `boolean`  | `false`                     | Tells if the component is working on adding/updating or removing items                          |
| disabled          | `boolean`  | `false`                     | Set to false to hide the search button/field                                                    |
| onItemAdd         | `boolean`  | `false`                     | If it should be allowed to add a concept (only authors) with a nil uuid                         |
| onAddClick        | `function` |                             | **Required** - "Add button" click callback                                                      |
| onInputChange     | `function` |                             | **Required** - Input change callback                                                            |
| onItemSelect      | `function` |                             | **Required** - Item select callback                                                             |
| onItemEdit        | `function` |                             | **Required** - Selected item is clicked callback                                                |
| onItemRemove      | `function` |                             | **Required** - Item remove callback                                                             |
| onItemAdd         | `function` |                             | Item add callback, used to add concept with a nil uuid (authors only)                           |
| onItemCreate      | `function` |                             | Item create callback, used to create an actual concept item in repository                       |

### Example

```js
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: 'author-bold',
          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
                  })
              })
          }
        })
    )
}
```