Balance Logo
Reckon Design System

Select Field

The select field lets users choose one option from an options menu.
pnpm add @reckon-web/select-field
Import usage
import {
} from '@reckon-web/select-field';
  • Code
  • API

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

- <SelectField
- label="Field label"
- onChange={handleInputChange}
- value={inputValue}
- />
+ <Field label="Field label">
+ <SelectInput
+ onChange={handleInputChange}
+ value={inputValue}
+ />
+ </Field>



Each select field must be accompanied by a label. Effective form labeling helps inform users which selection to make.

Open in Playroom

Label Visibility

There may be occasions where the label is apparent through context to sighted users, so you wish to omit it from the view. We still need a label attached to the input for assistive technology, in these cases you can provide the labelVisible property.


Description text contains pertinent information that assists the user in completing a field. Description text is always visible and appears underneath the label.

You will be able to filter employees by this value


Both the SelectInput and SelectField are controlled components, which means you must provide value and onChange properties to "make it work".

Invalid message

Offer an invalid message for required select fields.

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