Tag or "chip" input

[nadenf]

What issue are you having?

There is a tag component but not a built-in way to create them.

Describe the solution you'd like

I would like a Shoelace equivalent of this: https://olahol.github.io/react-tagsinput/
Based on a combination of the Input + Tag components.

[bunesk]

The sl-input provides you the slots prefix and suffix. Doesn't this already solve your problem?
https://codepen.io/buni48/pen/yLzmwap

<sl-input>
  <span slot="prefix">
    <sl-tag removable>Tag 1</sl-tag>
    <sl-tag removable>Tag 2</sl-tag>
  </span>
</sl-input>

[claviska]

This could probably be composed as suggested above, but that doesn't turn it into a form control. Baking in the ability to manage a collection of values and validity like other form controls would be pretty useful.

[oliversalzburg]

I was trying to make this work based on SlSelect with the multiple option. A dedicated component would definitely be awesome.

[nileshtrivedi]

I created a tags input with <sl-input> with multiple <sl-tag> in the prefix slot using SvelteJS:

Demo: Go to https://grapherx.netlify.app/ and select the "Algebra" node.
Code is here: https://codeberg.org/nilesh/grapher/src/branch/main/src/TagsInput.svelte

As you can see, it starts breaking when <sl-input> has too many items in the prefix slot. I thought of using <sl-textarea> but unlike <sl-input>, <sl-textarea> does not support prefix slots at all.

[jaredcwhite]

@nadenf I built this control a while back:

https://github.com/whitefusionhq/sl-tags-input

It hasn't been properly vetted for accessibility, but it might help you in a pinch.

[nileshtrivedi]

Calcite library does have a webcomponent that supports tags input - both from a list as well as custom user values: https://developers.arcgis.com/calcite-design-system/components/combobox/

[claviska]

@nileshtrivedi The one you've linked to works a lot like <sl-select multiple>. The difference is you can't type freely in Shoelace's, but then again it looks like arbitrary options aren't supported in Calcite's either.

[nileshtrivedi]

it looks like arbitrary options aren't supported in Calcite's either

Actually it does: allowCustomValues

[SuaYoo]

I built a shoelace tag input component recently that you could reference here: https://github.com/webrecorder/browsertrix-cloud/blob/main/frontend/src/components/tag-input.ts It has dependencies on lit-html, shoelace, and lodash for debounce/throttle. btrix-tag can easily be replaced with sl-tag.

Screen.Recording.2023-02-07.at.12.11.38.PM.mov

Needs some accessibility & keyboard navigation improvements but it's in active use. (Kudos @Shrinks99 for the design.)

[Ro-meo]

will this ever be part of Shoelace ?

[horizoncarlo]

Any chance this will get added?

I also like how PrimeNG handles the chip input idea, where you can type arbitrary text and press Enter and have it added to the chips list https://primeng.org/chips

I'll cobble something together with sl-tag in the meantime