I want to ask about multilayered options from the view of UI and UX. I need to make a form about coverage area in which contains states, city and districts. user can choose multiple states and cities and districts. do anyone have ideas of how I display the form in a simple way to make user understand they can choose multiple options. Here is my current form with dropdown, when user clicked "Add Area" the form will be multipliedenter image description here

  • 3
    This would fit much better on ux.stackexchange than here. It's also likely been asked over there, so look for duplicates before posting Commented Feb 2, 2017 at 12:41

1 Answer 1


keep both bottom layers dim/disabled, only enable the first one.. once they have selected the state then enable the city.. And when users select them enable the lasat Dist... Make it a kind of parent->child way.


After reading your comments I think you should make it in horizontal way. There are very rare changes that you get same city in multiple states. or districts in multiple cities..

So my idea is..make that horizontal



[+] Add more

This way, when use clicks on state, a list appears to select state, and on clicking/tapping on city he can select city and then dist..

if he needs to add more, he can tap on [+] and that will enough to add more and more.

  • I thought of make the that way too.. but the user can choose more than one states, cities and District. I thought it will make the list too long
    – user85495
    Commented Feb 3, 2017 at 3:17
  • please see updated answer
    – MFarooqi
    Commented Feb 7, 2017 at 12:27

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.