Textarea

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

• View on Github
• View Core API
• View on Figma

Import

import { Textarea } from '@pluralsight/react'

Anatomy

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

Usage

Shares the Input API

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

Basic Example

Result

Loading...

Live Editor

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> ) }

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.

Example of using CSS Modules to customize the Textarea.

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.