Own TS types for types of input elements

[cintek]

Describe the problem

Now there is only a single type HTMLInputAttributes for all input elements and there is e.g. the library flowbite-svelte which uses this type to extend the props of a component with it. The advantage is that the maintainers don't have to implement each prop themselves but it comes with the disadvantage that the component has more props than it should have.

Describe the proposed solution

It would be nice to have types like for example HTMLInputRadioAttributes which are specific for one type of input element. Then libraries could extend the props of their components with these types.

Importance

nice to have

[adiguba]

Just in case, I generated the type based on the MDN

export interface HTMLInputButtonAttributes = Omit<HTMLInputAttributes, 'accept' | 'alt' | 'autocomplete' | 'capture' | 'checked' | 'dirname' | 'formaction' | 'formenctype' | 'formmethod' | 'formnovalidate' | 'formtarget' | 'height' | 'list' | 'max' | 'maxlength' | 'min' | 'minlength' | 'multiple' | 'pattern' | 'placeholder' | 'readonly' | 'required' | 'size' | 'src' | 'step' | 'width'>;
export interface HTMLInputCheckboxAttributes = Omit<HTMLInputAttributes, 'accept' | 'alt' | 'autocapitalize' | 'autocomplete' | 'capture' | 'dirname' | 'formaction' | 'formenctype' | 'formmethod' | 'formnovalidate' | 'formtarget' | 'height' | 'list' | 'max' | 'maxlength' | 'min' | 'minlength' | 'multiple' | 'pattern' | 'placeholder' | 'popovertarget' | 'popovertargetaction' | 'readonly' | 'size' | 'src' | 'step' | 'width'>;
export interface HTMLInputColorAttributes = Omit<HTMLInputAttributes, 'accept' | 'alt' | 'capture' | 'checked' | 'dirname' | 'formaction' | 'formenctype' | 'formmethod' | 'formnovalidate' | 'formtarget' | 'height' | 'max' | 'maxlength' | 'min' | 'minlength' | 'multiple' | 'pattern' | 'placeholder' | 'popovertarget' | 'popovertargetaction' | 'readonly' | 'required' | 'size' | 'src' | 'step' | 'width'>;
export interface HTMLInputDateAttributes = Omit<HTMLInputAttributes, 'accept' | 'alt' | 'capture' | 'checked' | 'dirname' | 'formaction' | 'formenctype' | 'formmethod' | 'formnovalidate' | 'formtarget' | 'height' | 'maxlength' | 'minlength' | 'multiple' | 'pattern' | 'placeholder' | 'popovertarget' | 'popovertargetaction' | 'size' | 'src' | 'width'>;
export interface HTMLInputDatetimeLocalAttributes = Omit<HTMLInputAttributes, 'accept' | 'alt' | 'capture' | 'checked' | 'dirname' | 'formaction' | 'formenctype' | 'formmethod' | 'formnovalidate' | 'formtarget' | 'height' | 'maxlength' | 'minlength' | 'multiple' | 'pattern' | 'placeholder' | 'popovertarget' | 'popovertargetaction' | 'size' | 'src' | 'width'>;
export interface HTMLInputEmailAttributes = Omit<HTMLInputAttributes, 'accept' | 'alt' | 'autocapitalize' | 'capture' | 'checked' | 'formaction' | 'formenctype' | 'formmethod' | 'formnovalidate' | 'formtarget' | 'height' | 'max' | 'min' | 'popovertarget' | 'popovertargetaction' | 'src' | 'step' | 'width'>;
export interface HTMLInputFileAttributes = Omit<HTMLInputAttributes, 'alt' | 'checked' | 'dirname' | 'formaction' | 'formenctype' | 'formmethod' | 'formnovalidate' | 'formtarget' | 'height' | 'max' | 'maxlength' | 'min' | 'minlength' | 'pattern' | 'placeholder' | 'popovertarget' | 'popovertargetaction' | 'size' | 'src' | 'step' | 'width'>;
export interface HTMLInputHiddenAttributes = Omit<HTMLInputAttributes, 'accept' | 'alt' | 'capture' | 'checked' | 'formaction' | 'formenctype' | 'formmethod' | 'formnovalidate' | 'formtarget' | 'height' | 'list' | 'max' | 'maxlength' | 'min' | 'minlength' | 'multiple' | 'pattern' | 'placeholder' | 'popovertarget' | 'popovertargetaction' | 'readonly' | 'required' | 'size' | 'src' | 'step' | 'width'>;
export interface HTMLInputImageAttributes = Omit<HTMLInputAttributes, 'accept' | 'capture' | 'checked' | 'dirname' | 'max' | 'maxlength' | 'min' | 'minlength' | 'multiple' | 'pattern' | 'placeholder' | 'popovertarget' | 'popovertargetaction' | 'size' | 'step' | 'value'>;
export interface HTMLInputMonthAttributes = Omit<HTMLInputAttributes, 'accept' | 'alt' | 'capture' | 'checked' | 'dirname' | 'formaction' | 'formenctype' | 'formmethod' | 'formnovalidate' | 'formtarget' | 'height' | 'maxlength' | 'minlength' | 'multiple' | 'pattern' | 'placeholder' | 'popovertarget' | 'popovertargetaction' | 'size' | 'src' | 'width'>;
export interface HTMLInputNumberAttributes = Omit<HTMLInputAttributes, 'accept' | 'alt' | 'capture' | 'checked' | 'dirname' | 'formaction' | 'formenctype' | 'formmethod' | 'formnovalidate' | 'formtarget' | 'height' | 'maxlength' | 'minlength' | 'multiple' | 'pattern' | 'popovertarget' | 'popovertargetaction' | 'size' | 'src' | 'width'>;
export interface HTMLInputPasswordAttributes = Omit<HTMLInputAttributes, 'accept' | 'alt' | 'autocapitalize' | 'capture' | 'checked' | 'dirname' | 'formaction' | 'formenctype' | 'formmethod' | 'formnovalidate' | 'formtarget' | 'height' | 'list' | 'max' | 'min' | 'multiple' | 'popovertarget' | 'popovertargetaction' | 'src' | 'step' | 'width'>;
export interface HTMLInputRadioAttributes = Omit<HTMLInputAttributes, 'accept' | 'alt' | 'autocapitalize' | 'autocomplete' | 'capture' | 'dirname' | 'formaction' | 'formenctype' | 'formmethod' | 'formnovalidate' | 'formtarget' | 'height' | 'list' | 'max' | 'maxlength' | 'min' | 'minlength' | 'multiple' | 'pattern' | 'placeholder' | 'popovertarget' | 'popovertargetaction' | 'readonly' | 'size' | 'src' | 'step' | 'width'>;
export interface HTMLInputRangeAttributes = Omit<HTMLInputAttributes, 'accept' | 'alt' | 'capture' | 'checked' | 'dirname' | 'formaction' | 'formenctype' | 'formmethod' | 'formnovalidate' | 'formtarget' | 'height' | 'maxlength' | 'minlength' | 'multiple' | 'pattern' | 'placeholder' | 'popovertarget' | 'popovertargetaction' | 'readonly' | 'required' | 'size' | 'src' | 'width'>;
export interface HTMLInputResetAttributes = Omit<HTMLInputAttributes, 'accept' | 'alt' | 'capture' | 'checked' | 'dirname' | 'formaction' | 'formenctype' | 'formmethod' | 'formnovalidate' | 'formtarget' | 'height' | 'max' | 'maxlength' | 'min' | 'minlength' | 'multiple' | 'pattern' | 'placeholder' | 'popovertarget' | 'popovertargetaction' | 'size' | 'src' | 'step' | 'width'>;
export interface HTMLInputSearchAttributes = Omit<HTMLInputAttributes, 'accept' | 'alt' | 'capture' | 'checked' | 'formaction' | 'formenctype' | 'formmethod' | 'formnovalidate' | 'formtarget' | 'height' | 'max' | 'min' | 'multiple' | 'popovertarget' | 'popovertargetaction' | 'src' | 'step' | 'width'>;
export interface HTMLInputSubmitAttributes = Omit<HTMLInputAttributes, 'accept' | 'alt' | 'autocapitalize' | 'autocomplete' | 'capture' | 'checked' | 'dirname' | 'height' | 'list' | 'max' | 'maxlength' | 'min' | 'minlength' | 'multiple' | 'pattern' | 'placeholder' | 'popovertarget' | 'popovertargetaction' | 'readonly' | 'required' | 'size' | 'src' | 'step' | 'width'>;
export interface HTMLInputTelAttributes = Omit<HTMLInputAttributes, 'accept' | 'alt' | 'capture' | 'checked' | 'formaction' | 'formenctype' | 'formmethod' | 'formnovalidate' | 'formtarget' | 'height' | 'max' | 'min' | 'multiple' | 'popovertarget' | 'popovertargetaction' | 'src' | 'step' | 'width'>;
export interface HTMLInputTextAttributes = Omit<HTMLInputAttributes, 'accept' | 'alt' | 'capture' | 'checked' | 'formaction' | 'formenctype' | 'formmethod' | 'formnovalidate' | 'formtarget' | 'height' | 'max' | 'min' | 'multiple' | 'popovertarget' | 'popovertargetaction' | 'src' | 'step' | 'width'>;
export interface HTMLInputTimeAttributes = Omit<HTMLInputAttributes, 'accept' | 'alt' | 'capture' | 'checked' | 'dirname' | 'formaction' | 'formenctype' | 'formmethod' | 'formnovalidate' | 'formtarget' | 'height' | 'maxlength' | 'minlength' | 'multiple' | 'pattern' | 'placeholder' | 'popovertarget' | 'popovertargetaction' | 'size' | 'src' | 'width'>;
export interface HTMLInputUrlAttributes = Omit<HTMLInputAttributes, 'accept' | 'alt' | 'autocapitalize' | 'capture' | 'checked' | 'formaction' | 'formenctype' | 'formmethod' | 'formnovalidate' | 'formtarget' | 'height' | 'max' | 'min' | 'multiple' | 'popovertarget' | 'popovertargetaction' | 'src' | 'step' | 'width'>;
export interface HTMLInputWeekAttributes = Omit<HTMLInputAttributes, 'accept' | 'alt' | 'capture' | 'checked' | 'dirname' | 'formaction' | 'formenctype' | 'formmethod' | 'formnovalidate' | 'formtarget' | 'height' | 'maxlength' | 'minlength' | 'multiple' | 'pattern' | 'placeholder' | 'popovertarget' | 'popovertargetaction' | 'size' | 'src' | 'width'>;

[dummdidumm]

This is more of a TypeScript limitation. The type is determined by the tag name (input), and we would somehow need to account for the type attribute as well. Even if we were to implement this in a future version, it would likely break a lot of existing types, so I'm not sure if this will ever get fixed.

[adiguba]

This is not about changing the existing HTMLInputAttributes, but about adding new and more precise types...