Search bar component

Downloads in past


2.1.13 years ago5 years agoMinified + gzip package size for @opuscapita/react-searchbar in KB




SearchBar is suitable for both automatic filtering and searching.
There is two different use cases for the search bar:
    1. Search is started automatically after user's input.
  • In this case the user does not need to press the search icon (magnifier) to start the search and thus the icon is shown as gray with white background.
  • In this case the search bar should also have a parameter that can be used to adjust how many caharacters needs to be inputted after the search is started automatically. The default value for that parameter is 3 characters.
  • After the user has inputted the first character the search icon is changed to X -icon, which the user can click to clear all characters.

    1. Search is started only after the user clicks the search icon.
  • The search icon is shown in this case as white with dark gray background.
  • After the user has clicked the search icon the icon changes to X-icon, which the user can click to clear all characters.
  • If the user then modifies the inputted string, the X-icon is changed back to the search icon.
  • User should be able to move the keyboard focus to both input and icon area separately.


npm install @opuscapita/react-searchbar


View the DEMO

Change log

View the Change log

Migrate guide

View the Migrate guide between major versions



The default build with compiled styles in the .js file. Also minified version available in the lib/umd directory.

CommonJS/ES Module

You need to configure your module loader to use cjs or es fields of the package.json to use these module types. Also you need to configure sass loader, since all the styles are in sass format.


| Prop name | Type | Default / Parameter | Description | | ------------------ | ----------| ------------------- | ----------------------------------------------------------------------- | | id | string | oc-react-searchbar | ID prefix of HTML components | | className | string | '' | Component class | | inputClassName | string | '' | Class for input | | defaultValue | strings | '' | Default keyword | | minChars | number | 0 | Minimum chars allowed to search | | tooltipDelay | number | 0 | A millisecond delay amount to show and hide the tooltip once triggered. | | allowEmptySearch | bool | false | Enables search button even if the search query is empty | | isDynamic | boolean | false | Dynamic search enables automatic searching | | isTooltipEnabled | boolean | false | Is tooltip visible | | onSearch | function | (keyword: string) | Callback function for searched keyword | | onClear | function | () | Callback function for clearing keyword | | translations | object | { tooltip: '', searchPlaceHolder: 'Search...' } | Translations object |

Code example

import React from 'react';
import SearchBar from '@opuscapita/react-searchbar';

export default class ReactView extends React.Component {
  render() {
    return (