feat(select): add inputId prop

Author: TotomInc

README.md

@@ -102,6 +102,10 @@ Teleport the menu outside of the component DOM tree. You can pass a valid string
 
 **Note**: top and left properties are calculated using a ref on the `.vue-select` with a `container.getBoundingClientRect()`.
 
+**inputId**: `string` (default: `undefined`)
+
+The `id` attribute to be passed to the `<input />` element. This is useful for accessibility or forms.
+
 **aria**: `{ labelledby?: string; required?: boolean; }` (default: `undefined`)
 
 Aria attributes to be passed to the select control to improve accessibility.

src/Select.vue

@@ -45,6 +45,10 @@ const props = withDefaults(
      * JavaScript, instead of using CSS absolute & relative positioning.
      */
     teleport?: string;
+    /**
+     * The ID of the input element. This is useful for accessibility or forms.
+     */
+    inputId?: string;
     /**
      * ARIA attributes to describe the select component. This is useful for accessibility.
      */
@@ -89,6 +93,7 @@ const props = withDefaults(
     isMulti: false,
     closeOnSelect: true,
     teleport: undefined,
+    inputId: undefined,
     aria: undefined,
     filterBy: (option: Option, label: string, search: string) => label.toLowerCase().includes(search.toLowerCase()),
     getOptionLabel: (option: Option) => option.label,
@@ -346,6 +351,7 @@ onBeforeUnmount(() => {
         </template>
 
         <input
+          :id="inputId"
           ref="input"
           v-model="search"
           class="search-input"