# @synerise/ds-search-bar

> SearchBar UI Component for the Synerise Design System

Latest version **2.0.6** (published 2026-09-22) · ISC license · 0 weekly downloads

## Install

```sh
npm install @synerise/ds-search-bar
pnpm add @synerise/ds-search-bar
yarn add @synerise/ds-search-bar
bun add @synerise/ds-search-bar
```

## Health

**Score 55/100 (C)** — status: active.

Positive: no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no types; no esm support.

## Facts

| | |
|---|---|
| Version | 2.0.6 |
| Published | 2026-09-22 |
| First published | 2020-02-24 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | synerise |

## Links

- npm: https://www.npmjs.com/package/@synerise/ds-search-bar
- Repository: Synerise/synerise-design
- npm.io page: https://npm.io/package/@synerise/ds-search-bar

## Recent versions

- 2.0.6 (latest) — 2026-09-22
- 2.0.5 — 2026-09-18
- 2.0.4 — 2026-09-16
- 2.0.3 — 2026-09-08
- 2.0.2 — 2026-09-07
- 2.0.1 — 2026-09-02
- 2.0.0 — 2026-08-26
- 1.4.39 — 2026-08-18
- 1.4.38 — 2026-08-14
- 1.4.37 — 2026-08-11
- 1.4.36 — 2026-07-24
- 1.4.35 — 2026-07-23
- 1.4.34 — 2026-07-09
- 1.4.33 — 2026-06-17
- 1.4.32 — 2026-06-11
- … 362 more at https://npm.io/package/@synerise/ds-search-bar/versions

## README

---
id: search-bar
title: SearchBar
---

SearchBar UI Component

## Installation

```
npm i @synerise/ds-search-bar
or
yarn add @synerise/ds-search-bar
or
pnpm add @synerise/ds-search-bar
```

## Usage

```
import SearchBar from '@synerise/ds-search-bar'

<SearchBar />

```

## Demo

<iframe src="/storybook-static/iframe.html?id=components-search-bar--default"></iframe>

## API

| Property       | Description                              | Type                     | Default |
| -------------- | ---------------------------------------- | ------------------------ | ------- |
| autofocus      | Whether the input is focused             | boolean                  | `false` |
| className      | Optional class for the component         | string                   | -       |
| clearTooltip   | Tooltip description above clear button   | string / React.ReactNode | -       |
| disabled       | Whether the input is disabled.           | boolean                  | -       |
| iconLeft       | Place for optional icon on the left side | React.ReactNode          | -       |
| onSearchChange | Callback when user input                 | (value: string) => void  | -       |
| onClearInput   | Callback when user press clear button    | () => void               | -       |
| placeholder    | Placeholder                              | React.ReactNode          | -       |
| value          | The input content value                  | string                   | -       |
| autofocusDelay | Delay (ms) of the focus on search input  | number                   | -       |
| borderRadius   | Adds 3px border-radius to the wrapper    | boolean                  | -       |
| clearTooltipProps | Extra props for the clear icon tooltip | Partial\<TooltipProps\>  | -       |
| handleInputRef | Callback to access the inner input element | (ref: MutableRefObject\<HTMLInputElement \| null\>) => void | - |
| valuePrefix    | An element displayed before the value    | ReactNode                | -       |

---
_Source: https://npm.io/package/@synerise/ds-search-bar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._