Function TagInput

src/showcase/components/input/TagInput.tsx:10–111

({ unique = false })

}

const TagInput: React.FC<TagInputProps> = ({ unique = false }) => {
  const [keywords, setKeywords] = useState<string[]>(['ansub', 'syntax'])

  const onKeywordsChange = (newKeywords: string[]) => {
    setKeywords(newKeywords)
    // Additional actions upon keywords change can be handled here
  }
  const [inputValue, setInputValue] = useState<string>('')

  // Handles adding new keyword on Enter or comma press, and keyword removal on Backspace
  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
    if (
      (event.key === 'Enter' || event.key === ',') &&
      inputValue.trim() !== ''
    ) {
      event.preventDefault()
      const newKeyword = inputValue.trim()
      const newKeywords = unique
        ? [...new Set([...keywords, newKeyword])]
        : [...keywords, newKeyword]

      setKeywords(newKeywords)
      onKeywordsChange(newKeywords)
      setInputValue('')
    } else if (event.key === 'Backspace' && inputValue === '') {
      event.preventDefault()
      const newKeywords = keywords.slice(0, -1)
      setKeywords(newKeywords)
      onKeywordsChange(newKeywords)
    }
  }

  // Handles pasting keywords separated by commas, new lines, or tabs
  const handlePaste = (event: React.ClipboardEvent<HTMLInputElement>) => {
    event.preventDefault()
    const paste = event.clipboardData.getData('text')
    const keywordsToAdd = paste
      .split(/[\n\t,]+/)
      .map((keyword) => keyword.trim())
      .filter(Boolean)
    if (keywordsToAdd.length) {
      const newKeywords = unique
        ? [...new Set([...keywords, ...keywordsToAdd])]
        : [...keywords, ...keywordsToAdd]

      setKeywords(newKeywords)
      onKeywordsChange(newKeywords)
      setInputValue('')
    }
  }

  // Updates the inputValue state as the user types
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(event.target.value)
  }
  // Adds the keyword when the input loses focus, if there's a keyword to add
  const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
    if (inputValue.trim() !== '' && event.relatedTarget?.tagName !== 'BUTTON') {