Balance Logo
Balance
Reckon Design System

Search Field

Searching is an intuitive method of discovery, offering users a way to explore a website or application using keywords.
Install
pnpm add @reckon-web/search-field
Import usage
import {
SearchField
} 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.

Field

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

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

Sizes

The SearchField and SearchInput accept two sizes.

Clear

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