React Multitag

A simple and lightweight tag list input component with advanced keyboard navigation.

🪄 Features

• Navigate and delete elements using the keyboard
• Automatically add items with keyboard input and support for custom keybinds
• Add custom tag elements with props for delete actions and selection styling

✏️ Example code

import React, { useState } from "react";
import { Taglist } from "react-multitag";

const Example = () => {
  const [tags, setTags] = useState<string[]>([]);

  return <Taglist value={tags} onChange={setTags} />;
};

export default Example;

⚙️ Props

This extends all default HTML input props (which control the text input element) | Prop | Description | Type | | ------------------- | ------------------------------------------------------------------------------- | ------------------------- | | navigationMode | How the keyboard navigation should behave: tags (default): Navigate through tags and delete with 'Backspace'input: Move the input position to add new elements between existing ones | "tag" or "input" | | value | Current tag list | string[] | | onChange | Callback with new tag list | (tags: string[]) => void| | TagComponent (optional) | Custom component for the tag element (implementing the TagProps interface) | ComponentType<TagProps> | | separators (optional) | List of keys triggering tag to be added (defaults to 'Enter' & ',') | string[] | | containerClassName (optional) | Custom classname for the wrapping container (div) | string | | inputClassName (optional) | Custom classname for the input | string | | onDuplicate (optional) | Callback when a duplicate value is entered (with the duplicate value) | (tag: string) => void |