preact-token-input

A text field that tokenizes input, for things like tags.

CodePen Demo

---

Usage Example

Use <TokenInput /> like a normal <input>. It supports the same props/attributes, including value, onInput() and onChange().

importTokenInputfrom'preact-token-input';constTags=({ tags, ...props})=>(<labelclass="tags">
Add some tags:
<TokenInputvalue={tags}{...props}/></form>);lettags=['new','noteworthy','tech'];render(<Tagslist={tags}/>,document.body);

Usage with Linked State

<TokenInput /> works with Linked State exactly the same way as any other input field:

importTokenInputfrom'preact-token-input';classFormextendsComponent{render(props,{ tags }){return(<form><TokenInputvalue={tags}onChange={this.linkState('tags')}/></form>);}}render(<Form/>,document.body);

---

License

MIT