# @synerise/ds-search
> Search UI Component for the Synerise Design System
Latest version **2.0.6** (published 2026-09-24) · ISC license · 0 weekly downloads
## Install
```sh
npm install @synerise/ds-search
pnpm add @synerise/ds-search
yarn add @synerise/ds-search
bun add @synerise/ds-search
```
## Health
**Score 70/100 (B)** — status: active.
Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score.
Warnings: low downloads.
## Facts
| | |
|---|---|
| Version | 2.0.6 |
| Published | 2026-09-24 |
| First published | 2020-02-28 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 8 |
| Unpacked size | 170.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | synerise |
## Links
- npm: https://www.npmjs.com/package/@synerise/ds-search
- Repository: Synerise/synerise-design
- npm.io page: https://npm.io/package/@synerise/ds-search
## Dependencies (8)
- [react-window](https://npm.io/package/react-window.md) ^1.8.11
- [@synerise/ds-icon](https://npm.io/package/@synerise/ds-icon.md) ^2.2.0
- [@synerise/ds-utils](https://npm.io/package/@synerise/ds-utils.md) ^2.2.0
- [@synerise/ds-button](https://npm.io/package/@synerise/ds-button.md) ^2.1.1
- [@synerise/ds-tooltip](https://npm.io/package/@synerise/ds-tooltip.md) ^2.0.6
- [react-onclickoutside](https://npm.io/package/react-onclickoutside.md) ^6.9.0
- [@synerise/ds-list-item](https://npm.io/package/@synerise/ds-list-item.md) ^2.1.3
- [@synerise/ds-scrollbar](https://npm.io/package/@synerise/ds-scrollbar.md) ^2.0.5
## Recent versions
- 2.0.6 (latest) — 2026-09-24
- 2.0.5 — 2026-09-22
- 2.0.4 — 2026-09-18
- 2.0.3 — 2026-09-16
- 2.0.2 — 2026-09-08
- 2.0.1 — 2026-09-02
- 2.0.0 — 2026-08-26
- 1.5.38 — 2026-08-18
- 1.5.37 — 2026-08-14
- 1.5.36 — 2026-08-13
- 1.5.35 — 2026-08-11
- 1.5.34 — 2026-07-23
- 1.5.33 — 2026-07-16
- 1.5.32 — 2026-07-09
- 1.5.31 — 2026-07-09
- … 431 more at https://npm.io/package/@synerise/ds-search/versions
## README
---
id: search
title: Search
---
Search UI Component
## Installation
```
pnpm add @synerise/ds-search
```
## Usage
```tsx
import Search from '@synerise/ds-search';
const parameters = [
{ text: 'First Name', icon: },
{ text: 'Last Name', icon: },
{ text: 'Sex', icon: },
{ text: 'City', icon: },
{ text: 'Transactions', icon: }
];
const recent = [
{ text: 'Bangkok', filter: 'City', icon: },
{ text: 'Frank', filter: 'Last Name', icon: },
{ text: 'Basel', filter: 'City', icon: },
];
const [value, setValue] = React.useState('');
const [parameterValue, setParameterValue] = React.useState('');
const [suggestions, setSuggestions] = React.useState([]);
return (
{
setValue(value);
}}
onParameterValueChange={(value, parameter) => {
setParameterValue(value);
const fakeApiResponse = getSuggestions(value);
setSuggestions(fakeApiResponse);
}}
recentDisplayProps={{
tooltip: "recentTooltip",
title: "recentTitle",
rowHeight: 32,
visibleRows: 3,
itemRender: (item: FilterElement) => {item && item.text},
divider: (
),
}}
parametersDisplayProps={{
tooltip: "parametersTooltip",
title: "parametersTitle",
rowHeight: 32,
visibleRows: 6,
itemRender: (item: FilterElement) => (
}
>
{item && item.text}
),
}}
suggestionsDisplayProps={{
tooltip: "suggestionsTooltip",
title: "suggestionsTitle",
rowHeight: 32,
visibleRows: 6,
itemRender: (item: FilterElement) => {item && item.text},
}}
/>
)
```
## Demo
## API
| Property | Description | Type | Default |
| ----------------------- | -------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ | ------- |
| clearTooltip | Clear button tooltip text | string | - |
| filterLookupKey | key in parameter item object for displaying parameter label in input | string | - |
| hideLabel | Hide label in search input | boolean | - |
| disableInput | Disable search input | boolean | - |
| inputProps | Props object passed to the SearchInput component | [InputProps](https://design.synerise.com/docs/components/input/#input-1) | - |
| onParameterValueChange | Callback when set parameter type | function | - |
| onValueChange | Callback when input changes | function | - |
| parameters | Parameters items data displayed in search dropdown | object | - |
| parametersDisplayProps | An object containing the details of how parameters list should render | DataSetProps | - |
| parameterValue | Chosen parameter type | string | - |
| placeholder | Input placeholder | string | - |
| recent | Recent items data displayed in search dropdown | object | - |
| recentDisplayProps | An object containing the details of how recent items list should render | DataSetProps | - |
| suggestions | Suggestions items data displayed after picking particular parameter in search dropdown | object or undefined or null | - |
| suggestionsDisplayProps | An object containing the details of how suggestions list should render | DataSetProps or undefined or null | - |
| textLookupConfig | config of keys for lookup in parameters, recent and suggestions datasets | { parameters: string; recent: string; suggestions: string} | - |
| value | The input content value | string | - |
| searchWidth | Width of the search input when expanded | number | - |
| dropdownWidth | Width of the suggestions dropdown. Will match search input if undefined | number | - |
| alwaysExpanded | Enable expanded input on Search component with dropdown | boolean / undefined | - |
| searchTooltipProps | Props forwarded to the Tooltip wrapping the search input | TooltipProps | - |
### DataSetProps
| Property | Description | Type | Default |
| ----------- | ------------------------------------------------------------------------------- | ----------------------------- | ------- |
| divider | ReactElement displayed at the bottom of the list | ReactElement | - |
| itemRender | Function rendering single item of the list | (item: object) => JSX.Element | - |
| rowHeight | Height of item in the list | number | - |
| title | Title of the item list | string | - |
| tooltip | Tooltip of the item list, displayed when hovering on the icon next to the title | string | - |
| visibleRows | Number of rows visible in the list | number | - |
## Search usage
```tsx
import { SearchInput } from '@synerise/ds-search';
const [value, setValue] = React.useState('');
return (
{
console.log(value);
setValue(value);
}}
value={value}
onClear={() => {
console.log('Cleared!');
}}
closeOnClickOutside={true}
/>
);
```
### SearchInput
| Property | Description | Type | Default |
| ------------------- | ------------------------------------------------------------------------- | ------------------------------------------------------------------------ | ------- |
| alwaysHighlight | When set, the input always has blue border when expanded | boolean | `false` |
| alwaysExpanded | Boolean value to force expanded state of the input | boolean | `false` |
| clearTooltip | Clear button tooltip text | ReactNode | - |
| closeOnClickOutside | Collapses the input when clicking outside. The decision fires on `mousedown`/`touchstart`, but the collapse animation is deferred to the matching `mouseup`/`touchend` so clicks on adjacent layout-shifting content stay reliable | boolean | `false` |
| disabled | Disables the entire component including the search button | boolean | - |
| disableInput | Disables only the text input; search button remains active | boolean | - |
| filterLabel | Label displayed on the left-hand side of the input caret | `{ icon?: ReactNode; [key: string]: any }` or null | - |
| focusTrigger | Toggle this boolean to imperatively focus the input | boolean | - |
| inputProps | Props object passed to the input element of the component | [InputProps](https://design.synerise.com/docs/components/input/#input-1) | - |
| moveCursorToEnd | Moves caret to end of value when toggled | boolean | - |
| onChange | Callback when input changes | `(value: string) => void` | - |
| onButtonClick | Callback executed when clicking search button | function | - |
| onClear | Callback after clicking clear button | function | - |
| onClick | Callback executed when clicking inside an input | function | - |
| onKeyDown | Callback executed when pressing a keyboard key. | function | - |
| onToggle | Callback executed when expanding / narrowing the input wrapper | function | - |
| placeholder | Input placeholder | string | - |
| searchTooltipProps | Props forwarded to the Tooltip wrapping the input | Partial | `{}` |
| toggleTrigger | Toggle this boolean to imperatively expand / collapse the input | boolean | - |
| value | The input content value | string | - |
### SearchInput usage
```tsx
import { SearchInput } from '@synerise/ds-search';
const [value, setValue] = React.useState('');
return (
{
console.log(value);
setValue(value);
}}
value={value}
onClear={() => {
console.log('Cleared!');
}}
closeOnClickOutside={true}
/>
);
```
---
_Source: https://npm.io/package/@synerise/ds-search · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._