0

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.

3
  • 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, 2019 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. Oct 9, 2019 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, 2019 at 18:15

2 Answers 2

2

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
  • 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, 2019 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, 2019 at 13:31
0

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 and acknowledge you have read our privacy policy.

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