Token / tag input
Comma- or Enter-separated tokens with per-token removal. ArrowLeft from an empty field moves focus to the last token control; ArrowLeft and ArrowRight move between token controls; Backspace or Delete removes the focused token. Validation errors render below the control on Field's error rung with alert role and aria-invalid.
Included in the single kansho full pack. Components are not offered as separate installs.
Tags
Email recipients
Validates RFC-shapeWith cap
maxTokens={3}Component documentation
Token Input
components/inputs/token-input.tsxPurpose
Creates and edits a list of text tokens from a keyboard-driven input.
Appropriate use
Use for tags, recipients, or identifiers that users enter as discrete validated values.
Example
components/inputs/token-input.tsx has a representative live example in the "Tags" section on /components/token-input.
States
Supports empty and populated values, custom separators, validation error, maximum token count, visible-token cap, focused token navigation, and removal.
API and props
TokenInput accepts value, onChange, placeholder, validate, separators, status, maxTokens, maxVisible, id, aria-describedby, aria-invalid, and className.
Dependencies
React, Lucide icons, Field, and the Kansho cn utility.
Accessibility
Names every removal control and overflow summary, supports keyboard token navigation and deletion, and exposes validation errors with role alert.
Limitations
It does not provide asynchronous validation, suggestions, duplicate normalization beyond its local rules, or virtualization.
Source
Source: components/inputs/token-input.tsx.
Full pack
components/inputs/token-input.tsx is documented at /components/token-input and installs only through the single Kansho full pack; no individual component install is offered.