Textarea

Area where user can enter larger amounts of text. Commonly used in forms.

Summary

Default

Add an id to your Textarea so that clicking the label will move focus directly to the input.

import React, {useState} from 'react'

import { Textarea } from 'playbook-ui'

const TextareaDefault = (props) => {
  const [value, setValue] = useState('Default value text')
  const handleChange = (event) => {
    setValue(event.target.value)
  }
  return (
    <div>
      <Textarea
          label="Label"
          rows={4}
          id="default-example-1"
      />

      <br />

      <Textarea
          label="Label"
          placeholder="Placeholder text"
          id="default-example-2"
      />

      <br />

      <Textarea
          label="Label"
          name="comment"
          onChange={(e) => handleChange(e)}
          placeholder="Placeholder text"
          value={value}
          id="default-example-3"
      />

    </div>
  )
}

export default TextareaDefault

Custom Textarea Input

import React from 'react'

import { Textarea } from 'playbook-ui'

const TextareaCustom = (props) => {
  return (
    <div>
      <Textarea
          label="Label"
      >
        <textarea
            className="my_custom_class"
            name="custom_textarea"
            rows={4}
        >
          {'Content goes here.'}
        </textarea>
      </Textarea>
    </div>
  )
}

export default TextareaCustom

Resize

import React from 'react'

import { Textarea } from 'playbook-ui'

const TextareaResize = (props) => {
  return (
    <div>
      <Textarea
          label="auto"
          placeholder="Resize Auto"
          resize="auto"
      />

      <br />

      <Textarea
          label="vertical"
          placeholder="Resize Vertical"
          resize="vertical"
      />

      <br />

      <Textarea
          label="both"
          placeholder="Resize Both"
          resize="both"
      />

      <br />

      <Textarea
          label="horizontal"
          placeholder="Resize Horizontal"
          resize="horizontal"
      />
    </div>
  )
}

export default TextareaResize

Textarea w/ Error

Textarea w/ Error shows that the input must be filled out (i.e. when used in a form it signals a user to fix an error).

import React, {useState} from 'react'

import { Textarea, Icon } from 'playbook-ui'

const TextareaError = (props) => {
  const [value, setValue] = useState('default value text')
  const handleChange = (event) => {
    setValue(event.target.value)
  }
  const error = (
    <>
        <Icon icon="warning" /> This field has an error!
    </>
  )
  return (
    <div>
      <Textarea
          error={error}
          label="Label"
          name="comment"
          onChange={(e)=> handleChange(e)}
          placeholder="Placeholder text"
          value={value}
      />

    </div>
  )
}

export default TextareaError

Character Counter

import React, { useState } from 'react'

import { Textarea } from 'playbook-ui'

const TextareaCharacterCounter = (props) => {
  const [value1, setValue1] = useState('Counting characters!')
  const [value2, setValue2] = useState('This counter prevents the user from exceeding the maximum number of allowed characters. Just try it!')
  const [value3, setValue3] = useState('This counter alerts the user that they have exceeded the maximum number of allowed characters.')
  const [error, setError] = useState('Too many characters!')
  const [count1, setCount1] = useState(0)
  const [count2, setCount2] = useState(value1.length)
  const [count3, setCount3] = useState(value2.length)
  const [count4, setCount4] = useState(value3.length)

  const handleMaxCount = (event) => {
    setCount2(event.target.value.length)
    setValue1(event.target.value)
  }

  const handleMaxCountWithBlocker = (event, maxCharacters) => {
    if (event.target.value.length <= maxCharacters) {
      setCount3(event.target.value.length)
      setValue2(event.target.value)
    }
  }

  const handleMaxCountWithError = (event, maxCharacters) => {
    if (event.target.value.length > maxCharacters) {
      setError('Too many characters!')
    } else {
      setError('')
    }

    setCount4(event.target.value.length)
    setValue3(event.target.value)
  }

  return (
    <>
      <Textarea
          characterCount={count1}
          label="Count Only"
          onChange={(event) => setCount1(event.target.value.length)}
          rows={4}
      />

      <br />

      <Textarea
          characterCount={count2}
          label="Max Characters"
          maxCharacters="100"
          onChange={() => handleMaxCount(event)}
          rows={4}
          value={value1}
      />

      <br />

      <Textarea
          characterCount={count3}
          label="Max Characters w/ Blocker"
          maxCharacters="100"
          onChange={() => handleMaxCountWithBlocker(event, 100)}
          rows={4}
          value={value2}
      />

      <br />

      <Textarea
          characterCount={count4}
          error={error}
          label="Max Characters w/ Error"
          maxCharacters="75"
          onChange={() => handleMaxCountWithError(event, 75)}
          rows={4}
          value={value3}
      />
    </>
  )
}

