The behavior is if you select a state it selects all the cities in that dropdown. But in this scenario if user selects USA shouldn't all the states be disabled/gray rather than selecting all the states? I say this because if all the states/cities are chosen and they change there mind they would have to unselect them all.

region dropdown

  • Would not deselecting "USA" deselect all states and cities? However I think when selecting "USA", selecting all states and cities is overwhelming. Commented Nov 3, 2022 at 20:50

3 Answers 3


No, they should be enabled.

What you're using here is a tree view pattern.

A tree view widget presents a hierarchical list. Any item in the hierarchy may have child items, and items that have children may be expanded or collapsed to show or hide the children. For example, in a file system navigator that uses a tree view to display folders and files, an item representing a folder can be expanded to reveal the contents of the folder, which may be files, folders, or both. This is a very common pattern (just take a look at your own operating system's file manager) that most users will recognize at first glance.

The idea is that you can quickly select and deselect items or groups of items with minimal effort, while easily understanding what happens to the selection

So the convention is to use a sign, check mark or similar for each individual item selected or for each group for which all items are selected.

However, if not all elements of a group are selected, a square is usually displayed in the checkbox (see image below)

enter image description here

Now, to address your specific example, let us look at some use cases:

  • I want to select all cities in the USA: then I select the USA check box
  • I want to select a region: I select only one region without selecting USA. Then USA will show a square.
  • I want to select a city within a region group: I open this region and select a city. Now both the region dropdown menu and USA should show a square
  • I want to select most of the US, but not all of the region: then I probably select the US and then look for a few entries that do not match my criteria. Squares are displayed for both the USA and some other groups.

The important thing is: users can use this flow in increasing (they start adding selected items) or decreasing (they select everything and then filter the items they do not want) ways. To do this, the elements must always be enabled so that users can interact in any way they want.

  • Hey Devin this is really useful thank you. Makes sense.
    – Keano
    Commented Nov 10, 2022 at 23:49

Would not deselecting "USA" deselect all states and cities?

However, when selecting "USA", selecting all states and cities is overwhelming.

Rather than automatically select sub options, provide a note stating how many states and cities, or cities if selecting a state, are selected:

select usa

  • Thanks. That is something I could try. I also feel selecting all regions would be overwhelming but... I could see using your idea and all regions are selected. Then if they deselect a region (like mid-atlantic) USA would display that updated number. (11 Regions, 84 cities selected). I am trying to prepare for all stakeholder questions. This is useful.
    – Keano
    Commented Nov 3, 2022 at 21:23
  • Yes. I also suggest you provide a "deep dive" option for users that need to increase the complexity of their selections. Use the drop down for the majority of searches and provide a more complex search for the few who need it—they are motivated to work with a more complex interface. Commented Nov 4, 2022 at 15:20

At a certain level of complexity, it becomes difficult for the user to control what they want to select in a single dropdown. If there are potentially thousands of choices at the city level, a multiselect dropdown wouldn't be the correct pattern.

The right pattern depends on your use cases. What is your user trying to accomplish? Do they want to select a combination of large regions and one-off cities? Do they want to search for particular cities and only target those? Are they working more with an exclusion pattern (select all cities EXCEPT Dallas, which will have its own unique criteria)?

I would suggest you write out your user stories and design optimal workflows vs. trying to find a single component that can accommodate all items.

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.