New Component: Chips

[endigo9740]

Describe what feature you'd like. Pseudo-code, mockups, or screenshots of similar solutions are encouraged!

See the Material library link for this below. These offer a variety of different static and interactive options, including:

1. Assist chip
2. Filter chip
3. Input chip
4. Suggestion chip

What type of pull request would this be?

New Feature

Any links to similar examples or other references we should review?

• https://m3.material.io/components/chips/overview (v3)
• https://material.io/components/chips#types (v2)
• https://material.angular.io/components/chips/examples (autocomplete)

[endigo9740]

One thing to note is that these have a lot of overlap with what we currently call "badges". I'd recommend we discuss and review how we want to present these.

• Are badges the static Tailwind Element version of these? Like "lists" compared to "listboxes"
• Do they work in unison? So you can either go static with TW elements or dynamic with a component?
• Do we drop badges completely and go all in on the component?

Perhaps there's another way to tackle this I haven't thought of yet. Suggestions welcome here.

[endigo9740]

NOTE: a new chips.css elements stylesheet has been started, but is incomplete.

[ak4zh]

A nice tagify library to look at for inspiration to what props we can add:
https://yaireo.github.io/tagify/

Things like:

• closeOnSelect: bool
• allowCreate: bool
• async fetch available items

[endigo9740]

I've made some great progress on this today! The chip styles are now present, with many options and variant styles. Everything is documented.

Preview: https://skeleton-docs-git-feat-chips-skeleton-labs.vercel.app/elements/chips

I've also started working on the InputChip component, as I'm calling it, which is a special input that works in parallel with chips. This is an early draft, but it's working pretty well so far!

Preview: https://skeleton-docs-git-feat-chips-skeleton-labs.vercel.app/components/input-chips

[endigo9740]

I've flushed out the documentation and implemented additional features and style improvements. This includes:

• By default any value is allowed
• Values are trimmed and set to lowercase by default, but the latter can be disabled
• You can optionally provide a whitelist
• You can optionally provide a custom validation function that runs per entry

I've provided multiple examples showing all of the above options.

Try it here:
https://skeleton-docs-git-feat-chips-skeleton-labs.vercel.app/components/input-chips

[endigo9740]

This is now ready to test. Feedback from all is welcome.

@ak4zh I know this was a highly requested feature from you so feel free to let me know what you think.

[ak4zh]

@endigo9740 Looks really good.
Seems it's missing some of the options, do you plan on adding the following:

• the ability to show the whitelisted options as dropdowns
• the ability to disable user input and only allow selecting from the available options
• show whitelisted dropdowns but don't enforce them so users can add new tags along with suggested ones

[endigo9740]

@ak4zh Pretty much everything you asked about will be related to another feature that's incoming:

• New Component: Autocomplete #377

Auto-complete will be a separate feature, but can be used in parallel with this once available. Per that ticket Hunter has volunteered to take this on, but if I don't see progress by next week I'll jump on it myself. Once that's available we can look for options to utilize the two features together.