Tags in select box, or Chips/badges with input



I’m trying to prototype a chip input (select box with multiple choice), smth. like this.

I used two repeaters: one for list (droplist would be preferable) and second for tags/chips that appear in the input to show selected options. For the tag repeater I adjust row width based on content - moving forward with @josephxbrick’s idea for adjustable row height (thanks a lot!)

What I can NOT cope with is “tag removal feature”. Unchecking an option in list works well, however clicking on a close icon removes tag from input, but doesn’t uncheck the corresponding option in list.

Live preview https://rbwujb.axshare.com

Axure file estelkhait_TagsInSelectBox.rp (75.4 KB)



Rather than adding and removing rows in the tags repeater, it’s better to treat it the same way as you do your list repeater: have all the items in the dataset from the start and filter them on the value of Item.Tagged. So basically both the checkbox in the list repeater and the X in the tags repeater behave the exact same way.

I updated your file with this approach, and changed the action of the Select all checkbox. Note that the list repeater no longer needs the tagwidth column in its dataset.

estelkhait_TagsInSelectBox.rp (83.8 KB)

[Edit] I notice that you’ll have to manage unchecking the Select All box. I’d just uncheck that whenever you uncheck any checkbox or tag.

Oh: I just noticed I was missing the Update Rows on the checkbox where it updates Tagged in the list repeater. That’s in there now. (Same link as above)


Thanks @josephxbrick, you save me!

I recognised “Select/Unselect all” feature doesn’t work well, and forced it to react properly on single check/uncheck action. Here’s the final version estelkhait_TagsInSelectBox_ed3.rp (91.8 KB)

Preview https://rbwujb.axshare.com