Highly customizable checkboxes and radio buttons

damirfoy.com

81 points·shawndumas··9 comments

I like these in general, but the 'line' skin is a usability problem. They look like buttons, but function like checkboxes/radio buttons which make it very confusing.

I like them too. I packaged them for the rails asset pipeline here: https://github.com/cubus/icheck-rails

These are great. Very well done. Two issues/suggestions. The checked radio button in Flat: the outer circle should either be thinner or the button should just be a circle with a hole in the middle. The checkbox in Polaris: don't have the check extend outside the box as it doesn't look consistent with the rest of the style.

Those are my suggestions. Do with them what you may.

The UI designer in me loves these. The UX designer in me says that replacing native UI elements is bad practice. Am I wrong?

I feel that way too, but I think most of my reaction is that it feels hard to fully test these kinds of elements and often really odd things happen on the edge cases with them...

but that might be an outdated sentiment. (it's just a feeling after all :D)

For example, the radio button confused me. I thought that it's a toggle button because of the tick mark.

Quite cool indeed. Issues..

Disabled state text should also be grey. (Currently, differentiating between unchecked and disabled isn't easy.)

'Line skin' unchecked state as an 'x' may mislead some people.

Very nice! All themes looks great besides the line skin, that mix the check with radio and show an X when they are not checked.

These look awesome! I hope I can use them in my next project :)

Reply on news.ycombinator.com