Multiple value selection

The user needs to pick a single or multiple values from a range of available options.

Problem

The user needs to pick a single or multiple values from a range of available options.

Solution

Sometimes the user needs the option of picking any value (none, a single value or multiple values.

The multiple selection problem can be tackled a couple of different ways.

If space is limited use an input or a container to list the selected values and let the user pick in a modal box. Use a scrollable list as part for the actual data selection.

For up to five options use a checkbox list. This comes with the advantage of letting the user pick right from the same view where the options are listed.

If you have a hierarchy and need a value from each level, you can use a hierarchical scroller.

Showing 7 live examples
Hierarchy
Hierarchy
Select
Select
Group select
Group select
Filtering
Filtering
This example should be experienced in full screen
View in full screen
Checklist
Checklist
Inline
Inline
Segmented
Segmented

Problem

The user needs to pick a single or multiple values from a range of available options.

Solution

Sometimes the user needs the option of picking any value (none, a single value or multiple values.

The multiple selection problem can be tackled a couple of different ways.

If space is limited use an input or a container to list the selected values and let the user pick in a modal box. Use a scrollable list as part for the actual data selection.

For up to five options use a checkbox list. This comes with the advantage of letting the user pick right from the same view where the options are listed.

If you have a hierarchy and need a value from each level, you can use a hierarchical scroller.

Share in SMS
  • SMS
  • Email