Form

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.

To add the Form component to your app:

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

Description

A form contains a list of components, a submit button, and a function that handles the submit event. You can also add any other component, except another Form component.

Props

Name	Type	Required	Description
`children`	`Array<ForgeComponent>`	Yes	Any component, except for a `Form`. Form components are controlled automatically and have their values added to the `onSubmit` call.
`onSubmit`	`(formData: Record<string, any>) => void;`	Yes	Handler to be called on form submission. The argument, `formData`, is a list of key-value pairs. The keys are the input element names specified for the form’s user interface components such as username (see Example section).
`submitButtonText`	`string`		The label text displayed on the form’s submit button. Defaults to `Submit`.
`actionButtons`	`Array<Button>`		An array of Button components. These buttons align to the right of the `Submit` button, letting you define additional form behaviors.

Example

1
2
import React, { useState } from "react";
import {
  Button,
  Form,
  TextField,
  CheckboxGroup,
  Checkbox,
  Text,
} from "@forge/react";

const App = () => {
  const [formState, setFormState] = useState(undefined);

  // Handles form submission
  const onSubmit = (formData) => {
    /**
     * formData:
     * {
     *    username: 'Username',
     *    products: ['jira']
     * }
     */
    setFormState(formData);
  };

  return (
    <>
      <Form onSubmit={onSubmit}>
        <TextField name="username" label="Username" />
        <CheckboxGroup name="products" label="Products">
          <Checkbox defaultChecked value="jira" label="Jira" />
          <Checkbox value="confluence" label="Confluence" />
        </CheckboxGroup>
      </Form>
      {formState && <Text>{JSON.stringify(formState)}</Text>}
    </>
  );
};

export default App;

Output

Example image of rendered form