Indicates whether the value of the form's controls can be automatically completed by the browser. It is on by default.

The contents rendered inside of the form. This is a function where the props will be passed from the form. The function props you can access are dirty, submitting and disabled. You can read more about these props in react-final form documentation.

If you are only spreading formProps onto the HTML <form> element and not using any of the other props (like submitting, etc.), children can be plain JSX. All of the children will be wrapped within an HTML <form> element that includes all necessary props, including those provided on the form component.

When Form renders JSX children directly and not using a function to spread formProps manually, the properties in this formProps prop will be spread on an internally rendered HTML form element.

id attribute applied to the form element.

Sets the form and its fields as disabled. Users cannot edit or focus on the fields.

Accessible name to be applied to the form element. Maps to the aria-label attribute.

ID of the element that has the accessible name to be applied to the form element. Maps to the aria-labelledby attribute.

name attribute applied to the form element.

Indicates if the inputs within the form will bypass HTML5 constraint validation when submitted. This is not recommended to be used because it can cause experiences to be inaccessible. It is false by default but will be set to true in the future to increase accessibility, so it is not recommended.

Event handler called when the form is submitted. Fields must be free of validation errors.

Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref).

@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}

A test identifier for the form element. This will be applied as data-testid attribute.

Apply a subset of permitted styles powered by Atlassian Design System design tokens.

The aria-required prop is disallowed. It is automatically applied when using isRequired via fieldProps.

Content to render in the field. This is a function that is called with props for the field component and other information about the field. This cannot be used at the same time as the component prop, as the children prop will be ignored.

Content to render in the field. This will be rendered with the *Message props. This cannot be used at the same time as the children prop, as the children prop will be ignored.

Sets the default value of the field. If a function is provided, it is called with the current default value of the field.

Element displayed after the label, and after the red asterisk if field is required.

Renders an ErrorMessage with the provided content when using the component prop.

Renders a HelperMessage with the provided content when using the component prop.

Passed to the ID attribute of the field. This is randomly generated if it is not specified.

Sets whether the field is disabled. Users cannot edit or focus on the fields. If the parent form component is disabled, then the field will always be disabled.

Sets whether the field is required for submission. Required fields are marked with a red asterisk.

Label displayed above the form field.

Specifies the name of the field. This is important for referencing the form data.

A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests

Access the current field value and transform it to return a different field value.

Checks whether the field input is valid. This is usually used to display a message relevant to the current value using ErrorMessage, HelperMessage or ValidMessage.

Renders a ValidMessage with the provided content when using the component prop.

The aria-required prop is disallowed. It is automatically applied when using isRequired via fieldProps.

The input component to render. Use a render function that receives fieldProps, error, valid, and meta state. Spread fieldProps onto your input element (such as TextField or TextArea).

Sets the default value of the field. If a function is provided, it is called with the current default value of the field.

Element displayed after the label, and after the red asterisk if field is required.

Helper text displayed above the input to provide additional context or instructions.

Passed to the ID attribute of the field. This is randomly generated if it is not specified.

Sets whether the field is disabled. Users cannot edit or focus on the fields. If the parent form component is disabled, then the field will always be disabled.

Sets whether the field is required for submission. Required fields are marked with a red asterisk.

Label displayed above the form field.

Maximum number of characters allowed. When exceeded, the field displays an error message or the message provided by overMaximumMessage.

Minimum number of characters required. When not met, the character counter displays an error message or the message provided by underMinimumMessage.

Specifies the name of the field. This is important for referencing the form data.

Custom message displayed when input exceeds the maximum character limit. Use this to provide context-specific guidance or localized messages. Overrides the default "X characters too many" message.

A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests

Custom message displayed when input is under the maximum limit. Use this to provide context-specific guidance or localized messages. Overrides the default "X characters remaining" message.

Custom message displayed when input is under the minimum requirement. Use this to guide users on how much more they need to type. Overrides the default "Minimum of X characters required" message.

Checks whether the field input is valid. This is usually used to display a message relevant to the current value using ErrorMessage, HelperMessage or ValidMessage.

Content to render in the checkbox field. This is a function that is called with information about the field.

Sets the default state of the checkbox as checked.

Sets whether the field is disabled. Users cannot edit or focus on the fields. If the parent form component is disabled, then the field will always be disabled.

Sets whether the field is required for submission. Required fields are marked with a red asterisk.

Label displayed beside the checkbox.

Specifies the name of the field. This is important for referencing the form data.

The value of the checkbox. This is the value used in the form state when the checkbox is checked.

Content to render in the fieldset.

Label describing the contents of the fieldset.

Content to render in the range field. This function is called with props for the field component and other information about the field.

Sets the default value of the field. If a function is provided, it is called with the current default value of the field.

Value passed to the id attribute of the field. This is randomly generated if it is not specified.

Sets whether the field is disabled. Users cannot edit or focus on the fields. If the parent form component is disabled, then the field will always be disabled.

Displays a label above the range field and identifies the form fields.

Specifies the name of the field. This is important for referencing the form data.

Child content to render in the form below the title and description.

Description or subtitle of the form.

Title of the form. This is a header.

Sets the alignment of the footer contents. This is often a button. This should be left-aligned in single-page forms, flags, cards, and section messages.

Content to render in the footer of the form.

Content or components to render after the description.

Description of the contents of the section.

Title of the form section.