Multiple Selection UI Element Freebie [PSD]

1 Attachment

5 Responses

  1. Martin Maričák Martin Maričák

    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.

    8 months ago

  2. Thomas Drach Thomas Drach

    Interesting idea. Has it been put into code at all?

    8 months ago

  3. Martin Maričák Martin Maričák

    @Thomas Drach Not yet. Maybe some time in the future, when I would have some free time, I make a small javascript library.

    8 months ago

  4. Allan McAvoy Allan McAvoy

    @Martin Maričák You would have to have instructions for the end user for the Multiple selection through keyboard, and i'm not to sure this would work great on devices that don't have a physical keyboard.

    8 months ago

  5. Martin Maričák Martin Maričák

    @Allan McAvoy Yeah, I will try to find a free time to create a mobile view. :)

    8 months ago

keyboard shortcuts: previous shot next shot L or F like