3 ms·
Don't use the slider checkbox from example 2. It's not obvious what the state is, especially without color/contrast.
by gsich 4y ago
Don't use the slider checkbox from example 2. It's not obvious what the state is, especially without color/contrast.
- buttersbrian 4y agoI don't think slide toggles are inherently bad, but yes color is your friend and doing them like Material does them is a solid foundation.
- cosmotic 4y agoSlide toggles are widely considered to have bad usability because it's not clear what position they are in.
- foobarbecue 4y agoSlide toggles are such an annyoing fad. I find them really unusable. If you're going to implement one, please label which side is on vs off. Or just use a damn checkbox -- it's the same thing, but actually clear when it's enabled or disabled.
- andrei_says_ 4y agoAppple iOS design uses these instead of checkboxes and the web followed. Don’t see how they are better - maybe when used without a submit button to imply that the change takes place immediately.
- skydhash 4y agoI believe because it always mean On/Enabled/Active when it’s green. So consistent meaning.
- frosted-flakes 4y agoThat's exactly what they're for. Checkboxes are for forms, and forms need to be submitted. Toggles take immediate effect.
- kristopolous 4y agoYou can generalize this: if you have to implement the UI element because it's not there by default (like a slider), it's probably worthwhile to investigate why.
- andrei_says_ 4y agoAlso default browser elements have been tested and retested. Reimplementing prettier versions is not always better. some form elements like checkboxes, radios, sliders, cannot have their size or color be controlled via css - they need to be outright replaced.
- kristopolous 4y agoPeople reimplementing basic things like scrolling always comes out so comically bad and broken. It reminds me of the classic dragon drop parody https://m.youtube.com/watch?v=DCu1G2rxj5c https://m.youtube.com/watch?v=DCu1G2rxj5c
- frosted-flakes 4y agoColor can be controlled with the accent-color property. https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color https://developer.mozilla.org/en-US/docs/Web/CSS/accent-colo...