Learning › ui › core › Search Box
Edit this page

SearchBox

The SearchBox React component displays an input box with an icon right justified bounded by the SearchBox. When the input box is empty, a magnifying glass icon is displayed. When text has been entered, a 'X' close, or clear, icon is displayed.

Properties

The SearchBox component has numerous properties, as defined in the SearchBoxProps interface.

There is one required prop: onValueChanged, which is triggered when the content of SearchBox is changed. Use this function to react to the text entered in the SearchBox. The frequency of polling for changes can be controlled by the valueChangedDelay prop.

The placeholder prop specifies text to display when no search value has been entered yet.

There are 3 event handler props:

  • onEnterPressed - listens for Enter key press
  • onEscPressed - listens for Esc key press
  • onClear - listens for onClick event for Clear (X) icon

Example

In this example, the required onValueChanged prop and the optional placeholder prop are specified.

<SearchBox onValueChanged={(value: string) => console.log(`Search text: ${value}`)} placeholder="Search" />

searchbox

After some text has been entered, the icon switches to the X/Clear icon.

searchbox x

Dark Theme

searchbox dark

API Reference

Last Updated: 02 February, 2022