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.

  • Hierarchy
  • Select
  • Group select
  • Filtering
  • Checklist
  • Inline
  • Segmented
Showing 7 live examples
Hierarchy
Hierarchy
Select
Select
Group select
Group select
Filtering
    • Messages
    • Nov 4
      Viola Smith
      Angular js UI controls
      I'm planning to create a mobile app with angular js ...
      follow up
    • Nov 2
      Barry Lyon
      Guess what?
      You can now book hotels on our new website! Enjoy your weekend.
      work
    • Oct 27
      Angelina Carston
      This is blowig up
      Hey, thanks for helping me with this, I've had a hole lot a fun. Talk with you ...
      family
    • Oct 31
      Ema Joly
      October update
      Hi John, New servers are installed, firewalls are set up. Call Mike ...
      priority
    • Oct 31
      Linton Bradley
      Re: active
      Just activated your account. Give me a call if you need any help!
      misc
    • Oct 31
      Liza Taylor
      See you soon ...
      Hi bro!! We're gonna be a little late! XOXO
      family
    • Oct 28
      Abraham Donton
      Accounting
      Just giving you a heads up, briging this months papers in ...
      work
    • Oct 27
      Donald Rikovski
      Cannot reach you
      Hey John, I've been tring to call you like 10 times. Please give me a call back!
      important
    • Oct 27
      Linton Bradley
      Re: active
      Just activated your account. Give me a call if you need any help!
      misc
    • Oct 27
      Lettie Marje
      Your order ha shipped
      Hi John, letting you know, your packgage is on the way. Give me a call if you have questions.
      follow up
    Filtering
    This example should be experienced in full screen
    View in full screen
    Checklist
    Category
    Main Ingredient
    Checklist
    Inline
    Sizes
    Price Range
    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