Balance Logo
Reckon Design System

Search Field

Searching is an intuitive method of discovery, offering users a way to explore a website or application using keywords.
pnpm add @reckon-web/search-field
Import usage
import {
} from '@reckon-web/search-field';
  • Code
  • API

The SearchField component has been deprecated and will be removed in a future version. Use Field and SearchInput instead.

- <SearchField
- label="Field label"
- onChange={handleInputChange}
- value={inputValue}
- />
+ <Field label="Field label">
+ <SearchInput
+ onChange={handleInputChange}
+ value={inputValue}
+ />
+ </Field>

The search components should be used as a means of discovering content, or as a filter to aid the user in finding content.


The SearchField component connects the label and description to the input element.

Selected employees will be attached to this pay run
Open in Playroom


The SearchField and SearchInput accept two sizes.


Using the onClear property, the input value may be cleared by the user by clicking the "x" icon or pressing "Escape" while the input is focused.

Copyright © 2022 Reckon. Designed and developed in partnership with Thinkmill.
Bitbucket logoJira software logoConfluence logo