Skip to main content

Form Control

Used to centrally manage form field and grouped field states.

Import

import { FormControlProvider } from '@pluralsight/react'

Anatomy

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

Usage

The FormControlProvider was designed to manage the state of each individual field you are using instead of repeating it yourself for each child component. The FormControlProvider should wrap each field you want to include in your form/view.

Basic Example

function BasicFormControl() {
  // This is normally done outside of the component and via a 3rd party library
  const [formState, setFormState] = useState({
    input1: {
      disabled: false,
      invalid: true,
      readOnly: false,
      required: true,
    },
    input2: {
      disabled: false,
      invalid: false,
      readOnly: false,
      required: false,
    },
  })

  return (
    <form>
      <FormControlProvider {...formState.input1}>
        <Label htmlFor="input1">Input 1</Label>
        <Input
          describedBy="input1:help,input1:error"
          id="input1"
          name="input1"
          type="text"
          value=""
        />
        <FieldMessage id="input1:help">
          This is a help message for Input 1
        </FieldMessage>
        <ErrorMessage id="input1:error">
          This is an error message for Input 1
        </ErrorMessage>
      </FormControlProvider>

      <br />

      <FormControlProvider {...formState.input2}>
        <Label htmlFor="input2">Input 2</Label>
        <Input
          describedBy="input2:help,input2:error"
          id="input2"
          name="input2"
          type="text"
          value=""
        />
        <FieldMessage id="input2:help">
          This is a help message for Input 1
        </FieldMessage>
        <ErrorMessage id="input2:error">
          This is an error message for Input 1
        </ErrorMessage>
      </FormControlProvider>
    </form>
  )
}

Behavior

Patterns

Do use the WarningTriangleFilled Icon for all invalid input fields.

Don't use any other Icon to represent an invalid input field.

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 "(required)" text flag on all required form field labels.

Don't use a "*" to represent a required field; this pattern is not accessible.

API

Parameters

interface FormControlOptions {
  disabled?: boolean
  invalid?: boolean
  readOnly?: boolean
  required?: boolean
}
  1. disabled: whether the field is disabled.
  2. invalid: whether the field is invalid.
  3. readOnly: whether the field is read only.
  4. required: whether the field is required.

Accessibility

The Pando Form Control and Icon APIs combined with semantic HTML allow the Form Control to be fully accessible and screen-readable.