feat: custom html label for input and textarea with modern form syntax

[emeryao]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

Inline html template for label on ion-input

Describe the Use Case

with ionic@6.x I'm able to add some html and styles the label text like code below

<ion-item>
    <ion-label [position]="'stacked'">SomeField<small><i>Optional</i></small></ion-label>
    <ion-input></ion-input>
</ion-item>

but now with ionic@7.x the <ion-lable> component is discouraged and the [label] property of ion-input seems accepts strings only
so is there a workaround to get this done like before?

Describe Preferred Solution

No response

Describe Alternatives

No response

Related Code

No response

Additional Information

No response

[liamdebeasi]

Thanks for the report. This feature requires that ion-input and ion-textarea use the Shadow DOM which breaks autofill on iOS 14-16: https://bugs.webkit.org/show_bug.cgi?id=172567 (This feature was recently fixed, but it has not been released yet). As a result, we are unable to add the requested feature at this time.

However, you can continue using ion-label with aria-labelledby:

<ion-item>
  <ion-label id="my-label">My Label</ion-label>
  <ion-input aria-labelledby="my-label"></ion-input>
</ion-item>

Can you give this a try, and let me know if it works?

[emeryao]

Thanks for your response @liamdebeasi
I tried the code above and it works but there is a [Ionic Warning] in the console output and btw there is also a warning in the console even if I just keep the old style ionic@6.x codes
I also tried the code below to keep the html behaves like before and suppress the warning in the console which is just a not-so-beautiful workaround 😅

<ion-item>
    <ion-label [position]="'stacked'">SomeField<small><i>Optional</i></small></ion-label>
    <ion-input [label]="''" [labelPlacement]="'stacked'" [placeholder]="'please input'"></ion-input>
</ion-item>

[liamdebeasi]

Are you using aria-labelledby with no Angular binding? (i.e. not using [ariaLabelledBy]).

Here is an example that uses aria-labelldby without a warning: https://codepen.io/liamdebeasi/pen/PodMEBB

[emeryao]

Thanks for your advise and I have done another test with the latest @ionic/angular@7.0.1 with the code below

<ion-item>
        <ion-label id="my-label" [position]="'stacked'">SomeField <small><i>Optional</i></small></ion-label>
        <ion-input aria-labelledby="my-label" [placeholder]="'please input'"></ion-input>
</ion-item>

and it works without any [Ionic Warning] in the console

but I do not want to assign ids for my ion-label since there is a huge lot of fields in my html and it is a real difficulty to name ids for every fields 😅

---

Sorry for the late reply

[liamdebeasi]

Manually associating the input with the label is our recommended approach right now. Unfortunately, we are not able to add custom HTML support to ion-input at this time due to the WebKit bug I mentioned in #27061 (comment). Once the fix for that bug has been available for a time, we do plan to look into moving ion-input and ion-textarea to use the Shadow DOM which would allow for custom HTML support.

I am going to close this for now, but let me know if you have questions.

[znotdead]

At least update documentation about how to make html work in labels. Haven't found one.
My use case is red asterisk to required field labels. Is there functionality for that?
Having some inputs with new design and some with old ion-label and aria-labelledby will result inconsistency in text sizes and paddings. Definitely not production view out of box.

[liamdebeasi]

Definitely not ideal, but you can do something like this:

ion-input.custom-input .label-text::after {
  content: "*";
  color: red;
}

[znotdead]

Definitely not ideal, but you can do something like this:

ion-input.custom-input .label-text::after {
  content: "*";
  color: red;
}

Should issue be reopened? Bug https://bugs.webkit.org/show_bug.cgi?id=172567 for webkit already marked as resolved fixed if you were waiting for it. having id to use 'aria-labelledby' for each input (especially with arrays of forms) make development less pleasant than in ionic 6 and makes migration to 7 more risky.
In migration there is option to use legacy everywhere (but later will need to migrate anyway), use labelledby everywhere (no point in new style), use mix labelledby and new labels (need to fix css to make it visually match as paddings and text sizes are too different), use for now css ::after (and hope that no other functionality will be needed in future)

[liamdebeasi]

We've had a few people ask about this, so I am going to re-open for visibility. The linked WebKit has been resolved, but it's only applicable to iOS 16. We support back to iOS 14 so there are many iOS users who have not received the WebKit fix.

If you need complex HTML support we recommend associating an ion-label with ion-input using an aria-labelledby for now until we can introduce better support for HTML labels using the new input syntax.

[liamdebeasi]

Hi everyone,

We will be adding experimental support to both ion-input and ion-textarea for custom HTML labels with the modern form syntax. This feature will be available in the next minor release of Ionic, and we will have updated documentation to show how to use it.

The work required to add this functionality has been completed, so I am going to close this. Thanks!

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.