4

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: enter image description here

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?

enter image description here

Improve this question
1
  • Checkboxes indicate that a user can select any number of options, including zero/none. Could it be that your users are not aware that they should select at least one option instead? You could test whether providing a helpful caption below the checkbox-group label saying "Select at least one option", avoids such error in the first place. Regarding the error message itself you could try including it next or below the group label, so the user can understand it relates to all options.
    – Constantina
    Jun 11, 2020 at 18:05

3 Answers 3

Reset to default
3

For all fields errors should go above the input(s) and below the label (or legend).

Here's one way to do it:

enter image description here

Here's another:

enter image description here

Make sure the error is associated to the fieldset by using aria-describedby. This provides a comparable experience for screen reader users.

Improve this answer
2
  • Thanks. What is the rationale for having error message on the top of the input? The problem could be that it will push the input being worked on down a bit in case of inline validation?
    – Runnick
    Jun 13, 2020 at 12:58
  • 1
    Sorry I should have said. Putting it below the field means it can be obscured by the browser's autocomplete panel or by the onscreen keyboard. Also putting it above makes sense anyway. It means all the information users need to fill out the field / fix the error is available before they get to the input. Putting it after, means half the information is before the input (the label/legend) and half it is after the input (the error message).
    – Adam Silver
    Jun 13, 2020 at 19:32
0

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.

enter image description here

Improve this answer
1
  • yeah, but the question still applies: if they cancel all toggles but still need to select 1 to proceed
    – Runnick
    Jun 11, 2020 at 14:23
0

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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.