Text Field

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.

TextField

To add the TextField component to your app:

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

Description

A field for users to enter a single line of text.

Props

Name	Type	Required	Description
`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.
`defaultValue`	`string`		The initial text value of the field.
`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.
`description`	`string`		The text description of the field.
`placeholder`	`string`		The placeholder helper text.
`type`	`"text" \| "number" \| "email" \| "tel" \| "password"`		The input type of the field.
`autoComplete`	`"off"`		Optionally disable HTML autocomplete.
`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 field for entering a name.

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

Output

Example image of rendered text-field