タグ入力（TagsInput / PillsInput）ライブラリ比較

'use client';
import { MantineProvider, TagsInput } from '@mantine/core';
import '@mantine/core/styles.css';
import { useState } from 'react';

const suggestions = ['React', 'TypeScript', 'Next.js', 'Tailwind CSS', 'Node.js'];

export function MantineTagsInputDemo() {
  const [value, setValue] = useState<string[]>(['React', 'TypeScript']);

  return (
    <MantineProvider>
      <TagsInput
        label="タグを追加"
        placeholder="Enterキーで追加"
        value={value}
        onChange={setValue}
        data={suggestions}
        clearable
      />
    </MantineProvider>
  );
}

'use client';
import { MantineProvider, PillsInput, Pill, Combobox, useCombobox } from '@mantine/core';
import '@mantine/core/styles.css';
import { useState } from 'react';

const OPTIONS = ['React', 'TypeScript', 'Next.js', 'Tailwind CSS', 'Node.js'];

export function MantinePillsInputDemo() {
  const [selected, setSelected] = useState<string[]>([]);
  const [search, setSearch] = useState('');
  const combobox = useCombobox();

  const filtered = OPTIONS.filter(o => o.toLowerCase().includes(search.toLowerCase()));

  const toggle = (val: string) =>
    setSelected(prev => prev.includes(val) ? prev.filter(v => v !== val) : [...prev, val]);

  return (
    <MantineProvider>
      <Combobox store={combobox} onOptionSubmit={toggle}>
        <Combobox.DropdownTarget>
          <PillsInput onClick={() => combobox.openDropdown()}>
            <Pill.Group>
              {selected.map(s => (
                <Pill key={s} withRemoveButton onRemove={() => toggle(s)}>{s}</Pill>
              ))}
              <Combobox.EventsTarget>
                <PillsInput.Field
                  placeholder="検索..."
                  value={search}
                  onChange={e => { setSearch(e.currentTarget.value); combobox.openDropdown(); }}
                />
              </Combobox.EventsTarget>
            </Pill.Group>
          </PillsInput>
        </Combobox.DropdownTarget>
        <Combobox.Dropdown>
          <Combobox.Options>
            {filtered.map(o => (
              <Combobox.Option key={o} value={o}>
                {selected.includes(o) ? '✓ ' : ''}{o}
              </Combobox.Option>
            ))}
          </Combobox.Options>
        </Combobox.Dropdown>
      </Combobox>
    </MantineProvider>
  );
}

'use client';
import { useState, KeyboardEvent } from 'react';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';

export function ShadcnTagsInputDemo() {
  const [tags, setTags] = useState<string[]>(['React', 'TypeScript']);
  const [input, setInput] = useState('');

  const addTag = (value: string) => {
    const trimmed = value.trim();
    if (trimmed && !tags.includes(trimmed)) {
      setTags([...tags, trimmed]);
    }
    setInput('');
  };

  const removeTag = (tag: string) => setTags(tags.filter(t => t !== tag));

  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter' || e.key === ',') {
      e.preventDefault();
      addTag(input);
    }
    if (e.key === 'Backspace' && input === '' && tags.length > 0) {
      removeTag(tags[tags.length - 1]);
    }
  };

  return (
    <div className="flex flex-wrap gap-2 p-2 border rounded-md min-h-10 items-center">
      {tags.map(tag => (
        <Badge key={tag} variant="secondary" className="gap-1">
          {tag}
          <button onClick={() => removeTag(tag)} className="ml-1 hover:text-destructive">×</button>
        </Badge>
      ))}
      <Input
        className="border-none shadow-none p-0 h-auto flex-1 min-w-20 focus-visible:ring-0"
        value={input}
        onChange={e => setInput(e.target.value)}
        onKeyDown={handleKeyDown}
        onBlur={() => input && addTag(input)}
        placeholder="タグを入力..."
      />
    </div>
  );
}

'use client'
import { useState } from 'react'
import { createSystem, defaultConfig, ChakraProvider, TagsInput } from '@chakra-ui/react'

const system = createSystem(defaultConfig, { globalCss: {}, preflight: false })

export function ChakraTagsInputDemo() {
  const [value, setValue] = useState<string[]>(['React', 'TypeScript'])
  return (
    <ChakraProvider value={system}>
      <TagsInput.Root
        value={value}
        onValueChange={(e) => setValue(e.value)}
        maxW="sm"
      >
        <TagsInput.Label>タグを追加</TagsInput.Label>
        <TagsInput.Control>
          {value.map((tag, i) => (
            <TagsInput.Item key={i} index={i} value={tag}>
              <TagsInput.ItemText>{tag}</TagsInput.ItemText>
              <TagsInput.ItemDeleteTrigger />
            </TagsInput.Item>
          ))}
          <TagsInput.Input placeholder="Enterキーで追加" />
        </TagsInput.Control>
        <TagsInput.ClearTrigger>すべて削除</TagsInput.ClearTrigger>
      </TagsInput.Root>
    </ChakraProvider>
  )
}

'use client';
import { useState, useRef } from 'react';

export function CustomTagsInputDemo() {
  const [tags, setTags] = useState<string[]>(['React', 'TypeScript']);
  const [input, setInput] = useState('');
  const [error, setError] = useState('');
  const inputRef = useRef<HTMLInputElement>(null);

  const addTag = (value: string) => {
    const trimmed = value.trim();
    if (!trimmed) { setError('空のタグは追加できません'); return; }
    if (tags.includes(trimmed)) { setError(`「${trimmed}」はすでに追加されています`); return; }
    setTags(prev => [...prev, trimmed]);
    setInput('');
    setError('');
  };

  const removeTag = (tag: string) => setTags(prev => prev.filter(t => t !== tag));

  return (
    <div className="space-y-2">
      <div
        className="flex flex-wrap gap-2 p-2 border-2 rounded-lg min-h-[48px] cursor-text border-gray-300 focus-within:border-blue-500"
        onClick={() => inputRef.current?.focus()}
      >
        {tags.map(tag => (
          <span key={tag} className="inline-flex items-center gap-1 px-2.5 py-0.5 bg-blue-100 text-blue-800 rounded-full text-sm">
            {tag}
            <button onClick={() => removeTag(tag)} className="w-4 h-4 rounded-full flex items-center justify-center hover:bg-blue-200">×</button>
          </span>
        ))}
        <input
          ref={inputRef}
          value={input}
          onChange={e => { setInput(e.target.value); setError(''); }}
          onKeyDown={e => {
            if (e.key === 'Enter') { e.preventDefault(); addTag(input); }
            if (e.key === 'Backspace' && input === '' && tags.length > 0) removeTag(tags[tags.length - 1]);
          }}
          placeholder={tags.length === 0 ? 'タグを入力してEnter' : ''}
          className="flex-1 min-w-[120px] outline-none bg-transparent text-sm"
        />
      </div>
      {error && <p className="text-xs text-red-500">{error}</p>}
    </div>
  );
}