Textarea

Overview

Textareas are text inputs that can be expanded to fit multi-line text content from users.

When to use:

  • Textareas are useful when users need to create multi-sentence or paragraph length content - e.g. product decriptions or messages.

Implementation

Edit the code below to see your changes live!

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

  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) =>
    setValue(event.target.value);

  return (
    <Form>
      <FormGroup>
        <Textarea
          description="Description for the textarea."
          label="Label"
          onChange={handleChange}
          placeholder="Placeholder"
          resize={true}
          rows={3}
          value={value}
        />
      </FormGroup>
    </Form>
  );
}

Props

Supports all native <textarea /> element attributes.

Prop name
Type
Default
Description
descriptionstring | FormControlDescription

Append a description to the textarea field.

errorstring | string[] | FormControlError | FormControlError[]

Displays an error message for the field.

labelstring | FormControlLabel

Label element for textareas. Component with auto generate id's for the accessibility API.

labelIdstring

Appends an id to the generated label element.

rows1 | 2 | 3 | 4 | 5 | 6 | 73

Determines the intial height via HTML's row property.

resizebooleantrue

Determines if the textarea is resizable vertically.

localization{ optional: string }

Overrides the label with localized text.

Props ending with * are required

Do's and Don'ts

Do
Use the default size of the Textarea to set expectations of the size of user input - e.g. a paragraph or single sentence.
Don't
Don’t use Textareas when a single line text input is fine (e.g. a line for an address).