bug: Customisation limitations of inputs in Ionic 7

[SaroGFX]

Prerequisites

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

Ionic Framework Version

v7.x

Description

The new input and label implementation have introduced some limitations regarding customisations of input fields. I have labeled this issue as a bug since it used to be possible with the previous implementation of inputs and labels. Feel free to change this.

So some of the inputs that we are trying to migrate to Ionic 7, but are seemingly not possible are:

1. Input with a label and a prefix to the input (e.g. currency symbol) .

2. A multi-row input with a select combination:

3. Toggle with a prefix and label

Code Reproduction URL

https://codepen.io/SaroGFX/full/abQPaNL

Additional Information

In case there are other workarounds currently available, I'd be happy to learn about them of course.

I wouldn't mind if Ionic would keep supporting the ion-label component, if that's what's needed to make such customisations possible.

[liamdebeasi]

Thanks for the report. There are a few requests here, so I'll address each one individually.

Passing custom icons/decorations/text to ion-input

Slotting custom decorations/icons in ion-input is being tracked in #26297 (This specifically mentions icons, but you could pass plaintext too)

---

Multi-row input with select combination does not work as expected

This isn't a pattern I recommend doing. In your example, the select arrow rotates up when clicking into the first/last name inputs. This is confusing because it gives the impression that the inputs are somehow linked to the select which is not the case.

In fact, the Ionic 7 behavior, while noted as "broken", is actually the correct behavior. The select is not tightly coupled to the inputs, though the select can still be used to change the title. Additionally, the select arrow does not rotate up when one of the inputs are focused.

---

Toggle with a prefix and label

This is already possible via the end slot:

<ion-item>
  <ion-label>Text A</ion-label>
  <ion-toggle slot="end">Text B</ion-toggle>
</ion-item>

Note that for accessibility purposes "Text B" would be considered the text associated with the toggle and "Text A" would be decorative text.

Alternatively, you can have neither text associated with the toggle. In that case, you should add an aria-label:

<ion-item>
  <ion-label class="custom-label ion-text-nowrap">
    <div>Text A</div>
    <div>Text B</div>
  </ion-label>
  <ion-toggle aria-label="My Toggle" slot="end"></ion-toggle>
</ion-item> 

<style>
.item ion-label.custom-label {
  display: flex;
  justify-content: space-between;
}
</style>

[SaroGFX]

Thank you for the super quick response Liam

Multi-row input with select combination does not work as expected
-->
That's great, I will follow up on that ticket for progress
-->

Multi-row input with select combination does not work as expected
-->
In our app they are actually coupled, depending on which option you select, it might pre-fill some of the fields below. (it even saves state between changes). I have also added a custom chevron and animation, so this issue with the chevron is not happening in our app. (Which I can only reproduce in Chrome, not Safari)

Anyways, this is more of a UX discussion, and although I think would be a nice if there were some ways to group fields together visually, I think it's totally acceptable if this is not supported.
-->

Toggle with a prefix and label
->
Perfect, I will apply this, thanks a lot.

Would you not recommend to use ion-text instead of ion-label there? As I was expecting the component to be completely deprecated in the next version.

For now, we can keep using the legacy version. It might be nice to suppress the console warnings if legacy prop is defined? (Which flood the console, because React 😛 )

Edit: I found this as a feature request here too. The warning is great, but I think that if the developer has explicitly included the legacy prop in their code, one could argue that this developer knows it will be deprecated and should be refactored before the next update.
-->

[liamdebeasi]

In our app they are actually coupled, depending on which option you select, it might pre-fill some of the fields below. (it even saves state between changes). I have also added a custom chevron and animation, so this issue with the chevron is not happening in our app. (Which I can only reproduce in Chrome, not Safari)

Ah ok I see. Yeah this isn't something we recommend doing. An ion-item should typically only have one or two form controls inside of it to match the iOS and Material Design guidelines. You can definitely group multiple components together as you see fit in your app, but ion-item probably is not the right place to do this.

Would you not recommend to use ion-text instead of ion-label there? As I was expecting the component to be completely deprecated in the next version.

So ion-label as a component is not deprecated, but its usage alongside form controls is. You will be able to continue to use ion-label as a component, but in the future an ion-label will not automatically be associated with a sibling form control such as an ion-input.

[SaroGFX]

Regarding the multi-row, I just learned about the justify attribute, which allows me to build the same multi row inputs.

Good to know that ion-label will not be deprecated completely. Thanks you for the quick response, I'll close the issue since the remaining issue is already being tracked.

[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.