taga11y — React

The first-party <Taga11yInput> component from taga11y/react, bound to React state (controlled) via value / onChange. Peer dependency: React 19.

Omit value and pass defaultValue for uncontrolled use. Every core event is forwarded (onAdd/onRemove/onClear/onChange/onPaste/onDestroy), and instanceRef exposes the underlying Taga11y instance.

View code

import { useState } from 'react';
import { Taga11yInput } from 'taga11y/react';
import 'taga11y/dist/taga11y.css';

function Example() {
  const [tags, setTags] = useState(['JavaScript']);

  return (
    <Taga11yInput
      id="react-tags"
      value={tags}                       {/* controlled; use defaultValue for uncontrolled */}
      onChange={(values) => setTags(values)}
      suggestions={['JavaScript', 'TypeScript', 'Rust', 'Go', 'Python', 'Elixir']}
      maxTags={5}
    />
  );
}