labelPlacement stacked conflicts with label slot

Ionic Framework
1

I need to add an (required) to my ion-input label. I would like to use additional HTML for the (required) so I’ve tried to use

The problem is that with an ion-input with labelPlacement stacked the label is broken.
Before

                           <ion-input
                                name="name"
                                class="nameInput"
                                mode="md"
                                label={i18n('name')}
                                required
                                type="text"
                                fill="outline"
                                labelPlacement="stacked"
                                placeholder={i18n('insert-name')}
                                onInput={(e) => this.handleChange(e)}>
                            </ion-input>

Screenshot 2023-06-22 alle 15.07.33

After

<ion-input
                                name="name"
                                class="nameInput"
                                mode="md"
                                // label={i18n('name')}
                                required
                                type="text"
                                fill="outline"
                                labelPlacement="stacked"
                                placeholder={i18n('insert-name')}
                                onInput={(e) => this.handleChange(e)}>
                                <div slot="label">{i18n('name')} <ion-text color="danger">(Required)</ion-text></div>
                            </ion-input>

Screenshot 2023-06-22 alle 15.06.36

There is no way to use the slot with stacked label?

2

Are you on Ionic 7.1? You need that version or newer to use the label slot.

3

The announcement of the official release of Ionic 7.1 came after my question. I was using Ionic 7.0.
I have updated in order to be able to use the feature. Thank you.

1 Like