I have a web app and need to add a page where the user must select 1+ sets of 2 groups of items: Animals and Colors. In other words, they should be able to select 1+ Animals, and 1+ Colors. But, the list of available Colors depends on what Animal is currently selected...

Hence, given the following Animals:

  • Dog
  • Cat
  • Bear

And the following Colors:

  • Red
  • Green
  • Blue
  • White
  • Purple

And the following possible options between Animals and Colors:

  • Dog: {Red, Blue, White}
  • Cat: {Blue, White}
  • Bear: {Green, Purple}

I need to be able to allow them to select 1+ Animals, 1+ Colors, and make sure that the possible options (mentioned above) are "enforced" (meaning, they can't select Cat from the Animals list, and then select Red, Green or Purple from the Colors list).

What's the standard interaction pattern, UI component(s) and mechanism to implement this?

3 Answers 3


I think you need to get away from the strict form elements to help open up to a more usable solution to your problem. Rather than restricting yourself by using standard form elements as a starting point think of the best interface for the job then make the code do it.

The underlying code can still submit via form elements etc. but the overlaying interface can be completely separated from this functionality.

Remember that radio buttons and select boxes are just mechanisms for constraining the user into choosing one of a set of choices, you can build similar input structures using front end technologies and make them display in any way.

An example below shows white cat selected. All the available options are visible to the user and options are repeated where required. Selecting one of the top level options activates the appropriate list for the next choice and de-activates the other two lists. Marks are then also used to show the user where they are (contrast, borders and similar are recommended rather than just colour).


download bmml source – Wireframes created with Balsamiq Mockups

With this pattern everything is visible and the elements are logically grouped, the repetition of colours is only a problem underneath the bonnet, but not a tricky one to solve.

If you wanted to allow 1..n animals to be selected by any given user you could convert the functionality to allow more than one to be selected. In this case you would need ticks or some other mark that any given thing was selected or not.

In both cases a message would also be helpful to explain what the user should do, i.e. 'select as many animals as you like. you must also select a colour for each animal'


Here's one option you could use, I'm not sure if it's practical to implement in your situation but I think it's fun:.


(I'm not sure why I can't upload an image here.. so there's a link)

If your example is not the actual thing you are designing and you want a simple interface that works for anything (even things that don't lend themselves well to icons like animals) you could do something like this


Of course, if you get into a bigger list you'll want to do something a little different.


I hope this answer should resolve your problem. In my opinion you have 2 ways :

Firstly, you can create dynamic lists which colors results depends of radio button (for animal) selected few times ago. As soon as the animal has been selected, your lists with colors available appears. By this option, your content is 100% "responsive".

Secondly, you can make your animals list (dog, cat, bear) with radio buttons, then another list with both of colors (red, white, blue, green purple). Then, you can do a javascript "set". If cat has been selected, only colors available (blue white) appears with a font color black. Others answers are in a light grey. By black color, your available answers are highlight and user is easier distinct the available answers.

Or, of course you can hide non-available answers thanks to js.

I hope I understood your problem and help you in your project.

  • Thanks @Adrien Thomas - however they need to be able to select 1+ Animals, and if I display the Animals list as radio buttons, they will only be able to select 1 Animal at a time. The outcome of this UI should be a situation where, say, they have a "Cat list" that contains "Blue", and a "Bear list" that contains "Green" and "Purple". Commented Feb 11, 2014 at 18:37

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.