# \[New Feature\] Multiselect dropdown & tags

**URL:** <https://forum.bubble.io/t/new-feature-multiselect-dropdown-tags/7111>\
**Category:** New features\
**Created:** [October 19, 2016, 7:05pm UTC](https://forum.bubble.io/t/new-feature-multiselect-dropdown-tags/7111 "2016-10-19T19:05:19Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![emmanuel](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/emmanuel/32/27657_2.png) [@emmanuel](https://forum.bubble.io/u/emmanuel)\
**Post date:** [October 19, 2016, 7:05pm UTC](https://forum.bubble.io/t/new-feature-multiselect-dropdown-tags/7111/1 "2016-10-19T19:05:19Z")

</div>

This one has been awaited for a very (too) long time. We just added a plugin called ‘Multiselect dropdown’ that lets you have a dropdown that enables users to select more than one entry. The result of the element is a list of things (or list of texts).

See a demo here: [Forumapp3 | Bubble Editor](https://bubble.io/page?type=page&name=multiselect&id=forumapp3&tab=tabs-1)

 ![](https://us1.discourse-cdn.com/bubble/original/2X/f/f6dc24fce98945bb075aa4f2cdf502b537cbdc3a.png)

---

<div class="post-metadata">

**Author:** ![AliFarahat](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/alifarahat/32/189604_2.png) [@AliFarahat](https://forum.bubble.io/u/AliFarahat)\
**Post date:** [October 19, 2016, 7:10pm UTC](https://forum.bubble.io/t/new-feature-multiselect-dropdown-tags/7111/2 "2016-10-19T19:10:25Z")

</div>

Wow, now that’s magic 🙂

---

<div class="post-metadata">

**Author:** ![soeren](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/soeren/32/1726_2.png) [@soeren](https://forum.bubble.io/u/soeren)\
**Post date:** [October 19, 2016, 7:36pm UTC](https://forum.bubble.io/t/new-feature-multiselect-dropdown-tags/7111/3 "2016-10-19T19:36:35Z")

</div>

I have been trying to create my own component for this. Looking forward to using it!

---

<div class="post-metadata">

**Author:** ![romanmg](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/romanmg/32/237672_2.png) [@romanmg](https://forum.bubble.io/u/romanmg)\
**Post date:** [October 19, 2016, 7:44pm UTC](https://forum.bubble.io/t/new-feature-multiselect-dropdown-tags/7111/4 "2016-10-19T19:44:26Z")

</div>

Oh, this is very nice. 😍

---

<div class="post-metadata">

**Author:** ![JohnM](https://avatars.discourse-cdn.com/v4/letter/j/848f3c/32.png) [@JohnM](https://forum.bubble.io/u/JohnM)\
**Post date:** [October 19, 2016, 8:25pm UTC](https://forum.bubble.io/t/new-feature-multiselect-dropdown-tags/7111/5 "2016-10-19T20:25:20Z")

</div>

Thanks.  
PLUG IN

* * *

![](https://us1.discourse-cdn.com/bubble/original/2X/9/997eec49a8f9ac56b3d3f452d0701df305b6de4f.png)

---

<div class="post-metadata">

**Author:** ![blowenthal](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/blowenthal/32/5470_2.png) [@blowenthal](https://forum.bubble.io/u/blowenthal)\
**Post date:** [October 19, 2016, 8:57pm UTC](https://forum.bubble.io/t/new-feature-multiselect-dropdown-tags/7111/6 "2016-10-19T20:57:33Z")

</div>

This is fantastic! 😄

---

<div class="post-metadata">

**Author:** ![nicolas.daprigny](https://avatars.discourse-cdn.com/v4/letter/n/b38774/32.png) [@nicolas.daprigny](https://forum.bubble.io/u/nicolas.daprigny)\
**Post date:** [October 19, 2016, 10:15pm UTC](https://forum.bubble.io/t/new-feature-multiselect-dropdown-tags/7111/7 "2016-10-19T22:15:16Z")

</div>

thks, that’s nice.  
do you plan to make it responsive with its content ?  
 ![](https://us1.discourse-cdn.com/bubble/original/2X/f/fdb976a99af1b114c14857744a6f4055e50cad00.png)

---

<div class="post-metadata">

**Author:** ![emmanuel](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/emmanuel/32/27657_2.png) [@emmanuel](https://forum.bubble.io/u/emmanuel)\
**Post date:** [October 19, 2016, 10:42pm UTC](https://forum.bubble.io/t/new-feature-multiselect-dropdown-tags/7111/8 "2016-10-19T22:42:54Z")

</div>

Yeah we’ll add that.

---

<div class="post-metadata">

**Author:** ![kjaerulf.casper](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/kjaerulf.casper/32/7912_2.png) [@kjaerulf.casper](https://forum.bubble.io/u/kjaerulf.casper)\
**Post date:** [October 20, 2016, 8:51am UTC](https://forum.bubble.io/t/new-feature-multiselect-dropdown-tags/7111/9 "2016-10-20T08:51:34Z")

</div>

Great feature! But it seems you can’t click on the options on mobile (iPhone 6). And another small thing is that the placeholder text is not in the center 🙂 ![](https://us1.discourse-cdn.com/bubble/original/2X/a/ab4684277ae5687cfcb32cba7f1b29172c6f35a7.png)

---

<div class="post-metadata">

**Author:** ![jonaspalmqvist](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/jonaspalmqvist/32/7307_2.png) [@jonaspalmqvist](https://forum.bubble.io/u/jonaspalmqvist)\
**Post date:** [October 20, 2016, 10:10am UTC](https://forum.bubble.io/t/new-feature-multiselect-dropdown-tags/7111/10 "2016-10-20T10:10:05Z")

</div>

Great stuff.

@emmanuel, I noticed, when you enter something by typing and press \>tab, the entry clears. This goes for full static choices as well as additions to dynamic lists. Should it be this way or should \>tab has the same functionality as \>enter?

---

<div class="post-metadata">

**Author:** ![emmanuel](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/emmanuel/32/27657_2.png) [@emmanuel](https://forum.bubble.io/u/emmanuel)\
**Post date:** [October 20, 2016, 2:30pm UTC](https://forum.bubble.io/t/new-feature-multiselect-dropdown-tags/7111/11 "2016-10-20T14:30:33Z")

</div>

Well it’s supposed to be a list, so centering would be strange… just make the element less high. We’ll add a padding option though for you to control this.

---

<div class="post-metadata">

**Author:** ![emmanuel](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/emmanuel/32/27657_2.png) [@emmanuel](https://forum.bubble.io/u/emmanuel)\
**Post date:** [October 20, 2016, 2:30pm UTC](https://forum.bubble.io/t/new-feature-multiselect-dropdown-tags/7111/12 "2016-10-20T14:30:46Z")

</div>

Can you recreate the situation?

---

<div class="post-metadata">

**Author:** ![jonaspalmqvist](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/jonaspalmqvist/32/7307_2.png) [@jonaspalmqvist](https://forum.bubble.io/u/jonaspalmqvist)\
**Post date:** [October 20, 2016, 2:46pm UTC](https://forum.bubble.io/t/new-feature-multiselect-dropdown-tags/7111/13 "2016-10-20T14:46:37Z")

</div>

Yes, happens every time I follow your link to the editor above and preview the app.

EDIT: [https://vid.me/xbFs](https://vid.me/xbFs) @emmanuel

I’m using Chrome ver 53.0.2785.143 if that helps.

---

<div class="post-metadata">

**Author:** ![pauljamess](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/pauljamess/32/261876_2.png) [@pauljamess](https://forum.bubble.io/u/pauljamess)\
**Post date:** [October 20, 2016, 3:53pm UTC](https://forum.bubble.io/t/new-feature-multiselect-dropdown-tags/7111/14 "2016-10-20T15:53:26Z")

</div>

Awesome stuff! literally searching for this yesterday 😃

---

<div class="post-metadata">

**Author:** ![pauljamess](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/pauljamess/32/261876_2.png) [@pauljamess](https://forum.bubble.io/u/pauljamess)\
**Post date:** [October 20, 2016, 4:55pm UTC](https://forum.bubble.io/t/new-feature-multiselect-dropdown-tags/7111/15 "2016-10-20T16:55:33Z")

</div>

This is really awesome, thanks for the update 🙂  
I have one question. I have setup a field to allow users to add tags to their profile and then a search that allows other users to search through the database using a multi-select input - all works great!

At the min I am running a search for 'if tags contains current searches tags.  
But I was wondering if there was a way to make the search inclusive rather than exclusive i.e:

_Scenario:_

User 1’s profile has tags: Pizza, Beer, Netflix

User 2 searches for: Pizza  
= User 1 is displayed

User 2 searches for: Pizza, Beer  
= User 1 is displayed

User 2 searches for: Pizza, TV  
= No results  
(even though Paul has the Pizza tag- but just not the TV tag)

**it would be great if…**  
**User 2 searches for: Pizza, TV**  
**= User 1 is displayed**

Let me know if this makes, and if there is a way to do it!

Paul

---

<div class="post-metadata">

**Author:** ![romanmg](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/romanmg/32/237672_2.png) [@romanmg](https://forum.bubble.io/u/romanmg)\
**Post date:** [October 20, 2016, 5:06pm UTC](https://forum.bubble.io/t/new-feature-multiselect-dropdown-tags/7111/16 "2016-10-20T17:06:12Z")

</div>

You could merge 2 searches. Search for Pizza:merged with Search for TV.

---

<div class="post-metadata">

**Author:** ![pauljamess](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/pauljamess/32/261876_2.png) [@pauljamess](https://forum.bubble.io/u/pauljamess)\
**Post date:** [October 20, 2016, 5:09pm UTC](https://forum.bubble.io/t/new-feature-multiselect-dropdown-tags/7111/17 "2016-10-20T17:09:35Z")

</div>

Thanks!

Sounds interesting - could you expand on how I would approach that please? 🙂

---

<div class="post-metadata">

**Author:** ![pauljamess](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/pauljamess/32/261876_2.png) [@pauljamess](https://forum.bubble.io/u/pauljamess)\
**Post date:** [October 20, 2016, 5:12pm UTC](https://forum.bubble.io/t/new-feature-multiselect-dropdown-tags/7111/18 "2016-10-20T17:12:21Z")

</div>

Here’s my test to visually explain above.

![](https://us1.discourse-cdn.com/bubble/original/2X/b/b99126e9435e996e9ec1c32dcb0e2b429afdfcd3.png)  
 ![](https://us1.discourse-cdn.com/bubble/original/2X/6/68bcdddeddcc1d5ead9a3bf4cb145e1c2bf4f411.png)

Now, ideally test would still show here:  
 ![](https://us1.discourse-cdn.com/bubble/original/2X/c/c0241291dc36be73f8105232c88e37e2e2fe9f9f.png)

---

<div class="post-metadata">

**Author:** ![romanmg](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/romanmg/32/237672_2.png) [@romanmg](https://forum.bubble.io/u/romanmg)\
**Post date:** [October 20, 2016, 5:30pm UTC](https://forum.bubble.io/t/new-feature-multiselect-dropdown-tags/7111/19 "2016-10-20T17:30:46Z")

</div>

Yes, of course:

[Search for Users: Constraint \> Tags contains Pizza] :merged with [Search for Users: Constraint \> Tags contains TV]

So, I guess if you’re typing in tags in an input to search any tags that are in there it would look more like this:

[Search for Users: Constraint \> Tags contains Multiselect’s value item#1] :merged with [Search for Users: Constraint \> Tags contains: Multiselect’s value item#2]

Of course, this would mean you’d need to set a limit on how many tags to search. Now that I’m thinking through this, you may also need to set up conditionals to change the search based on how many tags are selected - I’d test this to see if you have a merged search set up for potentially 3 tags and a user only has 1 in there (so you’re left with 2 blanks) if it’ll end up including all users, which is not what you want… but with conditionals you can do when selected:count is 1, is 2, is 3 and change the data source for how many you’re merging with.

* * *

Gaby | [Coaching Bubble](http://coachingbubble.co)

---

<div class="post-metadata">

**Author:** ![kjaerulf.casper](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/kjaerulf.casper/32/7912_2.png) [@kjaerulf.casper](https://forum.bubble.io/u/kjaerulf.casper)\
**Post date:** [October 20, 2016, 6:01pm UTC](https://forum.bubble.io/t/new-feature-multiselect-dropdown-tags/7111/20 "2016-10-20T18:01:01Z")

</div>

Thank you @emmanuel… FYI you can’t still click on the dropdown options on mobile.

[Next page](https://forum.bubble.io/t/new-feature-multiselect-dropdown-tags/7111.md?page=2)
