Balance Logo
Reckon Design System
Open playroom


The field package exposes the elements around form inputs, and an API to compose them.
pnpm add @balance-web/field
Import usage
import {
} from '@balance-web/field';
  • Code
  • API


  • Fieldset — For grouping related form controls.


Using context, the field component connects the label, description, and message to the input element.

Edit in Playroom


Each text field must be accompanied by a label. Effective form labeling helps users understand what information to enter into a text input.

Using placeholder text in lieu of a label is sometimes employed as a space-saving method. However, this is not recommended because it hides context and presents accessibility issues.


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. Use sentence-style capitalisation, and in most cases, write the text as full sentences with punctuation.

You can pass a ReactElement as description. This should only be used when you need to put a link or some other interactive element in the description.

You don't need to concern yourself styling the text, it will be handled by the component. Just render your normal text inside a Fragment and use a TextLink component to render the link.

Note: Try not to make the description a complex component, it's supposed to support the user not overwhelm them.


Help text is hidden by default, and revealed in a tooltip invoked by an icon beside the label. Reserve help text for content only relevant during the first interaction a user has with the field. Use sentence-style capitalisation, and in most cases, write the text as full sentences with punctuation.

In most cases description is preferred.


Offer an invalid message to inform the user how their input violates the requirements of the field.


Reserve the vertical space that will be taken by an invalid message. You would use this to stop subsequent elements from being pushed down when an invalid message is displayed.


Decides if the label and input should be laid out horizontally or vertically.

When horizontal, the component will try to fill all horizontal space via flex: 1.

Default value is vertical

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