Balance Logo
Balance
Reckon Design System

Select Field

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

SelectField

The SelectField component is the recommended component to use, which connects the label, description, and message to the select element.

Label

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

Open in Playroom

Description

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

Controlled

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

Select Input

The SelectInput component is just a styled select element.

Copyright © 2021 Reckon. Designed and developed in partnership with Thinkmill.