I'm trying to figure out the best way to display a list of USA States where multiple items, or all, can be selected.

Select Element
The obvious UI element that exists for this sort of thing is the field where a long list of items can be shown and a user can select multiple from this list providing they know the key combinations to do so (holding control and click etc)

Checkboxes & List
Another solution I thought of was simply outputting all the States into a list (alphabetically order) which checkboxes next to the names. This is a little more intuitive for the user but takes up a large amount of space.

I wonder if any of my ideas are the correct experience for the user or whether a better solution exists.

Multi Select UI

  • 50 items are a lot – clickable map? (And does one include Puerto Rico etc. in such selections?)
    – Crissov
    Jan 20, 2015 at 14:46
  • 2
    @Crissov - 50 states on a map is a lot too. You waste a lot of space and dealing with the Several states on the East Coast makes it even more challenging. Unless geographical proximities are important, a map would Jan 20, 2015 at 14:52
  • 3
    ... tend to make things more difficult. Not knowing geography could make the selection more difficult too. (apologies for 2 comments - in mobile and accidentally hit send, and couldn't edit) Jan 20, 2015 at 14:54
  • 3
    The obvious answer is a multi-state checkbox. Jan 20, 2015 at 15:31
  • 1
    Anecdotally, and as referenced by an answer here, a multi-select box might be the best choice you have. There's an exact example of this situation in the Select2 documentation, "Multiple Select Boxes" -- select2.github.io/examples.html
    – Seiyria
    Jan 21, 2015 at 0:44

2 Answers 2


Whatever design you choose, think about placing some container which displays the current selected items, so that way users won't have to remember what they've selected previously by themselves, avoiding the need for scrolling back to double-check every selection. This way also the most relevant data for the action is showed separately from everything so it results in a cleaner interface.

Here some options for your case: (btw, I would place the (x) symbol on the right of the selected items, but I wasn't able to that with balsamiq)


download bmml source – Wireframes created with Balsamiq Mockups

The old school approach:

enter image description here

The fancier -and less usable- approach: It won't be appropriate for every website, but the idea also could be use as a complement of the other, the show the selected states as a preview.. (green = selected, borderInGreen (or other color) = activeElement, uncolored = unselected)

enter image description here

I also consider the last Roger example as a very good approach for plenty situations.

  • 1
    Cheers. This works great if non of the states are preselected. If for example the list is pre-selected and user wants to remove the places they don't include in their delivery you end up with a problem where lists on both sides are huge. You also cannot reverse the purpose (from add to remove) because that confuses people who expect it to work the same. What is your suggestion for this situation?
    – slaterjohn
    Jan 20, 2015 at 15:32
  • Mmm I don't get it completely. 1)Are you referring just to the "old school" approach or which?. Also, 2) what % approximately is going to be selected by default , 3) what % approximately will be the amount of states selected over the total? If they tend to be a lot, I would recommend the map solution -I've just add it- (specially if it's related with shipping) and/or the last recommendation from Roger. Jan 20, 2015 at 18:52
  • Gah! Your map update may look "fancier" but it is by far the least usable solution! (1) It takes up way too much space for so little information, (2) states are disproportionally represented - Hawaii is not that big and Texas appears to be far more important than other states, and (3) it is horribly hard to select Rhode Island or Delaware! The map is a solution, but it is not the right solution! Jan 20, 2015 at 18:53
  • I agree @EvilClosetMonkey, I made some clarifications. Jan 20, 2015 at 19:04

Essentially this is like adding tags - where each state is a valid tag. As the user types, a set of valid completion tags appears. Selecting one adds it to the list with immediate access to remove it again. Very similar to how the tags work here on stack exchange.

enter image description here

If users don't know the states ( eg are from outside the US) then really they do need to select from a list, but to be honest it's only 50 options - it's not overly excessive to have them in a big list - with an option to select or deselect all.

Example from google images:

enter image description here

You wouldn't have to show this list permanently, you could indicate how many states are currently selected; maybe list the first few and have an option to edit list at which point the list slides open until the user is done.

  • 2
    This wouldn't work if we preselected all options by default and the user didn't to remove the ones they don't want to deal with. It relies on international users knowing all the states too.
    – slaterjohn
    Jan 20, 2015 at 15:41
  • 1
    @slaterjohn If the used does not select / un-select what they want then no solution will work. He specifically states if they don't know the US states then present a fixed list. +1
    – paparazzo
    Jan 20, 2015 at 16:07
  • @blam Thanks for the support! To be fair, I extended my answer since that first comment which was in reference only to the tags part of the answer :) Jan 20, 2015 at 16:22
  • @blam My point wasn't that the user doesn't want to select states, they do. But the tag method expects them to start typing the name of the states. In countries other than the USA this isn't a suitable option. And if they need to unselect pre-selected states, the tag system make it even more difficult.
    – slaterjohn
    Jan 21, 2015 at 8:18
  • @RogerAttrill The tag selection may not be the best solution for this. But it certainly has it's uses. I think i'll go with your second solution where we have a check list, but not display them all to start with. I'll have a box saying "Select All (50)" which is pre-checked and then when unchecking this box we can show the individual options.
    – slaterjohn
    Jan 21, 2015 at 8:20

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.