Text area

A text area lets users enter long form text which spans over multiple lines.

#Default

Use a text area to collect more than one line of text.

Summary

import { Field, Label, TextArea } from '@wolf-rayet/react';

<Field>
  <Label htmlFor="summary">Summary</Label>
  <TextArea id="summary" rows={4} />
</Field>

#Helper message

Use a helper message to set expectations about length or content.

Handover notes

The next shift reads this first.

import { Field, HelperMessage, Label, TextArea } from '@wolf-rayet/react';

<Field>
  <Label htmlFor="notes">Handover notes</Label>
  <TextArea id="notes" rows={4} defaultValue="Gateway timeouts cleared at 14:20." />
  <HelperMessage>The next shift reads this first.</HelperMessage>
</Field>

#Disabled

Use a disabled text area when the content cannot be edited.

Archived note

import { Field, Label, TextArea } from '@wolf-rayet/react';

<Field>
  <Label htmlFor="archived">Archived note</Label>
  <TextArea id="archived" rows={3} defaultValue="Closed by Priya Shah." isDisabled />
</Field>