TextArea

Text areas are multiline text inputs, useful for cases where users have a sizable amount of text to enter. They allow for all customizations that are available to text fields.

Example#

<TextArea label="Description" />

Value#

A TextArea's value is empty by default, but an initial, uncontrolled, value can be provided using the defaultValue prop. Alternatively, a controlled value can be provided using the value prop.

<TextArea defaultValue="Default text" label="Uncontrolled TextArea" marginEnd="20px" />
<TextArea value="Default text" label="Controlled TextArea" />

Placeholder text that describes the expected value or formatting for the TextArea can be provided using the placeholder prop. Placeholder text will only appear when the TextArea is empty, and should not be used as a substitute for labeling the component with a visible label.

<TextArea placeholder="abc@adobe.com" label="Email" />

Labeling#

A visual label should be provided for the TextArea using the label prop. If the TextArea is required, the isRequired and necessityIndicator props can be used to show a required state.

<TextArea label="Street address" marginEnd="20px" />
<TextArea label="Street address" isRequired necessityIndicator="icon" marginEnd="20px" />
<TextArea label="Street address" isRequired necessityIndicator="label" marginEnd="20px" />
<TextArea label="Street address" necessityIndicator="label" />

Accessibility#

If a visible label isn't specified, an aria-label must be provided to the TextArea for accessibility. If the field is labeled by a separate element, an aria-labelledby prop must be provided using the id of the labeling element instead.

<label id="label-1">Name</label>
<TextArea aria-labelledby="label-1" marginStart="10px" />

Internationalization#

In order to internationalize a TextArea, a localized string should be passed to the label or aria-label prop. When the necessityIndicator prop is set to "label", a localized string will be provided for "(required)" or "(optional)" automatically.

<TextArea label="Street address" isRequired necessityIndicator="label" marginEnd="20px" />
<TextArea label="Street address" necessityIndicator="label" />

Events#

TextArea accepts an onChange prop which is triggered whenever the value is edited by the user. For a full list of supported events, see the Props table below.

The example below uses onChange to update a separate span element with the same text entered into the TextArea.

function Example() {
  let [text, setText] = React.useState();

  return (
    <div>
      <TextArea
        placeholder="Enter some text"
        onChange={setText}
        label="Text Mirror"
        marginEnd="20px"
      />
      <span>Mirrored text: {text}</span>
    </div>
  );
}

Validation#

TextAreas can display a validation state to communicate to the user whether the current value is valid or invalid. Implement your own validation logic in your app and pass either "valid" or "invalid" to the TextArea via the validationState prop.

The example below illustrates how one would validate if the user entered more than 30 characters into the TextArea.

function Example() {
  let defaultValue = '';
  let [isValid, setValid] = React.useState(false);
  let [value, setValue] = React.useState(defaultValue);
  React.useEffect(() => {
    setValid(value.length > 30)
  }, [setValid, value]);

  return (
    <TextArea
      validationState={isValid ? 'valid' : 'invalid'}
      placeholder="Enter a description"
      defaultValue={defaultValue}
      onChange={setValue}
      label="Description"
    />
  );
}

Props#

Visual options#

Quiet#

View guidelines

In addition to changing the visual style of the TextArea, the isQuiet prop removes the ability to manually resize the TextArea. To compensate, the TextArea automatically adjusts its own height to accommodate for additional lines of text.

<TextArea label="Email" placeholder="Email Address" isQuiet />

Disabled#

View guidelines

<TextArea label="Email" placeholder="Email Address" isDisabled />

Read only#

The isReadOnly boolean prop makes the TextArea's text content immutable. Unlike isDisabled the TextArea remains focusable and the contents can still be copied. See the MDN docs for more information.

<TextArea label="Email" defaultValue="abc@adobe.com" isReadOnly />

Label alignment#

Labels can be aligned to the "start" or the "end" of the TextArea. For left-to-right (LTR) languages, "start" refers to the left most edge of the TextArea and "end" refers to the right most edge. For right-to-left (RTL) languages, this is flipped.

<TextArea label="Email" labelAlign="start" marginEnd="20px" />
<TextArea label="Email" labelAlign="end" />

Label position#

View guidelines

<TextArea label="Email" labelPosition="top" marginEnd="20px" />
<TextArea label="Email" labelPosition="side" />

Custom width#

View guidelines

<TextArea label="Email" width={'400px'} />