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..."
  />

Visual variants

Themes

primary
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
secondary
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
tertiary
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
quaternary
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

States

success
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
warning
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
error
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
info
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

Sizes

xs
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
small
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
medium
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
large
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

Variants

solid
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
outline
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
glass
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

Rounding

none
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
medium
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
large
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

Shadows

none
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
light
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
strong
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
visual-variants.tsx
// Themes

  const [tags, setTags] = useState(["react", "nextjs"]);
  
  <TagInput theme="primary"
    tags={tags}
    onChange={setTags}
    placeholder="Add a tag..."
  />

  const [tags, setTags] = useState(["react", "nextjs"]);
  
  <TagInput theme="secondary"
    tags={tags}
    onChange={setTags}
    placeholder="Add a tag..."
  />

  const [tags, setTags] = useState(["react", "nextjs"]);
  
  <TagInput theme="tertiary"
    tags={tags}
    onChange={setTags}
    placeholder="Add a tag..."
  />

  const [tags, setTags] = useState(["react", "nextjs"]);
  
  <TagInput theme="quaternary"
    tags={tags}
    onChange={setTags}
    placeholder="Add a tag..."
  />

// States

  const [tags, setTags] = useState(["react", "nextjs"]);
  
  <TagInput state="success"
    tags={tags}
    onChange={setTags}
    placeholder="Add a tag..."
  />

  const [tags, setTags] = useState(["react", "nextjs"]);
  
  <TagInput state="warning"
    tags={tags}
    onChange={setTags}
    placeholder="Add a tag..."
  />

  const [tags, setTags] = useState(["react", "nextjs"]);
  
  <TagInput state="error"
    tags={tags}
    onChange={setTags}
    placeholder="Add a tag..."
  />

  const [tags, setTags] = useState(["react", "nextjs"]);
  
  <TagInput state="info"
    tags={tags}
    onChange={setTags}
    placeholder="Add a tag..."
  />

// Sizes

  const [tags, setTags] = useState(["react", "nextjs"]);
  
  <TagInput size="xs"
    tags={tags}
    onChange={setTags}
    placeholder="Add a tag..."
  />

  const [tags, setTags] = useState(["react", "nextjs"]);
  
  <TagInput size="small"
    tags={tags}
    onChange={setTags}
    placeholder="Add a tag..."
  />

  const [tags, setTags] = useState(["react", "nextjs"]);
  
  <TagInput size="medium"
    tags={tags}
    onChange={setTags}
    placeholder="Add a tag..."
  />

  const [tags, setTags] = useState(["react", "nextjs"]);
  
  <TagInput size="large"
    tags={tags}
    onChange={setTags}
    placeholder="Add a tag..."
  />

// Variants

  const [tags, setTags] = useState(["react", "nextjs"]);
  
  <TagInput variant="solid"
    tags={tags}
    onChange={setTags}
    placeholder="Add a tag..."
  />

  const [tags, setTags] = useState(["react", "nextjs"]);
  
  <TagInput variant="outline"
    tags={tags}
    onChange={setTags}
    placeholder="Add a tag..."
  />

  const [tags, setTags] = useState(["react", "nextjs"]);
  
  <TagInput variant="glass"
    tags={tags}
    onChange={setTags}
    placeholder="Add a tag..."
  />

// Rounding

  const [tags, setTags] = useState(["react", "nextjs"]);
  
  <TagInput rounding="none"
    tags={tags}
    onChange={setTags}
    placeholder="Add a tag..."
  />

  const [tags, setTags] = useState(["react", "nextjs"]);
  
  <TagInput rounding="medium"
    tags={tags}
    onChange={setTags}
    placeholder="Add a tag..."
  />

  const [tags, setTags] = useState(["react", "nextjs"]);
  
  <TagInput rounding="large"
    tags={tags}
    onChange={setTags}
    placeholder="Add a tag..."
  />

// Shadows

  const [tags, setTags] = useState(["react", "nextjs"]);
  
  <TagInput shadow="none"
    tags={tags}
    onChange={setTags}
    placeholder="Add a tag..."
  />

  const [tags, setTags] = useState(["react", "nextjs"]);
  
  <TagInput shadow="light"
    tags={tags}
    onChange={setTags}
    placeholder="Add a tag..."
  />

  const [tags, setTags] = useState(["react", "nextjs"]);
  
  <TagInput shadow="strong"
    tags={tags}
    onChange={setTags}
    placeholder="Add a tag..."
  />

Props API

26 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.
errorMessageReactNodeNoprops—-
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.
helperTextReactNodeNoprops—-
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".