About UI Kit 2
UI Kit 2 components
UI kit components
Product bridge APIs
Jira bridge APIs

Form

This section 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

NameTypeRequiredDescription
childrenArray<ForgeComponent>YesAny 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;YesHandler 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).
submitButtonTextstringThe label text displayed on the form’s submit button. Defaults to Submit.
actionButtonsArray<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

Rate this page: