[Feature Request] Add ID prop to Input base slot

[craigbehnke]

Is your feature request related to a problem? Please describe.

I want to test my components, which requires using a selector, such as #my-input-id. However, as far as I can tell the Input component does not have support for setting an ID on the Base slot.

Describe the solution you'd like

As a user, I expected to be able to set an ID on an input, but the ID I passed to the component was set on the <input/> element instead.

What I would like to see is an ID property added to the Input component that is applied to the component's root DOM node.

So I could write the component like this:

<Input 
    onInput={onInput}
    value={value}
    baseId="my-input-element"
/>

...and have the ID applied to the [data-slot='base'] element.

Alternatively, the ability to set a data-testid attribute on the root node could also work, but would also be less user-friendly.

Describe alternatives you've considered

I've considered wrapping the input in a div and applying the ID to that div, but that is a bit more of a hassle since to get the root data attributes (such as data-invalid) I would have to use #my-input-element [data-slot='base'] instead of #my-input-element.

I also could use the useInput hook to build my own implementation, but this would be extreme overkill.

Screenshots or Videos

No response

[linear]

ENG-1649 [Feature Request] Add ID prop to Input

[craigbehnke]

Note: it appears that this issue applies to every NextUI component, not just the Input component. (I have yet to find a component that supports setting an ID).

The base React-Aria components do support the ID field, though.

Edit: I realized that the ID prop was being set on the native input element. I've updated the issue above to reflect that I specifically want to set an ID on the base slot.