Balance Logo
Balance
Reckon Design System

Field

The field package exposes the elements around form inputs, and an API to compose them.
Install
pnpm add @reckon-web/field
Import usage
import {
Field,
useFieldIds,
FieldAfter,
FieldDescription,
FieldLabel,
FieldSet,
FieldMessage,
HelpIndicator
} from '@reckon-web/field';
  • Code
  • API

Field

The Field component is lower level building block for generating custom components.

Using a render prop, the field component connects the label, description, and message to the input element.

We will never share your information with third parties
Open in Playroom

Elements

If the layout of the Field component doesn't work for you, or for any other reason, you can compose the elements below in a way that suites. Please be mindful to maintain accessibility.

FieldDescription

A styled div element, intended to describe the field's intention.

Provide additional information, where the label will not suffice.

FieldLabel

A styled label element

FieldSet

Fieldset is a semantic grouping of form elements, to be used within a form. The legend prop becomes a caption for the form grouping. You can put any form elements, with their labels, inside Fieldset.

Subscriptions

Use the legendAppearance prop to maintain semantic markup, while giving the legend the appearance of a label within forms.

Employee name

FieldMessage

A styled div element, intended to provide users with an invalid message within the context of a field.

A critical message

HelpIndicator

Use help text to clarify anything that may be ambiguous about the input. In most cases a description is preferred.

Composition

You must maintain accessibility when composing the elements yourself to create a custom component.

Use your company email
Copyright © 2021 Reckon. Designed and developed in partnership with Thinkmill.