Input Tag

Description

InputTag is a text field for collecting a list of short values (tags, topics, recipients, keywords). You type a value and commit it with Enter or a comma, and it becomes a removable chip. It is built on React Aria's TagGroup, so the chips get keyboard roving, Delete / Backspace removal on a focused chip, and the right ARIA semantics out of the box.

Two layouts share the same logic and state. inline (default) renders the chips inside the field, with the input flowing after them and wrapping onto new rows. outside keeps the field a single line and renders the chips in a group directly below it.

Reach for it when the number of values is open-ended and each value is a short label the user types. For picking from a known set of options, use a multi-select Select. For a single free-text value, use Input.

InputTag is a Create UI Pro component. With a Pro seat, add input-tag installs it into your project.

Installation

pnpm dlx @create-ui/cli add input-tag

Usage

import { InputTag } from "@/components/ui/input-tag"

const [tags, setTags] = React.useState<string[]>([])
 
<InputTag value={tags} onChange={setTags} placeholder="Add a tag..." />

Examples

Inline

Chips render inside the field and the input flows after them, wrapping onto new rows as the list grows. This is the default layout.

Outside

The field stays a single line and the chips render in a group below it. Useful when the field sits in a dense form and you want the current selection summarized underneath.

Autocomplete

Pass options to turn the field into a type-or-pick control. The list opens on focus and narrows as you type, and an option is hidden once it is added as a chip. Pressing Enter selects the exact match, or the top suggestion when there is no exact one, and creates the typed value only when nothing matches. A comma always creates the typed value, and the create footer is the explicit path to add a brand-new tag while suggestions are showing. Set createOnEnter to make Enter always create, and allowsCustomValue={false} for a pick-only control. Each option can carry a leading status dot (badge) and trailing meta.

Sizes

Three sizes: xs, sm, and md (default). The field height, chip size, type scale, and radius all scale together. Inside a Field, the size cascades from the wrapper instead.

Within a Field

Drop InputTag inside a Field to get a label and description. Size, invalid, disabled, and loading state cascade from the Field, so you set them once on the wrapper.

Max tags

max is a soft cap. Tags past the limit still commit, but they render in the error style and the whole field flips to the invalid treatment until the extras are removed. Remove a chip to bring the count back under the limit and the field recovers on its own.

Loading

Set isLoading while tags resolve on the server. The shell takes the busy treatment, a spinner replaces the text input in the same slot, and the chips mute and lose their remove buttons until loading ends.

Accessibility

The chips are a React Aria TagGroup. Give the control an accessible name with aria-label, or wrap it in a Field with a FieldLabel.

• Each chip exposes a remove button labelled for assistive technology.
• The commit keys are configurable with delimiters.

Styling

Data slots: the component sets these for CSS targeting.

• data-slot="input-tag" on the root (the field shell for inline, the column wrapper for outside).
• data-slot="input-tag-group" on the TagGroup, data-slot="input-tag-list" on the TagList.
• data-slot="input-tag-chip" on each chip, with data-slot="chip-label" and data-slot="chip-close" inside. Chips past the max limit also carry data-over-limit.
• data-slot="input-tag-input" on the text input, data-slot="input-tag-spinner" on the loading spinner that replaces it.

API Reference

InputTag

Props

InputTagOption

A bare string in options is shorthand for { value }.