I don't care as much about non-square checkboxes (not that interested in talking about bad design), but if there are related design topics to think about, it is these:
- How to signify a radio button that can be unselected?
- How to signify checkboxes with a max count of possible to select elements? (“select 2 out of 5”)
- How to signify checkboxes with a min count of items (“select at least 1 element”)
@kizu The latter two would be best thought of as validity constraints for the entire fieldset (or whatever we're calling a group of checkboxes). (In HTML, you would implement it in JS with the [Constraint Validation API](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation#validating_forms_using_javascript).)
For the "select at least 1", that's basically making the set a required item, and should be indicated similarly.
For the limited multi-select, some ideas:
- disable other checkboxes once max is reached
- wait until too many selected, then show error
Client-side form validation sometimes requires JavaScript if you want to customize styling and error messages, but it always requires you to think carefully about the user. Always remember to help your users correct the data they provide. To that end, be sure to:
@AmeliaBR Yep, I think both min and max could be just a validation thing, and I'm not even sure if disabling is a good idea, as it might make the user experience worse, making it more awkward to select new items (first you need to unselect the old one, then select the new one).
For the first one, the best is usually to provide just an extra “nothing” item.
Designs hints for these implementation cases are something that might be more interesting to explore, though.
@kizu Yeah, after writing it out, I definitely agree that it's best to wait & show the issue as a validation error.
The problem with "none" on a multi-select / checkbox list is then you have to enforce that that one option is exclusive! But at least it avoids the confusion between no answer and the answer is no. [Edit: Wait, I just realized you meant "none" as an option for a radio group, which is yes, a very good idea. Solves the implementation as well as the UX.]
For the first one, to stretch the metaphor of radio buttons even further, one of the buttons could cause all the other to pop out, without remaining pressed in :-)
Relatedly, seeing that many input types don’t have a reset mechanism, I was thinking whether button type=reset could be scoped to something closer than the attached form, maybe the nearest fieldset?
Roma Komarov
Amelia Bellamy-Royds
Dan Burzo
Morgana D'Almeida