Skip to main content

Textarea

Used to collect form field information in a multi-line input.

Import

import { Textarea } from '@pluralsight/react'

Anatomy

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

Usage

The Textarea component shares the same state API as the Input component.

Basic Example

function BasicExample() {
  const [bio, setBio] = useState('')

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

  return (
    <FormControlProvider>
      <Label htmlFor="bio">Bio</Label>
      <Textarea
        describedBy="bio:help"
        id="bio"
        name="bio"
        onChange={handleChange}
        value={bio}
      />
      <FieldMessage id="bio:help">
        Tell us about yourself in 140 characters or less.
      </FieldMessage>
    </FormControlProvider>
  )
}

Customizing

There are 3 ways to customize the Textarea component.

1. Unused Classes

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

  1. pando-textarea: The element of the Textarea.

2. Passing a className prop

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

import customStyles from './customStyles.module.css'

function CustomTextarea(props) {
  return <Textarea className={customStyles.custom} {...props} />
}

3. Ejected Textarea

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

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

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

Behavior

Patterns

Do use the Textarea if you need to collect a multi-line response from a user.

Don't use an Input to collect a multi-line response from a user.

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 TextareaProps extends TextareaHTMLAttributes<HTMLTextareaElement> {
  describedBy?: string
  id: string
  name: string
  resize?: 'none' | 'vertical' | 'horizontal' | 'auto'
}
  1. describedBy - The id of the FieldMessage or ErrorMessage that describes the textarea.
  2. id - The id of the textarea.
  3. name - The name of the textarea.
  4. resize - The resize behavior of the textarea.

Accessibility

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

  1. The aria-invalid attribute is set to true when the textarea is invalid.
  2. The aria-describedby attribute is set to the id of the FieldMessage or ErrorMessage that describes the textarea.
  3. The aria-required attribute is set to true when the textarea is required.