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
`description`	`string` \| `FormControlDescription`		Append a description to the textarea field.
`error`	`string` \| `string[]` \| `FormControlError` \| `FormControlError[]`		Displays an error message for the field.
`label`	`string` \| `FormControlLabel`		Label element for textareas. Component with auto generate `id`'s for the accessibility API.
`labelId`	`string`		Appends an `id` to the generated label element.
`rows`	`1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `7`	`3`	Determines the intial height via HTML's `row` property.
`resize`	`boolean`	`true`	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).

Beta