Adding the form property to the button, input, and textArea components.

[jessecanderson]

Duplicate check

• I've searched for any related issues and avoided creating a duplicate issue.

This update is for:

Component

What is the name?

button, text input and textarea

What is the nature of this update?

• How to build this component/pattern
• When to use this component/pattern
• When to use something else
• Usability guidance
• Accessibility
• Implementation
• Research insights
• Package information

What problem does this solve?

When creating a form element, a user can set an id for the form to then assign to an input, textArea, or button element to allow these elements to be in the form without them having to be in the <form></form> structure. This is useful when a user needs to have multiple forms in a specific UI but have elements for one form around elements for another form like a nested tab structure or something. The forms can be created at the top level while creating inputs throughout the page.

<div>
    <form onSubmit={handleSubmit} id="firstFormId"></form> 
    <form onSubmit={handleSubmit} id="secondFormId"></form>
    <div>
        <input form="firstFormId"></input>
        <input form="secondFormId"></input>
    </div>
    <div>
        {selectForm ?? <button form="firstFormId"></button> : <button form="secondFormId"></button>}
    </div>

For our application, we have a screen that has two forms with disproportionate elements due to a tab view that we cycle through. Using the form="id" property allows us to link the form elements to the correct form for onSubmit function calls to grab the right fields and properties. Having this in the VA design elements would allow us to maintain this feature but also use the built in functionality of the component like validation and required properties.

Additional Context

Image of the 1st form

Image of the second form in the tab that is inside the same parent components.

[bkjohnson]

I'm trying to get a better understanding of the problem. Is there some reason why the elements can't be placed inside the actual form?

[jessecanderson]

HTML does not allow for nested forms, and the structure of our pages requires a tab element with another form with other elements outside the tab structure in the primary form. If we had the ability to just add in the form id into the element we could create our more complex layouts with two forms that do not interact with each other.

[bkjohnson]

I'm still not understanding the change that is being asked of us. In your code snippet you're using <input> and <button>, so I imagine what you're describing would work with those tags. Are you relying on something like submitEvent.target.elements and expecting some components to be there? Are you using our web components, like <va-text-input>?

---

Based on what I know right now, the short answer is I don't think it's possible for us to do this with our web components right now because Stencil, the tool we use, doesn't support formAssociated components.

[jessecanderson]

The code snippet does use the input and button, but we wanted to use the VAButton which does not support these properties. My example was to show that the base element that VAButton uses (which should be a regular button) supports the form property and we just wanted to see if we could do a passthrough of that. Make the field optional in the props and if it exists then assign it to the form prop in the base element button or input.

The VA Text Input or the VA Button don't support this form ID to pass though.

If this is not possible then that is fine, just was hoping to use the VA elements but still be able to create complex forms without nesting them (because we can't) inside the pages.

[bkjohnson]

Sounds good. If form-associated components become an option in Stencil we may revisit this.