TagInput

Text input that converts entered values into removable tag chips. Press Enter to add, Backspace to remove.

Controlled

Keywords

reacttypescript

import { useState } from 'react'
import { TagInput } from '@canarist/ui'

function Example() {
  const [tags, setTags] = useState(['react', 'typescript'])
  return (
    <TagInput
      label="Keywords"
      value={tags}
      onChange={setTags}
      placeholder="Add tag and press Enter"
    />
  )
}

Reference

Prop	Type	Default	Description
value	string[]	—	Array of current tags.
onChange	(tags: string[]) => void	—	Called with the updated tag array.
label	string	—	Label shown above the input.
placeholder	string	—	Placeholder text when no tags are present.
error	string	—	Error message shown below the input.
className	string	—	Additional CSS classes.