[Tags] Tag input, tags group

[Pablodotnet]

Summary

Development of an input where you will write a word or phrase, press enter and it will add a tag, it could be used with autocomplete or without it. I will share the design with autocomplete.

Justification

Some of the most popular ui frameworks have it and now we are needing it in an actual project but carbon does not have it implemented.

Desired UX and success metrics

It's basically a text input in which we are going to type a word or phrase, press enter and a tag will be displayed inside that input, it could be on the same row of the input or display above it BUT it should be looking like it's inside the input, this input can being used with autocomplete or without it, you'll watch it in the design.

"Must have" functionality

Basic input and with Autocomplete option

Specific timeline issues / requests

We need it for a very important project but we will try to make a basic solution meanwhile this component is officially developed to carbon.

Available extra resources

The design of the input, I think this designs follows correctly the guidelines so I think is the perfect design to be used for it.

[dakahn]

Hello! 👋

Looks to me like our filterable Tags component is what you're looking for here, friend.
https://www.carbondesignsystem.com/components/tag/code

[Pablodotnet]

Hello! 👋

Looks to me like our filterable Tags component is what you're looking for here, friend.
https://www.carbondesignsystem.com/components/tag/code

No, I don't mean the single tag element, I'm talking about a complete input field where you write the tag name, press enter and tag will be added, not a tag with an input inside, watch this example:

https://material.angular.io/components/chips/overview

[Pablodotnet]

Here's another example:
Demo: https://angular-mfppay.stackblitz.io/
Repository: https://github.com/Gbuomprisco/ngx-chips

[emyarod]

related https://github.com/carbon-design-system/carbon-components-react/issues/866 https://github.com/carbon-design-system/carbon-components-react/issues/1507

[asudoh]

@Pablodotnet Does either of what @emyarod brought up sound close to what you need? If so let us know and we can merge the issue. Thanks!

[Pablodotnet]

Yeah it's something like that, you can use this design and use the functionality they recommend too on those issues, we personally need it for angular

[asudoh]

OK @Pablodotnet make sure you add thumb-up to the issue description to the closer one - We can use that info to determine the priority. Contributions will be nice as always. Thanks!

[Pablodotnet]

I would like to contribute with this feature for angular components...

[asudoh]

OK definitely open a ticket at https://github.com/IBM/carbon-components-angular for discussion!

[Pablodotnet]

@asudoh I have talked with angular components devs and they say I have to make the component here first, so I would like to contribute with it here.

[asudoh]

I see - Closing this for now given you told us that this is close to #2640 or #2571. Let us know which one it is so we can track the progress - Thanks!

[chrisconnors-ibm]

@Pablodotnet that's awesome! thanks for pitching in. remember there are 5 things required for submissions to make it to our main branch:

1. A Design for the enhancement or component
2. a specification for development
3. a coded component
4. a symbol to add to the sketch library
5. documentation (in gh and the carbon website)

I think 1 and 2 exist, you're pitching in on 3, but make sure we have someone in mind for 4 and 5, since we can't put the code in production as part of our master GA branch without them (this is true for all of our components too).