In a user input form, a field has 20 (or more) checkboxes which can grow dynamically. What is the best way to show this to the user. Can I use scrollbar on div with fixed height. Or should I display all checkboxes on the page directly.
Display all checkboxes together, in the main scrollable container. If you place them inside a scroller the user might miss the checkboxes that are hidden in the overflow of this secondary scroller (like in your image right now).
Sort the checkboxes alphabetically (or in other meaningful order), this way they can be found easier.
Do not display so many options to the user. If possible reduce them as much as you can.
Set two levels of options, for example:
□ dog □ cat □ falcon □ flamingo □ crocodile (...20+)
□ mammals □ birds □ reptiles (first selection between 6)
□ dog □ cat (second selection much reduced)
Ergonomically it would be best to make the dropdown with height that shows all checkboxes at once. However, this is a bit extreme, and will take a lot of horizontal space. You should do that only if that's the primary action of the page and all other elements are of secondary importance.
Use the right component
If you don't have enough horizontal space to lay all options at once, the best thing you can do is use the right component for selecting multiple checkboxes. I would recommend dropdown with search functionality and multiple selection ability:
interactive example here (see Multiple Selection with Checkboxes)
The search functionality enables for faster selection of options in a big list (20 or more options).
In the case where you have an input field that impacts on one or more other input fields, and that the logic/relationship is clear, it is important to think about how the user interface is going to change as a result of the selection. There are a couple of ways to weigh up your decision:
- Frequency of occurrence for different selections: design for the most commonly case, so that less users are impacted.
- Severity of worst case scenario: design so that the worst case scenario is not impossible to use, and therefore you won't stop a certain proportion of users from completing the task in a reasonable way.
- Overall constraint of form layout: design so that the general layout and organisation of the form is least disrupted, which is important when you consider differences between desktop and mobile view.
Now you may not be able to account for all these scenarios, but by applying a particular design approach it then allows you to test or come back and adjust the design when you have collected more information.
I suggest displaying more than one checkbox in a row, keep the labels as short as possible. If these changes are enough to avoid the scroll with an acceptable height for the fields group, I recommend you this option. Update: If the scroll will appear with the height you set, I think it is an acceptable solution.
Better to keep the fix height.
Since we can not put more than one check in a row due to associated label length and the available width. So its better to keep the scroll area with fixed height, or instead show the text representation of the selected checks (i.e. comma separated labels) and give some button to open the popup which instead show the list of check boxes but again we need to put the fixed height for popup and may need to put the list of check boxes in scroll panel.