Parts Selector


Users need to configure an object consisting of several parts.


Show all the parts and allow the user to add or remove a part from the selection list.


Use when

A complex objects needs to be created by the users or modified later on. The object consists of several parts where the user must select the appropriate combinations of parts. The parts must be independent of each other so that they can be removed or added without consequences for other parts. The number of parts should be more than 10 and can possibly be categorized. The user may not know which parts are available. At some point users may change their minds and remove selected parts. Users need to know which parts are selected and which are available. The number of available parts may change during usage of the application.


Show the list of parts, in categories if applicable, on one side and the list of selected parts on the other side. Place add and remove functionality in between the left and right side. The user can add parts by selecting them and then adding them to the parts list. Consider speed-ups such as double-clicking or dragging to add or remove an item.


Showing both the available and selected parts gives the users a complete and instant overview. The visual organization creates a logical task flow from left to right. Because part lists are used the design can easily accommodate new parts or categories.

More Examples

This example is taken from Yahoo. Users can personalize their own pages and this screenshot shows how to select the movie-theatre from which they want to see the listings.

plml logo


1 comment has been added to this pattern.

lucky, 14th July 2011
can you give the source code..

Add a comment
Do you have something to add or say about this pattern? Perhaps some more examples of how this pattern is used in the wild? Add a comment to this pattern and I'll update the pattern when necessary. Please abstain from misuse. I reserve the right to delete or modify inappropriate postings.

Your Name


Enter the verification code you see in the image below