Ability to opt-out of BubbleInput / BubbleSelect

[willo-icon]

Feature request

Overview

There are a lot of feature requests related to the inconsistent and inaccessible rendering of <input /> and <select /> elements inside of components like <Checkbox /> and <Select /> (#874, #3356, #1333, #2987, #1270 to list a few) and while I look forward to the upcoming refactors that have been mentioned in many of those issues, I'd like to suggest / request an alternative approach. A great way to work around this would be to simply render your own <input /> or <select /> components so that you can choose how to manage them. This should be pretty straight forward by just putting your own children in there, but the problem comes from the selectively rendered <BubbleInput /> and <BubbleSelect /> components. Because there's no deterministic way to stop these from rendering, you could end up with two conflicting input elements on your components.

As a stop-gap for all of these problems, I would propose a new disableNativeInput?: boolean prop that lets prevent rendering the Bubble* components. As far as I can tell this should not negatively impact the components, since they already handle not having the native elements when placed outside of a form.

Examples in other libraries

This is somewhat of a Radix-specific issue so I don't know if there are relevant links, but the majority of component libraries that have Checkbox or Select components (e.g. MUI, React Aria) either consistently render a real <input /> or <select /> under the hood, or provide an option to use native elements.

Who does this impact? Who is this for?

As a new optional prop, this shouldn't impact anyone. This is for people who want to leverage the excellent Radix components without sacrificing the ability to use native input elements.

Additional context

Radix is dope.