Field

The Field component is used to manage form fields, providing a consistent way to display labels, helper texts, and error messages.

1
import {
2
  Field,
3
  FieldParts,
4
} from '@cerberus/react'

Usage

The Field component helps manage the state of form fields and ensures consistent display of labels, helper texts, and error messages.

Enter your email

We'll never share your email with anyone else.

Invalid example

A name is required to submit this form. It replaces the helper text.

Anything else you want to tell us?

This will help us learn more about you.0/300

For accessibility compliance, use the hideLabel prop to visually hide labels while keeping them accessible to screen readers. This is useful for search inputs and other cases where the visual label would be redundant.

Search something

Label is hidden but accessible to screen readers

Global search

Primitives

You can utilize the primitive components or the css prop to customize the field.

Component	Description
FieldRoot	The context provider for the Field parts
FieldLabel	The label of the field
FieldInput	The input of the field
FieldTextarea	The textarea of the field
FieldHelperText	The helper text of the field
FieldErrorText	The error text of the field
StartIndicator	The start indicator of the field
StatusIndicator	The status indicator or end icon of the field
RequiredIndicator	The required indicator of the field

Custom LabelCustom Helper Text

API

Props

The Field component is an abstraction of the primitives and accepts the following props:

Name	Default	Description
label		The label to show above the field input.
helperText		The helper text to show below the field input.
secondaryHelperText		The secondary helper text to show below the field input at the end of the row.
errorText		The error text to show below the field input. It replaces the helperText when visible.
hideLabel	`false`	Whether to hide the label visually while keeping it accessible to screen readers.

The Field component also accepts all the props of the FieldRoot primitive props

Parts

The FieldParts API is an Object containing the full family of components.

Name	Description
Root	The `FieldRoot` component which is the Provider for the family.
Label	The `FieldLabel` component which displays the label and "required" notice.
Input	The `FieldInput` component which is the input field.
Textarea	The `FieldTextarea` component which is the textarea field.
HelperText	The `FieldHelperText` component which displays the helper text.
ErrorText	The `FieldErrorText` component which displays the error text.
StartIndicator	The `StartIndicator` component which displays an indicator of your choice at the start of the field.
StatusIndicator	The `StatusIndicator` component which displays an indicator of your choice at the end of the field.
RequiredIndicator	The `RequiredIndicator` component which displays an indicator of your choice when the field is marked `required`.

On this page

Edit this page on Github