TextArea

What is this?

Text Area is the space where longer text is inputted by users.

Handling state

Uncontrolled

Controlled

Controlled

Controlled

Max Length

Max length

0 / 120

Help text

Label

Help text

Error

With error

Error text

Disabled

Disabled

Usage

import { useState } from 'react'
import { TextArea } from '@vtex/admin-ui'

function Example() {
  const [value, setValue] = useState()

  return (
    <TextArea
      label="Label"
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  )
}

TextArea Props

Name	Type	Description	Required	Default
label	string	Label text	✅	-
helpText	ReactNode	Help text	🚫	-
error	boolean	Has an error	🚫	-
errorText	ReactNode	Error text	🚫	-
maxLength	number	Max length	🚫	-

Best Practices

Use the Helper Text to explain in more details how the input is expected to be filled.
Add placeholders to clarify the type of content that must be inserted by the user.
Do use the required/optional flags when necessary, but prefer using one or another.
Add data validation to indicate when data hasn’t been inputted correctly.

• What is this?
• Handling state
  • Uncontrolled
  • Controlled
• Max Length
• Help text
• Error
• Disabled