The user needs additional information other than the label of checkbox and I have multiple check-boxes adjacent to each other horizontally how should I show the information when the user is about to check the checkbox so that the user understands what is the label and what he is checking.

  • How do these horizontally-located checkboxes look? It sounds like it would become visually unclear which box is for which label (e.g., the box between two labels could be for either of them, the left or the right). – sintax Oct 7 '19 at 15:23
  • They are aligned with label written on top and its respective checkbox below it.so there are 10-15 checkbox inside a card and they are placed horizontally below the checkbox label which is a number and i have to give text information about that number. – vaibhav kothari Oct 9 '19 at 4:45
  • That sounds like an unusual presentation. Is there some reason not to organize the checkboxes in a vertical column and put the text to the right of the boxes, as usual? Even if the numbered boxes are intended to stand in for a scale or other ordinal structure, a vertical orientation rather than a horizontal one should be similarly affordant... – sintax Oct 16 '19 at 18:15

You can use a hover effect over the checkbox label with the info.

Something similar than this Codepen, but I think hovering the label is enough, the question mark icon is not necessary.

enter image description here

  • 2
    For phones/tablets, where hover may not be feasible, it may be better to retain the question-mark icons and allow them to be tapped to show the pop-up help-text. – TripeHound Oct 7 '19 at 13:30
  • 1
    You are right, actually I don't like the question icon design ;-) It looks more important that the checkbox itself. – Danielillo Oct 7 '19 at 13:31

Checkboxes can have multiple label inside them. if you can put the information in sub level of label I think it's a good solution for that. enter image description here Checkout the link for implementation: Codepen

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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