Dropdown multiselect

[TheresaHedlund]

Decision from the Design review May 8

The dropdown now has another version that allows multiple selections.

Full specification
See states and sizes here: https://designlibrary.sebgroup.com/components/forms/dropdown/#styles

Component identifier
component-dropdown

Thank you! :)
Ulrika
Design management

• Vanilla Dropdown multiselect (new) vanilla-pattern-library#123
• Bootstrap Dropdown multiselect (new) bootstrap#119
• Angular Dropdown multiselect (new) ng-components#27
• AngularMaterial Dropdown multiselect (new) seb-angular-material#30
• React Dropdown multiselect (new) react-components#19

[TheresaHedlund]

How complicated does it have to be? What's your need?

• select/deselect all option?
• need of a search within the options list?
• how to show what's selected

Some examples so you can see what I'm trying to say :)

Created a first suggestion: https://share.goabstract.com/e8f20342-c78b-4e55-aae7-0467ca012182

[ghost]

Think it looks good @TheresaHedlund 😍
Maybe we can add this multiselect as symbols for now and when we find further needs of functionality we dig in to it when that time comes?

[ulde01]

I like too, very clean and nice! If anyone has input, please share asap.

Next step is to (if you haven't already)

• Add this to the masterfile in Sketch,
• Send it out for review through Abstract
• Review it on the next Working group meeting
• Add issues in Github to be developed
• Show at Henkes komponent

Did/will your team develop this and add the code to design library @TheresaHedlund ?

[hjalmers]

I think we need a version with an option to use an input field as well to filter the items in the dropdown, something like this: https://github.pytes.net/tail.select/ (just the first hit on google) and like your third example here #59 (comment).

[TheresaHedlund]

I like too, very clean and nice! If anyone has input, please share asap.

Next step is to (if you haven't already)

• Add this to the masterfile in Sketch,
• Send it out for review through Abstract
• Review it on the next Working group meeting
• Add issues in Github to be developed
• Show at Henkes komponent

Did/will your team develop this and add the code to design library @TheresaHedlund ?

The development of this will probably not happen until after summer, or even later, due to change of plans in project.

[TheresaHedlund]

I think we need a version with an option to use an input field as well to filter the items in the dropdown, something like this: https://github.pytes.net/tail.select/ (just the first hit on google) and like your third example here #59 (comment).

Do you think any of these would work better or maybe not at all? :)

And, could we choose to use "Select all" and "Search" only if needed?

[hjalmers]

I would vote for v3 and perhaps search should be filter or find as the user would filter the options below based on the input in the field but that's up for discussion and user testing:)

v1 and v2 might look cleaner but it might be confusing if the items/options below are removed based on the input i.e. if user types Option 3 then Option 1 and Option 2 would be removed but Select all wouldn't? v3 makes that distinction clearer in my opinion as only the options below the input would be altered:)

Select all and Search should be optional, same as the ability to select multiple values. I've actually created an issue for it here: sebgroup/ng-components#22 (currently requires special permission as it's not public yet).

[ghost]

I vote for v1 with a little twist. The "Select all" should be visible even after you get suggestions on your selection. So it might need a line to. (But only if there still are a few options left.)
Agree on the Filter or Find instead of Search.

[didzisspruds]

I would agree to Jesssi. I vote for version1 as it looks more simple to me.

[TheresaHedlund]

New iteration for version 1. We decided to keep the word "Search", since that seems like the most common one used in other examples.