feat: Ionic V8: Ion-Input Label Size CSS Custom Properties

[bkarv]

Prerequisites

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

Describe the Feature Request

In ionic V8 new boiler template for ion-input where label is defined as part of ion-input, its now difficult to control the size of the label input. Requesting new CSS Custom Properties to set the size of the label.

<ion-input
[style.--label-size.px]="16"
  fill="outline"
  id="custom-input"
  label="Label Too Small"
  labelPlacement="floating"
></ion-input>

Describe the Use Case

There are situations where the label size can be way too small especially when using floating outline label.

For good accessibility being able to control the size of label would be great.

Describe Preferred Solution

new css property --label-size

Please consider impact to floating outline label. Currently the JS notch function is a fixed scale. For proposed change this would need to be based on the label-size

Describe Alternatives

No response

Related Code

No response

Additional Information

Ionic Version 8

[brandyscarney]

Could you please provide an exact example of what you're trying to do so we can make sure the use case is covered? For example, what are you trying to set the label size to, and how does it look incorrect? Including code and screenshots of the problem are helpful. Thank you!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to the lack of a reply. 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.

Thank you for using Ionic!