export default TextareaCharacterCounter

Inline

import React, { useState } from 'react'

import { Textarea } from 'playbook-ui'

const TextareaInline = (props) => {
  const [value, setValue] = useState('Try clicking into this text.')
  const handleChange = (event) => {
    setValue(event.target.value)
  }
  return (
    <div>
      <Textarea
          inline
          onChange={(e) => handleChange(e)}
          resize="auto"
          rows={1}
          value={value}
      />
    </div>
  )
}

export default TextareaInline

Emoji Mask

Use the emojiMask / emoji_mask prop to prevent users from entering emoji characters (🐸 🐈 🏄‍♂️) in typed or pasted content. It allows accented characters and other non-ASCII letters (é, ü, 文).

import React, { useState } from 'react'

import { Textarea } from 'playbook-ui'

const TextareaEmojiMask = (props) => {
  const [basicValue, setBasicValue] = useState('')

  return (
    <div>
      <Textarea
          emojiMask
          label="Emoji Mask"
          onChange={({ target }) => setBasicValue(target.value)}
          placeholder="Try typing or pasting emojis..."
          value={basicValue}
      />
    </div>
  )
}

export default TextareaEmojiMask

Required Indicator

The requiredIndicator/required_indicator prop displays a red asterisk (*) next to the label, visually indicating that the field is required. This is purely visual and does not enforce validation.

You can use requiredIndicator/required_indicator with any validation approach: HTML5 validation via the required prop, client-side validation, or backend validation. For this reason, it works independently and doesn't need to be paired with the required prop.

import React, {useState} from 'react'

import { Textarea } from 'playbook-ui'

const TextareaRequiredIndicator = (props) => {
  const [value, setValue] = useState('Default value text')
  const handleChange = (event) => {
    setValue(event.target.value)
  }
  return (
    <div>
      <Textarea
          label="Label"
          name="comment"
          onChange={(e) => handleChange(e)}
          placeholder="Placeholder text"
          requiredIndicator
          value={value}
      />
    </div>
  )
}

export default TextareaRequiredIndicator

Input Options

Use the input_options / inputOptions prop to pass additional attributes directly to the underlying <textarea> element instead of the outer wrapper. This is useful for applying data attributes, custom IDs, ARIA attributes, or other HTML attributes that need to be on the textarea element itself.

Additional HTML attributes (e.g. data or ARIA attributes) can also be passed directly to the <textarea> via input_options.

import React, { useState } from "react"

import { Textarea } from 'playbook-ui'

const TextareaInputOptions = (props) => {
  const [value1, setValue1] = useState("")
  const [value2, setValue2] = useState("")
  const [value3, setValue3] = useState("")
  const [value4, setValue4] = useState("")

  return (
    <div>
      <Textarea
          id="container-id"
          label="ID on Container"
          name="comment"
          onChange={(e) => setValue1(e.target.value)}
          rows={4}
          value={value1}
      />

      <br />

      <Textarea
          inputOptions={{ id: "textarea-id" }}
          label="ID on Textarea via inputOptions"
          name="comment"
          onChange={(e) => setValue2(e.target.value)}
          rows={4}
          value={value2}
      />

      <br />

      <Textarea
          id="container-id-2"
          inputOptions={{ id: "textarea-id-2" }}
          label="Both Container and Textarea IDs"
          name="comment"
          onChange={(e) => setValue3(e.target.value)}
          rows={4}
          value={value3}
      />

      <br />

      <Textarea
          inputOptions={{
          "aria-label": "Enter description",
          "aria-describedby": "help-text",
          data: { controller: "textarea", action: "focus->handleFocus" },
          id: "description-textarea"
        }}
          label="Data and ARIA Attributes"
          name="description"
          onChange={(e) => setValue4(e.target.value)}
          rows={4}
          value={value4}
      />
    </div>
  )
}

export default TextareaInputOptions

Disabled

import React from 'react'

import { Textarea } from 'playbook-ui'

const TextareaDefault = (props) => {
  return (
    <>
      <Textarea
          disabled
          id="disabled-example"
          label="Disabled"
          rows={4}
      />
      <Textarea
          disabled
          id="disabled-example-with-placeholder"
          label="Disabled with Placeholder"
          placeholder="Content goes here"
          rows={4}
      />
    </>
  )
}

export default TextareaDefault

Things to Avoid

Do not use for small text amounts (use Text Input instead). Avoid using textarea without validation if it is required and using with validation if not required.

Available Props

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Github

Connect Chat