-
Notifications
You must be signed in to change notification settings - Fork 956
Ripple of InputElements should be triggered by HTMLLabelElement #5803
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Comments
Good find! It makes sense to me but I'll check with our designers to confirm that's the intention. |
Confirmed this is indeed a bug, though how to best fix it seems questionable. I'm not sure I agree that a The ripple itself could try to check and handle a control's labels here to add events, but it wouldn't work for dynamic labels being added or removed to the control: material-web/ripple/internal/ripple.ts Lines 482 to 489 in 5bc1506
|
Mm yeah didn't think about that. Wouldn't it make sense if all components that require a labelEl (i.e. radio, checkbox and switch) would implement the attachableController or rather extend a... lableHavingFormFieldAttchableController-Class since they would probably all do the same. This could either take in the rippleEl and set the pressed and hoverer state, which have to be made public then. |
Well it's not required that those components have a visual We could make something like the old Native labels do some interesting things with CSS. They do trigger pseudo class styles. Hovering over this label example will cause the input to show a red outline (jsbin example). This works for form associated custom elements too. <style>
input:hover {
outline: 1px solid red;
}
</style>
<input id="checkbox" type="checkbox">
<label for="checkbox">Label</label> Maybe there's a different approach to additionally support the ripple visual when its control matches |
Tried this in the internal/_radio.scss and its working rather lovely: :host(:hover) md-ripple {
background-color: var(--md-ripple-hover-color);
opacity: 0.08;
}
:host(:active) md-ripple {
opacity: 0.12;
transition-duration: 105ms;
} initial thought is to use this map.get stuff to provide handling for the ripple which could be set here. Gotta do some reading about this though, my knowledge about scss is limited Edit: went with Seems to work pretty well (I'm still testing around). |
Description
According to the guidelines, or at least this gif:

https://m3.material.io/components/radio-button/guidelines#eba97636-1dd9-4e81-a1a6-20b8123d1b83
The radio's label, or any input's label, should trigger the ripple effect. This is also something that the vanilla radio does:
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/radio#try_it
Elements can also have multiple labels, so MdRipple.control should take in an array (or el | Array)
The text was updated successfully, but these errors were encountered: