User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
Are there any common pattern for styling checkboxes where at least one option needs to be selected?
E.g. it's pretty common for text fields to have border and error message below:
But for checkbox, where do you place the error (e.g. if it contains like 10 choices placing it below might be not the best option)? Do you apply any kind of border around the field? Do you apply red border to individual checkboxes?
For all fields errors should go above the input(s) and below the label (or legend).
Here's one way to do it:
Here's another:
Make sure the error is associated to the fieldset by using aria-describedby. This provides a comparable experience for screen reader users.
I think it depends on the content of your page.
But if among the options there's one by default, you can keep that one active with a Toogle Checkbox and allow the user to cancel that option or not and activate others at the same time.
Until options visibility is not important like those are directly visible when using checkboxes. I will suggest using a Select tag so you can add feedback text placement as shown by you. Using select tag options are not visible until the user clicks on it.
