Support the HTML form attribute to enable complex forms

[slimshreydy]

TL;DR HeroUI is not compatible with uncontrolled nested forms right now, but support is very very easy to add.

Background

For people using HeroUI to create uncontrolled forms, they typically rely on the hidden inputs inside the various form input components to ensure all the data gets submitted as part of the form action.

For example, if you want to make an uncontrolled form that uses Nextjs server actions to process the submission, you can use HeroUI to set it up like this:

import {DateRangePicker, Button} from "@heroui/date-picker"
import {submitAction} from "./actions"

const Form = () => {
    return <form action={submitAction}>
        <DateRangePicker label="Stay duration" startName="startDate" endName="endName"  />
        <Button type="submit">Submit</Button>
    </form>
}

The DateRangePicker component implementation uses hidden input elements to store the values of the DateRangePicker, and we can use startName and endName to tell HeroUI what name keys those values should be stored under in the submitted form data. That means on submit, our server submitAction sees something like this (technically its a FormData object and not a JSON, but that's an irrelevant detail here):

{startDate: "2025-01-01", endDate: "2025-01-07"}

Problem

However, one challenge is that forms can't be nested in HTML. Submitting a form nested in another form leads to undefined behavior. That means if you're making a complex form (or perhaps a form with subforms), rendered HTML like this is invalid:

<form>
    <input name="name">
    <form>
        <input name="email">
    </form>
</form>

Fortunately, modern browsers (everything released 2017 and on) support a form attribute, so you can associate inputs with different forms like so:

<form id="form1">
<form id="form2">
<div>
    <input name="name" form="form1">
    <div>
        <input name="email" form="form2">
    </div>
</div>

This allows us to present form inputs in a way that end users can logically process as a form and a subform, while staying in compliance with HTML's "no nested forms" rule.

Sadly, HeroUI's form input components do not all support the form attribute, making this type of thing impossible to do with HeroUI at the moment. Only naive/thinly-wrapped inputs like Input and Checkbox support this, mostly because HeroUI just inherits the default list of native element props from their corresponding HTML elements. For more complex inputs like DateRangePicker that use hidden inputs, there's no way to propagate a form attribute to these hidden inputs.

Proposed Solution

The proposal is simple and (presumably) very easy: just support a form attribute on any HeroUI component that exposes a name field (or some variant of it). For example, if we could initialize a DateRangeInput like so, it would fix the issue:

<DateRangePicker label="Stay duration" startName="startDate" endName="endName" form="form1" />

HeroUI has already done the work of adding support for uncontrolled forms by adding hidden inputs and exposing name props on all complex form inputs -- to support nested uncontrolled forms, it would just need to expose a new form prop and pass that prop to the hidden input.