Multiple Selection UI Element Freebie [PSD]

Added on August 8th 2013
psd preview


Hi guys, I've came up with an idea how to solve selecting multiple from a lot of items. Imagine regular text input with autocomplete, where you can check/uncheck multiple items.


Scenarios of use:
--------------------------------------------
1. Quick one item selection:
Go ahead into the text field, start type and once you're done hit enter.


2. Multiple selection through mouse:
Grab your mouse and click on the text field. Once autocomplete shows up, scroll and select items you want. When you've done, click out of autocomplete element.


3. Multiple selection through keyboard:
Type ahead what you want to select. Once you find it in autocomplete, press space. Your item wil be checked and you can continue with typing and selecting another items. Once you've done you can close autocomplete by pressing escape button. To close autocomplete you can also hit enter instead of space when checknig the last element.
--------------------------------------------


Of course, you can freely combine this use scenarios when selecting. I've also added a "clear" button, whitch can be used in situation, when you have selected many items and you want to start selection once again from scratch.