consul/ui/packages/consul-ui/app/components/search-bar

## SearchBar

```handlebars
<SearchBar
  @value={{"search term"}}
  @onsearch={{action "search"}}
/>
```

### Arguments

| Argument | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `String` | | The string `value` of the freetext search bar |
| `onsearch` | `Function` | | The action to fire when the freetext search bar changes. Emits a native event with a `target.value` property containing the text typed into the search bar |
| `options` | `Array` |  | An array of Key/Values pairs to use for options for either a filter interface or a sort interface |
| `selected` | `Object` |  | An object containing a Key/Value pair of the currently selected option |
| `onchange` | `Function` |  | The action to fire when the filter/sort changes. Emits an Event-like object, when filtering this has a `target.value` property containg the key of the selected filter, when sorting this has a `target.selected` property containing the selected Key/Value pair |
| `secondary` | `string` |  | String identifier to signify what type of secondary filter to show. Currently only value here is 'sort' |

`SearchBar` is used for a variety of searching behaviours, freetext searching, filtering and sorting. It is also slot based to enable you to completely overwrite the secondary search if need be.

### Examples

```handlebars
{{! Freetext only search bar}}
<SearchBar
  @value={{"search term"}}
  @onsearch={{action "search"}}
/>
```

```handlebars
{{! Freetext and filter search bar}}
<SearchBar
  @value={{search}}
  @onsearch={{action (mut search) value='target.value'}}
  @selected={{filter.selected}}
  @options={{filter.items}}
  @onchange={{action (mut filterBy) value='target.value'}}
/>
```

```handlebars
{{! Freetext and sort search bar}}
<SearchBar
  @value={{search}}
  @onsearch={{action (mut search) value='target.value'}}
  @secondary="sort"
  @selected={{sort.selected}}
  @options={{sort.items}}
  @onchange={{action (mut sortBy) value='target.selected.key'}}
/>
```

### See

- [Component Source Code](./index.js)
- [Template Source Code](./index.hbs)

---