I don’t see a prop in the ion-input docs for “id”, but I’m observing that Ionic seems to add a matching “for” attribute to the label, and an “id” attribute to the native <input>, so things like “ion-input-12” and “ion-input-13” appear in the generated component.
Wondering if there’s a way (or a plan to add a way) for implementing teams to add custom id values (we have unique ID’s generated that are used not only for a11y but for analytics and QA purposes, so we need better control over the id text that’s generated).
We don’t document the global attributes since those exist on all HTML elements. If you want to add a custom ID you can <ion-input id="custom-id">. This will add it to the ion-input and not the input, but you should be able to use a selector to still grab the native input: ion-input#custom-id input.
for a standalone element, <ion-input id="custom-id"> is ok. but you can’t do that in a v-for loop, the loop will generate id for each item no matter you want it or not, even you customize the id like id=“id-{{index}}”, or :id=“‘id’+index”, wont make any difference, those auto generated ids will be used instead anyway.