Tag Input

The Tag Input component allows users to add, remove, and manage tags dynamically, with optional suggestions.

Usage & Examples

Default

Type a tag and press Enter or comma to add. Use arrow keys to navigate suggestions; Enter to select; Escape to close. Backspace removes the last tag when the field is empty.
  • react
  • nextjs
default.tsx

const [tags, setTags] = useState(["react", "nextjs"]);

<TagInput
  tags={tags}
  onChange={setTags}
  placeholder="Add a tag..."
/>

Props API

23 props
Columns
Tag Input props API
Default
Description
aria-describedbystringNoaria—References the ID of an external element that describes the tag input group. Merged with the internal accessibility description/status when provided.
aria-descriptionstringNoaria"Type a tag and press Enter or comma to add. Use arrow keys to navigate suggestions; Enter to select; Escape to close. Backspace removes the last tag when the field is empty."Optional screen reader description for the input behavior. This is announced through an internally rendered description element.
aria-labelstringNoaria"Tag Input"Accessible label for the overall tag input group. Used when no external aria-labelledby is provided. Defaults to "Tag Input".
aria-labelledbystringNoaria—References the ID of an external element that labels the tag input group. Takes precedence over "aria-label" when provided.
data-testidstringNotesting—Backward-compatible alias for test ID attributes.
debounceMsnumberNoprops300Debounce time (ms) for suggestions/autocomplete fetches.
fetchSuggestions((query: string) => Promise<string[]>)Noevents—Optional function to fetch autocomplete suggestions based on input query. Should return a promise resolving to a string array.
glassbooleanNopropsconfigured default glass setting (fallback: false)Adds translucent glass styling to the wrapper, tags, and nested controls.
idBasestringNoprops—Custom ID base for stable accessibility relationships. Can be used to generate predictable ids for label, description, listbox, input, and status elements.
inputAriaDescribedBystringNoprops—References the ID of an external element that describes the text input. Merged with the internal description/status when provided.
inputAriaLabelstringNoprops"Add new tag"Optional accessible label for the text input itself. Defaults to "Add new tag".
inputAriaLabelledBystringNoprops—References the ID of an external element that labels the text input. Takes precedence over inputAriaLabel when provided.