Skip to main content

Field Messages

Used to display a helper text message for a form field.

Import

import { FieldMessage, ErrorMessage } from '@pluralsight/react'

Anatomy

  1. Form Control
  2. Label
  3. Input
  4. Message

Usage

Form Control manages state

The Form Control was designed to manage the state of the field you are using it on instead of managing it yourself in all the sister components.

Helper Message

Result
Loading...
Live Editor

Error Message

Easy to understand invalid states

To display an invalid state that is easy to understand for the user, pass the fieldOptions to your Error Message component and add a WarningTriangleFilled Icon.

Result
Loading...
Live Editor

Behavior

Patterns

Do stack form fields vertically when displaying a set.

Don't use more than one form field within the same row.

Usage

Do use the Field Message on all form field to help provide context where necessary.

Don't use the Error Message unless there is a field that has an invalid state.

Do use the Error Message on all form fields that are invalid.

Don't eliminate the Error Message from an invalid form field, the Error Message is required to help provide visual context and a11y.

API

Parameters

interface FieldMessageOptions {
id: string
message: string
}
  1. id: string - A unique id for the Field Message.
  2. message: string - The message content to display.

Accessibility

The Pando Field & Error Message APIs combined with semantic HTML allow the Field & Error Messages to be fully accessible and screen-readable.

  1. The id prop is passed to the aria-describedby prop on the Input component.