When you’re building an app, there’s a class of inputs that never quite fit in a single text field: tags, skills, email recipients, ingredients, keywords, categories… anything where the user is really creating a list of small values.

That’s what Ionic 2 Tags Input is for: a small Ionic 2 component that turns “type + add” into a familiar chip/tag UI, where users can quickly add items and remove them just as easily.

Ionic 2 Tags Input — example

What it solves

You can drop it into any screen where you’d otherwise be tempted to:

  • ask users to separate values with commas (they won’t),
  • validate a free-form blob of text (it gets messy fast),
  • or build a custom “tag editor” UI from scratch.

Typical use cases:

  • Selecting multiple interests / skills / technologies
  • Adding tags to a note, task, or article
  • Entering multiple emails or usernames
  • Building quick filters (e.g. “show results for these categories”)

Why it’s handy

Besides giving you the UI, it also takes care of the little details that make these inputs feel “done”:

  • You can set a maximum number of tags.
  • You can enforce a maximum tag length (helpful for constraints like usernames).
  • You can choose whether to allow duplicates.
  • You get events when a tag is added/removed (useful for analytics, validation, or side effects).
  • It works with both Reactive Forms and ngModel, so it fits into most Ionic 2 codebases.

Where to get it

Customization highlights

You can customize labels, placeholders, and behavior. A few useful knobs:

  • maxTags — limit how many tags the user can add
  • maxWordLength — prevent unreasonably long values
  • allowDuplicates — allow or block duplicates
  • onTagAdded / onTagRemoved — react when values change

If you need the full list of inputs/outputs and default labels, the README in the repository has the complete reference.