feat: The input styles does not fit with the material design style

[enrique-lozano]

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

Currently ionic's float inputs look very outdated. It would be nice if they resembled the outlined version specified in the material design documentation (see link)

Desired aspect:

Current aspect:

It would be necessary to study well how these inputs are incorporated into the ion-items, since by default they occupy the entire screen, which does not happen with the new material design inputs. Therefore, other components would also be modified to maintain this design line, such as the select

Describe the Use Case

I understand that I can customize all these components myself but this should be the default behavior as it is specified in the MD style guides.

Describe Preferred Solution

No response

Describe Alternatives

No response

Related Code

No response

Additional Information

No response

[liamdebeasi]

Thanks for the issue. We recently added support for this in Ionic 6. It is an opt-in feature which is likely why you are not seeing it in your application. You can get this new style by setting fill="outline" on your ion-item:

<ion-item fill="outline">
  <ion-label position="floating">Input (Fill: Outline)</ion-label>
  <ion-input></ion-input>
</ion-item>

Please see https://ionicframework.com/docs/api/item#usage for more information. I am going to close this as this feature is already available in Ionic.

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