# How can I create chips in bubble? **URL:** \ **Category:** Questions\ **Created:** [May 10, 2020, 2:26pm UTC](https://forum.bubble.io/t/how-can-i-create-chips-in-bubble/90970 "2020-05-10T14:26:59Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![stephen7776](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/stephen7776/32/60331_2.png) [@stephen7776](https://forum.bubble.io/u/stephen7776)\ **Post date:** [May 10, 2020, 2:26pm UTC](https://forum.bubble.io/t/how-can-i-create-chips-in-bubble/90970/1 "2020-05-10T14:26:59Z")
Hi guys, Some ketchup, please! I’m trying to include chips in my app using a repeating group. Not sure if this is the best way to do it. How can I style this: ![image](https://us1.discourse-cdn.com/bubble/original/3X/a/4/a46460c9bfb0825ef60bbb9ddf63a9368c74bcc7.png) to this: ![image](https://us1.discourse-cdn.com/bubble/original/3X/6/f/6fa8e7ba01be07b652d685ed9adee373f5202dae.png) I need to adjust each chip’s width to wrap around the text. Thanks. ---
**Author:** ![bartek.dev](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/bartek.dev/32/50610_2.png) [@bartek.dev](https://forum.bubble.io/u/bartek.dev)\ **Post date:** [May 10, 2020, 3:23pm UTC](https://forum.bubble.io/t/how-can-i-create-chips-in-bubble/90970/2 "2020-05-10T15:23:44Z")
You can’t. The only way to do it for know is by counting the number of characters in a word and depending on the count show elements using conditionals, but it will not get you a responsive repeating group. or use custom code: > [@Dynamic width of textbox](http://forum.bubble.io/t/dynamic-width-of-textbox/1257/22): > > How can you implement it? I also need it ---
**Author:** ![edd](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/edd/32/161_2.png) [@edd](https://forum.bubble.io/u/edd)\ **Post date:** [May 10, 2020, 3:39pm UTC](https://forum.bubble.io/t/how-can-i-create-chips-in-bubble/90970/3 "2020-05-10T15:39:17Z")
If the use case is specifically just tags (apparently a.k.a. chips!), you can use a disabled multiple dropdown element (install Bubble’s multi dropdown plugin to get the element) to easily display variable width tags. Otherwise you can follow the AirDev approach in the linked thread above. Neither is perfect, but either might work for you. ---
**Author:** ![stephen7776](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/stephen7776/32/60331_2.png) [@stephen7776](https://forum.bubble.io/u/stephen7776)\ **Post date:** [May 10, 2020, 4:17pm UTC](https://forum.bubble.io/t/how-can-i-create-chips-in-bubble/90970/4 "2020-05-10T16:17:18Z")
I had a look at this. Was playing before with CSS and managed to get the same effect - resizing the tag to fit the text. My problem now is how to style the repeating divs to also resize and wrap around the tags. ---
**Author:** ![stephen7776](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/stephen7776/32/60331_2.png) [@stephen7776](https://forum.bubble.io/u/stephen7776)\ **Post date:** [May 10, 2020, 4:18pm UTC](https://forum.bubble.io/t/how-can-i-create-chips-in-bubble/90970/5 "2020-05-10T16:18:05Z")
Thanks edd, Had a look at this. I will most probably use it when editing or creating a new record. But how do I display the selected tags when only viewing the record? ---
**Author:** ![studio.purracchio](https://avatars.discourse-cdn.com/v4/letter/s/7ba0ec/32.png) [@studio.purracchio](https://forum.bubble.io/u/studio.purracchio)\ **Post date:** [May 10, 2020, 4:20pm UTC](https://forum.bubble.io/t/how-can-i-create-chips-in-bubble/90970/6 "2020-05-10T16:20:56Z")
Take a look: > **[Material Design UI Kit Plugin for Bubble, by Andrea Purracchio](https://bubble.io/plugin/mdui-dev-kit-1572777453139x243635964010561540)** > > Material Design UI Kit Plugin page on Bubble, by Andrea Purracchio. Add Material Design UI Kit in one click to your app. Bubble lets you build web apps without any code. > [@Material Design UI Components - \[Ver. 2.5.X\] - Purracchio Andrea](http://forum.bubble.io/t/material-design-ui-components-ver-2-5-x-purracchio-andrea/89507): > > What’s new New component: MDUI Chips for texts list …like a “multidropdown” Bubble element; Now you can change position of check boxes for Checkbox and Radio component, from left to right; Try new component to [https://picloud-mdui-landing.bubbleapps.io/chips\_textlist](https://picloud-mdui-landing.bubbleapps.io/chips_textlist) ---
**Author:** ![stephen7776](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/stephen7776/32/60331_2.png) [@stephen7776](https://forum.bubble.io/u/stephen7776)\ **Post date:** [May 10, 2020, 4:27pm UTC](https://forum.bubble.io/t/how-can-i-create-chips-in-bubble/90970/7 "2020-05-10T16:27:45Z")
This is really perfect! Anyone needing tags/chips and much more should consider this plugin. Only thing, this is an experimental app I’m building to learn to use bubble and it is a bit pricey just for that. ---
**Author:** ![edd](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/edd/32/161_2.png) [@edd](https://forum.bubble.io/u/edd)\ **Post date:** [May 10, 2020, 4:46pm UTC](https://forum.bubble.io/t/how-can-i-create-chips-in-bubble/90970/8 "2020-05-10T16:46:06Z")
In the element properties pane just check the “This input is disabled” box, and you can display tags like this: ![Screen Shot 2020-05-10 at 11.43.35 AM](https://us1.discourse-cdn.com/bubble/original/3X/d/6/d63bcdc97f137972ebb9691595abf03928a1752d.png) ---
**Author:** ![stephen7776](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/stephen7776/32/60331_2.png) [@stephen7776](https://forum.bubble.io/u/stephen7776)\ **Post date:** [May 10, 2020, 5:08pm UTC](https://forum.bubble.io/t/how-can-i-create-chips-in-bubble/90970/9 "2020-05-10T17:08:07Z")
> [@edd](#): > > his input is disable Thanks for coming back. This is what I have: ![image](https://us1.discourse-cdn.com/bubble/original/3X/a/c/ac09df45d615b3241a3854725b678cfd4c8353ba.png) And this is how it is looking: ![image](https://us1.discourse-cdn.com/bubble/original/3X/c/f/cf13907d1010467b181ed647ede78e4bc9124cdd.png) I must be doing something wrong! I also tried this and get nothing in the field: ![image](https://us1.discourse-cdn.com/bubble/original/3X/d/f/df9f7d2134bd06f8c6e67eec466816657d4fc76e.png) ---
**Author:** ![edd](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/edd/32/161_2.png) [@edd](https://forum.bubble.io/u/edd)\ **Post date:** [May 10, 2020, 5:19pm UTC](https://forum.bubble.io/t/how-can-i-create-chips-in-bubble/90970/10 "2020-05-10T17:19:41Z")
Fill in the “Option caption” section — that’s the label you want to display. The above section the source of the label, but you still need to tell it what field to display. In your case since your source is a text you’ll probably just end up with “Current Option” as the value in the “Option caption” section. ---
**Author:** ![stephen7776](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/stephen7776/32/60331_2.png) [@stephen7776](https://forum.bubble.io/u/stephen7776)\ **Post date:** [May 10, 2020, 5:35pm UTC](https://forum.bubble.io/t/how-can-i-create-chips-in-bubble/90970/11 "2020-05-10T17:35:12Z")
Thanks again. ![image](https://us1.discourse-cdn.com/bubble/original/3X/5/2/52d8f187ba3bf96eac0e9a99c6bfb842e8d4f6aa.png) Had to fill out the Default value as well for it too work! With some styling here it is: ![image](https://us1.discourse-cdn.com/bubble/original/3X/7/0/70e4edd4d9c4913d09a92639ed2f19cd863e02ce.png) Can I make them clickable so that I send user to a listing of recipes containing that tag? Many thanks once again. ---
**Author:** ![edd](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/edd/32/161_2.png) [@edd](https://forum.bubble.io/u/edd)\ **Post date:** [May 10, 2020, 6:39pm UTC](https://forum.bubble.io/t/how-can-i-create-chips-in-bubble/90970/12 "2020-05-10T18:39:44Z")
As far as I know you cannot make each tag clickable in this element. Like I said, not a perfect solution. ---
**Author:** ![stephen7776](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/stephen7776/32/60331_2.png) [@stephen7776](https://forum.bubble.io/u/stephen7776)\ **Post date:** [May 10, 2020, 7:16pm UTC](https://forum.bubble.io/t/how-can-i-create-chips-in-bubble/90970/13 "2020-05-10T19:16:02Z")
True. Thanks anyway. I’ll definitely will need this when inputting the record. ---
**Author:** ![andy.i](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/andy.i/32/64210_2.png) [@andy.i](https://forum.bubble.io/u/andy.i)\ **Post date:** [April 13, 2021, 8:36pm UTC](https://forum.bubble.io/t/how-can-i-create-chips-in-bubble/90970/14 "2021-04-13T20:36:35Z")
For anyone wanting a custom solution that doesn’t require a paid plugin (just the toolbox plugin). The chips can be clickable. [Editor](https://bubble.io/page?type=page&name=html_tags_chips&id=test-app-andy1&tab=tabs-1). ---
**Author:** ![EchoKids](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/echokids/32/87494_2.png) [@EchoKids](https://forum.bubble.io/u/EchoKids)\ **Post date:** [May 7, 2021, 1:52am UTC](https://forum.bubble.io/t/how-can-i-create-chips-in-bubble/90970/16 "2021-05-07T01:52:06Z")
Thank you for this!! Really helped! ---
**Author:** ![emcardenal](https://avatars.discourse-cdn.com/v4/letter/e/ecd19e/32.png) [@emcardenal](https://forum.bubble.io/u/emcardenal)\ **Post date:** [June 3, 2021, 9:59am UTC](https://forum.bubble.io/t/how-can-i-create-chips-in-bubble/90970/17 "2021-06-03T09:59:04Z")
Hello there, I’m trying to use this functionality and everything works well, but I’m trying to show every chip / label with a hexcode color previously chosen by the user (Trello labels’ style). Do you know if there is any way to custom this html in order to get a different color per chip? Using dynamic content in the background line is not helping, it applies the same color to the whole chips group altought they have different hex codes fixed in database. Thanks in advance! ---
**Author:** ![akrmimontassar](https://avatars.discourse-cdn.com/v4/letter/a/a87d85/32.png) [@akrmimontassar](https://forum.bubble.io/u/akrmimontassar)\ **Post date:** [August 1, 2021, 8:45am UTC](https://forum.bubble.io/t/how-can-i-create-chips-in-bubble/90970/18 "2021-08-01T08:45:37Z")
Did you try using **find & replace**? ![image](https://us1.discourse-cdn.com/bubble/original/3X/e/9/e90fef904186911412cb5be1e6f38abfc75e1af5.png) ---
**Author:** ![Sarah\_Esteve](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/sarah_esteve/32/258989_2.png) [@Sarah\_Esteve](https://forum.bubble.io/u/Sarah_Esteve)\ **Post date:** [January 23, 2022, 3:05pm UTC](https://forum.bubble.io/t/how-can-i-create-chips-in-bubble/90970/19 "2022-01-23T15:05:25Z")
hey @andy.i nice trick! I can’t do it work with option set. I think it is because there’s no unique id in OS, so I don’t know what to refer there : ![image](https://us1.discourse-cdn.com/bubble/original/3X/0/5/0516eb781f8495cddf3be4a9a8e61a3c76c1c8f2.png) Do you have an idea what I need to do ? Thank you ---
**Author:** ![andy.i](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/andy.i/32/64210_2.png) [@andy.i](https://forum.bubble.io/u/andy.i)\ **Post date:** [January 24, 2022, 11:23am UTC](https://forum.bubble.io/t/how-can-i-create-chips-in-bubble/90970/20 "2022-01-24T11:23:54Z")
Hey @Sarah_Esteve, use the option set “Display”. That should do it! ---
**Author:** ![Sarah\_Esteve](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/sarah_esteve/32/258989_2.png) [@Sarah\_Esteve](https://forum.bubble.io/u/Sarah_Esteve)\ **Post date:** [January 24, 2022, 12:56pm UTC](https://forum.bubble.io/t/how-can-i-create-chips-in-bubble/90970/21 "2022-01-24T12:56:33Z")
thx for replying 🙂 Maybe I do something wrong because I’ve this error with display : ![image](https://us1.discourse-cdn.com/bubble/original/3X/2/4/24309db18ca97b66e56856c4a93da311d662f3e3.png) ![image](https://us1.discourse-cdn.com/bubble/original/3X/c/7/c7a800bdb68d9d660f3078f8007bb6dd28d3f09e.png) [Next page](https://forum.bubble.io/t/how-can-i-create-chips-in-bubble/90970.md?page=2)