Text Area

This page describes a Forge preview feature. Preview features are deemed stable; however, they remain under active development and may be subject to shorter deprecation windows. Preview features are suitable for early adopters in production environments.

We release preview features so partners and developers can study, test, and integrate them prior to General Availability (GA). For more information, see Forge release phases: EAP, Preview, and GA.

TextArea

To add the TextArea component to your app:

1
2
import { TextArea } from "@forge/react";

Description

A field for users to enter multiple lines of text.

Props

Name	Type	Required	Description
`defaultValue`	`string`		The initial text value of the field.
`isMonospaced`	`boolean`		Whether or not to style the text as `monospaced`.
`isRequired`	`boolean`		Indicates to the user whether or not a value is required in this field to submit the form. If a field is required, an asterisk appears at the end of that field’s label.
`label`	`string`	Yes	The label text to display.
`name`	`string`	Yes	The key to which the input value is assigned in the returned form object.
`description`	`string`		The text description of the text area input.
`placeholder`	`string`		The placeholder helper text.
`spellCheck`	`boolean`		Whether to check the text in this form element for spelling errors.. Defaults to `false`
`onChange`	`(value: string) => void \| Promise`	No	An event handler that can be asynchronous. Allows you to read values from the component without having to submit as part of a `Form`.

Example

A text area for a message.

1
2
const App = () => {
  return (
    <TextArea
      label="Message"
      name="message"
      onChange={(value) => console.log(value)}
    />
  );
};

The submitted form data.

1
2
{
  //... other form data
  message: "user input";
}

Output

Example image of rendered text area