TextArea

Text Area is the space where longer text is inputted by users. It renders a <textarea> by default.

Examples

Tone of Voice

The TextArea tone of voice is either neutral (default) or critical, and is adjustable using the tone prop.

<Stack space="$l">
  <TextArea
    label="Neutral"
    value="Neutral text area"
    helperText="Helpful text"
  />
  <TextArea
    tone="critical"
    label="Critical"
    value="Critical text area"
    helperText="Helpful text"
    criticalText="Something is wrong"
  />
</Stack>

Helpers

You can add a helper text to indicate the proper way to fill in the text area, and also, can add a character count to indicate the text maximum length and the current quantity of characters in the text area. To use these variations, the helperText and charLimit properties should have a value defined.

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

  return (
    <Box csx={{ width: 300 }}>
      <TextArea
        value={value}
        onChange={(e) => {
          setValue(e.target.value)
        }}
        id="Helpers-textarea"
        label="Helpers"
        helperText="This TextArea is disabled"
        charLimit={120}
      />
    </Box>
  )
}

Disabled

You can disable the input by defining the disabled property.

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

  return (
    <Box width={300}>
      <TextArea
        value={value}
        onChange={(e) => {
          setValue(e.target.value)
        }}
        id="disabled-textarea"
        label="Disabled"
        helperText="This TextArea is disabled"
        disabled
        charLimit={120}
      />
    </Box>
  )
}

Alternatives

• Input - For text fields.
• InputPassword - For password fields.

Usage

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

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

  return (
    <Box csx={{ width: 300 }}>
      <TextArea
        value={value}
        onChange={(e) => {
          setValue(e.target.value)
        }}
        id="textarea-1"
        label="Label"
        helperText="Helper Text"
        charLimit={120}
      />
    </Box>
  )
}

Props

It also accepts all props of textarea JSX element.

Name	Type	Description	Required	Default
label	string	Label text	✅	-
id	string	Unique id of the component	✅	-
name	string	Name of the textarea element.	🚫	-
helperText	string	TextArea helper text	🚫	-
charLimit	number	TextArea char limit	🚫	-
criticalText	string	TextArea critical message	🚫	-
onChange	react.FormEventHandler<HTMLTextareaElement>	Handler called when the inputs value changes	🚫	-
disabled	boolean	Whether the textarea is disabled or not	🚫	false
tone	neutral, critical	TextArea's tone of voice	🚫	neutral
csx	StyleProp	Defines component styles	🚫	{}

Do’s

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

👉 For UX Writing guidelines, access https://uxwriting.vtex.com

• Examples
  • Tone of Voice
  • Helpers
  • Disabled
• Alternatives