TextArea
What is this?
Text Area is the space where longer text is inputted by users.
Max Length
Loading...
Help text
Loading...
Error
Loading...
Disabled
Loading...
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.