[Select] Allow setting form prop

[cmd-johnson]

Feature request

Native <select>s (and all other input elements) have a form prop that lets us override which form the input belongs to. As far as I can tell, the @radix-ui/react-select primitives don't support this property right now.

Overview

When using native <select> elements, you can render a select element outside of a <form> and later set the element's form using the form's id:

<select name="selectOutsideOfForm" form="exampleForm">
  <option value="a" selected>A</option>
  <option value="b">B</option>
</select>
<form id="exampleForm">
  <button>Submit</button>
</form>

Clicking the submit button includes the selectOutsideOfForm value in the resulting submission.

Similarly you can exclude a <select> from a form by setting it's form attribute to an invalid form id:

<form id="exampleForm">
  <select name="selectInsideOfForm" form="">
    <option value="a" selected>A</option>
    <option value="b">B</option>
  </select>
  <button>Submit</button>
</form>

Clicking the submit button now doesn't include the selectInsideOfForm element in the form.

Who does this impact? Who is this for?

Supporting the form attribute would enable use-cases such as

• rendering a native <select> element using SSR and then replace it with a radix <Select> element after hydration, allowing users to use the app before it is hydrated (or even with JS disabled)
• allowing more ways to structure forms by rendering <Select> elements outside of a <form> element

Additional context

MDN reference for the <select> form attribute

From looking through radix's code, I'd expect the implementation to work somewhat along these lines:

• adding a new form prop to the Select.Root component
• adding a new form property to the SelectContextValue type
• passing the form prop value to the <SelectProvider>
• set the form attribute of the Primitive.button element inside the Select.Trigger to the form value from useSelectContext
• set the form attribute of the BubbleSelect component to the form value from useSelectContext
• change the logic of determining isFormControl inside of the Select.Root component to check for the trigger's form (which will the browser sets to the actual form element reference at runtime) instead of using trigger.closest("form").
  • This might be a breaking change, but should only impact users that are passing a form prop directly to a Select.Trigger component. This is currently valid because the trigger element re-uses the native HTMLButtonProps type. Changing the trigger's form prop directly would lead to issues with the isFormControl logic, so an implementation would ideally omit the form prop from the SelectTriggerProps type, so the form prop can only be set through Select.Root.

I think that's it, though. I'd be happy to submit a PR for this if requested.