feat: checkbox, radio, range, toggle expose label shadow part

[muuvmuuv]

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

As for all other input elements like ion-select and ion-input, ion-range should also get the new implementation of labels with a part attribute attached for styling and customizations.

Describe the Use Case

I am building a consistent styling for all input elements in our app where the label is outside the input box, but the input box has a shadow and other styling. This works for all other elements pretty well, thanks for the work in that.

Describe Preferred Solution

Slots

Describe Alternatives

No shadow-dom

Related Code

No response

Additional Information

I remember that there have been a lot of label issues opened, but couldn't find one related to slots and ion-range.

[liamdebeasi]

Hey there,

I'm not sure I fully understand this feature request. Range already has a label slot: https://ionicframework.com/docs/api/range#slots

[muuvmuuv]

Ah yes, sorry, it's not clear because it is both named “slot”. I mean for styling, that I have a slot in HTML to select via CSS when it is in the shadow-dom. Alternatively, avoid shadow-dom like it's in some other ion components when using labels. I think it is really inconsistent between components.

[liamdebeasi]

When using the label slot all of the content is in the light DOM, so you can style it directly: https://codepen.io/liamdebeasi/pen/qBLgdpR

Using the label slot is our recommendation for when you need to use custom HTML/CSS. The label property is great for plaintext use cases, though not so much for the use case you provided. This is why we provide both options.

edit:

Also worth noting that you can use the same label slot approach I provided above for inputs and selects too if you want to reduce code duplication.

[muuvmuuv]

Liam I am so sorry, I meant "part"... hard week, pretty under stress with migrating our forms module and implementing other features.

Here is my repl. You see that range has shadow-dom without [part], ion-input has no shadow-dom and ion-select has shadow-dom but with [part]. That is what I meant with inconsistency.

https://codepen.io/muuvmuuv-the-selector/pen/ExGrjRg

[liamdebeasi]

Thanks for the clarification. So the reason why there appears to be styling inconsistency is two reasons:

1. You're using different APIs meant for different use cases.

The "label" shadow part on ion-select is designed for use cases where you want to render the label and the container separately. For example, developers may wish to have a border around the container and have the label render outside of that container. We don't provide a "label" shadow part on the range because that component does not have the same use case as the select.

The "label" slot is for developers who wish to only customize the label. We provide slotted labels all of our form controls so you can style the labels in a consistent manner.

2. Input does not use the shadow DOM due to an old WebKit bug.

We do have plans to consolidate our form controls to use the Shadow DOM, but we need to wait for drop support for older versions of iOS unfortunately.

[muuvmuuv]

Thanks, so then it makes sense ion-input differs.

For example, developers may wish to have a border around the container and have the label render outside of that container. We don't provide a "label" shadow part on the range because that component does not have the same use case as the select.

This is exactly what I want to acomplish (see my screenshot) but not possible at the moment due to no access to the inner shadow-dom with the part attribute.

I don't really understand how the both cases differ for label. The label slot becomes the shadow part on ion-select and I need to use the slot because the label is coming from our backend with HTML.

As you see in my link above (updated it with styling), I have no problems styling the other controls, but the ion-range has no part's attributes I could select.

[liamdebeasi]

Thanks for the clarification. I think it makes sense to just expose the shadow part for the components since it's confusing that some form controls have it and some do not. When implementing this, I think we should expose the shadow part for range, toggle, checkbox, and radio too (select already has it as you noted).

[liamdebeasi]

Please do not tag the team asking for updates. This issue was only triaged earlier this week, so we have not had the chance to work on it yet.

Someone from the team will comment here when this feature has been implemented.

[Deval99]

I am using ion-select, and i want to customise the label
it uses ion-popover instead of ion-select-option, as i am using interface="popover"
slot attribute adds a label inside ion-select-option, not in ion-popover

main problem is, label is inside ion-radio,

unlike previous version

[liamdebeasi]

Hi everyone,

This feature has been implemented in checkbox, radio, range, and toggle and will be available in an upcoming minor release of Ionic. 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.