Field Messages

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

Import

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

Anatomy

Form Control
Label
Input
Message

Usage

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

function EmailField() {
  const [email, setEmail] = useState('')

  function handleChange(e) {
    setEmail(e.target.value)
  }

  return (
    <FormControlProvider required={true}>
      <Label htmlFor="email">Email</Label>
      <Input
        describedBy="email:error"
        id="email"
        name="email"
        onChange={handleChange}
        placeholder="email@example.com"
        value={email}
      />
      <FieldMessage id="email:help">
        Enter the email you want associated with your account.
      </FieldMessage>
      <ErrorMessage id="email:error">
        An email address is required.
      </ErrorMessage>
    </FormControlProvider>
  )
}

Error Message

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.

function ErrorEmailField() {
  const [email, setEmail] = useState('')

  function handleChange(e) {
    setEmail(e.target.value)
  }

  return (
    <FormControlProvider required={true} invalid={!email}>
      <Label htmlFor="email">Email</Label>
      <Input
        describedBy="email:error"
        id="email"
        name="email"
        onChange={handleChange}
        placeholder="email@example.com"
        value={email}
      />
      <FieldMessage id="email:help">
        Enter the email you want associated with your account.
      </FieldMessage>
      <ErrorMessage id="email:error">
        Please provide an email address.
      </ErrorMessage>
    </FormControlProvider>
  )
}

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
}

id: string - A unique id for the Field Message.
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.

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