Textarea

Textarea is a form element that allows the user to enter a sizeable amount of multi-line plain text.

Table of contents

• How to use Textarea
• Code examples
• Accessibility

How to use Textarea

Textarea is a form element, it should be used within the context of <Form> It can be configured in a number of different ways; use this guide to determine the best configuration based on the context.

Code examples

// import { Textarea } from '@contentful/forma-36-react-components';

<Textarea
  name="description"
  id="textarea"
  width="large"
  value="Example text in the textarea"
  rows={2}
/>
// import { Textarea } from '@contentful/forma-36-react-components';

<Textarea
  name="description"
  id="textarea"
  width="large"
  value="Example text in the textarea"
  rows={2}
/>
Hide source

Textarea state (disabled)

<Textarea name="description" id="textarea" disabled value="123456" rows={2} />
<Textarea name="description" id="textarea" disabled value="123456" rows={2} />
Hide source

Textarea can be controlled by passing a textareaRef prop

function TextareaRef() {
  const textareaRef = React.createRef();

  return (
    <Textarea
      name="description"
      id="textarea"
      disabled
      value="123456"
      rows={2}
      textareaRef={textareaRef}
    />
  );
}
function TextareaRef() {
  const textareaRef = React.createRef();

  return (
    <Textarea
      name="description"
      id="textarea"
      disabled
      value="123456"
      rows={2}
      textareaRef={textareaRef}
    />
  );
}
Hide source

Accessibility

• To ensure accessibility, provide a name prop
• Always feedback the user if the Textarea is a required field