React Multitag

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

!Preview


🪄 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([]);

return ;
};

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 |
| 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` |