Form

A form is a group of inputs that allows users to submit data to a server, with support for providing field validation errors.

Installation

The above command is for individual installation only. You may skip this step if @nextui-org/react is already installed globally.

Import

Usage

Anatomy

A Form is a container for input elements and submit/reset buttons, with support for validation messages. When labeled with aria-label or aria-labelledby, it becomes a navigable form landmark for assistive technology.

Events

The onSubmit event will be triggered when a user submits the form with the Enter key or by pressing a submit button. The onReset event will be triggered when a user presses a reset button.

Validation

Form supports native HTML constraint validation with customizable UI, custom validation functions, and server-side validation. Server-side validation errors can be provided via the validationErrors prop as an object mapping field names to error messages, which are cleared when the user modifies the field.

See the Forms guide to learn more about form validation, including client-side validation, and integration with other frameworks and libraries.

Validation Behavior

Form validation uses ARIA attributes by default, but can be switched to native HTML validation by setting validationBehavior="native". ARIA validation shows realtime errors without blocking submission. This can be set at the form or field level.

Accessibility

• Built with a native HTML <form> element, with support for ARIA labelling to create a form landmark.
• Full support for browser features like form autofill.
• Support for native HTML constraint validation with customizable UI, custom validation functions, realtime validation, and server-side validation errors.

API

Form Props