Common UI kit components
Confluence UI kit components
Jira UI kit components
Jira Service Management UI kit components

Rate this page:


A modal dialog used to edit a CustomField. The modal dialog opens when the CustomField is selected in Jira.

Example of a custom field in edit mode with the above sample code

Usage notes

Import statement

import ForgeUI, { CustomField, CustomFieldView, CustomFieldEdit } from "@forge/ui";


childrenArray<ForgeComponent>YesA container for displaying multiple components. Can contain any component except for Form, ConfigForm, MacroConfig, and all extension-specific components.
onSubmit(formData: FormData) => Promise<CustomFieldValue> | CustomFieldValueYesAn event handler that can be asynchronous. The argument, formData, is an object of input field keys and their values (see example below). The return value is either the field value or a promise that’s resolved with the returned field value. The value is checked against the validation expression defined in the manifest and must be the same type as custom field.
width"small" | "medium" | "large" | "x-large"The width of the edit dialog. This can range from the width of a small pop-up to a pop-up that’s almost full-screen. Defaults to medium.
headerstringThe title of the edit dialog. Defaults to Custom field edit.


The value returned from the onSubmit function must be of the same type as the custom field. For example, for a custom field of type string, the value returned from onSubmit should also be a string.

For custom fields storing collections of values, where for example you've set the type to be string and collection to be list, the value returned from onSubmit should be an array of strings. Otherwise, the custom field will not be saved at all.


import ForgeUI, {
} from "@forge/ui";

const Edit = () => {
  const onSubmit = (values) => values.valueSelect;

  return (
    <CustomFieldEdit onSubmit={onSubmit} width="small" header="Example header">
      <Select label="Select Value " name="valueSelect">
        <Option label="low" value="low" />
        <Option label="medium" value="medium" />
        <Option label="high" value="high" />

export const runEdit = render(<Edit />);

Rate this page: