Skip to main content

Form Label

Used to display a text label for a form field.


import { Label } from '@pluralsight/react'


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


Labels should always be used

To keep your forms accessible, always use a Label for your form fields. This ensures that screen readers can properly read the form field and that users can click on the Label to focus the form field when they are not visually hidden.

Optional Label

Live Editor

Required Label

To make a field required, pass the required prop to the FormControlProvider component.

Live Editor

Hidden Label

To make a label visually hidden, pass a hidden value to the kind prop on the Label component.

Live Editor


There are 3 ways to customize the Label component.

1. Unused Classes

Each component layer of the Label has a unused class name that can be utilized in your local CSS to customize the Label at any level.

  1. pando-label: The element of the Label.

2. Passing a className prop

You can pass a className prop to the Label component to customize the Label. This is useful if your project uses CSS Modules or a CSS-in-JS library like Emotion.

Example of using CSS Modules to customize the Label.
import customStyles from './customStyles.module.css'

function CustomLabel(props) {
return <Label className={customStyles.custom} {...props} />

3. Ejected Label

For a low-level "ejected" approach, you can use the Headless-styles API to customize the Label however you prefer while keeping the accessibility behavior.

import { getLabelProps } from '@pluralsight/headless-styles'

To learn more about the Headless-styles API, check out the Headless-styles documentation.



Do stack form fields vertically when displaying a set.

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


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.



interface FormLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
htmlFor: string
kind?: 'default' | 'hidden'
  1. htmlFor: string - The id of the form field that the label is associated with.
  2. kind: string - The kind of label to render. Defaults to default.


The Pando Label is fully accessible and screen-readable through the following features:

  1. The htmlFor prop is required to associate the label with the form field.
  2. The kind prop is required to render the label as a hidden label.
  3. Required fields are indicated with a "(required)" text flag which is a more accessible and obvious pattern than using a "*".