Input [Tag]

Overview

Input Tag is a multi-value text entry component that converts typed input into selectable tag chips. Two layout variants display tags inline within the field or stacked beneath it, making it ideal for category selection, filter inputs, and any context where users enter multiple discrete values. Tags render as Chips components, so they inherit the full chip system.

When should you use them?

Use a tag input when a user needs to enter multiple discrete values in one field, such as adding categories, applying filters, inviting people by email, or attaching keywords. It turns each entry into a removable chip, so users can see and manage their selections at a glance.

How should you use them?

• Use a tag input for multiple discrete values, like categories, filters, or recipients.
• Choose Inline layout for compact fields, External when tags need more room to wrap.
• Make each chip removable so users can edit their selections easily.
• Give clear feedback when an entry is a duplicate or invalid.
• Use helper text to explain how to add a tag (for example, 'Press Enter to add').
• Keep chips keyboard-navigable so users can remove tags without a mouse.