Form

Overview

The Form component in HeroUI v3 remains largely unchanged from v2, with the addition of the onInvalid prop for better validation handling.

Key Changes

1. Form Component Props

The Form component props remain the same between v2 and v3, with one addition:

Migration Examples

Basic Usage

Basic usage remains unchanged in v3:

import { Form, Button } from "@heroui/react";

export default function App() {
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    console.log("Form submitted");
  };

  return (
    <Form onSubmit={handleSubmit}>
      {/* Form content */}
      <Button type="submit">Submit</Button>
    </Form>
  );
}

Form with Invalid Handler (New in v3)

{/* v2 doesn't have onInvalid prop */}
<Form onSubmit={onSubmit}>
  {/* Form content */}
  <Button type="submit">Submit</Button>
</Form>

<Form
  onInvalid={(e) => {
    e.preventDefault();
    // Custom handling when form validation fails
    console.log("Form validation failed");
  }}
  onSubmit={onSubmit}
>
  {/* Form content */}
  <Button type="submit">Submit</Button>
</Form>

The onInvalid handler is called when form validation fails. By default, the first invalid field will be focused. Use e.preventDefault() to customize this behavior.

Breaking Changes Summary

1. Form Component: No breaking changes - same props and behavior
2. New Prop: onInvalid prop available for custom validation error handling

Migration Steps

1. No changes required: The Form component works the same way in v3
2. Optional: Use the new onInvalid prop if you need custom handling for validation failures

Note on Form Fields

While the Form component itself is unchanged, form field components (like Input, TextField, etc.) have been updated in v3. Refer to their respective migration guides for details on migrating form fields within your forms.

Need Help?

For v3 Form features and API:

• See the API Reference
• Check interactive examples

For community support:

• GitHub Discussions
• Discord community