Tokenizer @astryx-svelte/core v0.3.0 · Tokenizer
Usage
Tokenizer is a multi-select input that lets users search, select, and manage multiple items displayed as removable chips. Use it when users need to build a set of selections from a searchable data source, like adding team members, applying tags, or choosing filters.ts
Best practices
| Guidance | Practices |
|---|---|
| Do | Write a placeholder that tells users what they can search for, such as "Search people..." or "Add tags...", so the input is not a blank mystery. |
| Do | Set maxEntries when the number of selections should be bounded, like limiting a review to 5 approvers. |
| Do | Use hasCreate for free-form tagging where users need to enter values that do not exist in the search source. |
| Do | Show validation status with the status prop so users know immediately when a selection is missing or invalid. |
| Don't | Don't use Tokenizer for single-item selection; use Typeahead instead. Tokenizer is for building sets of two or more items. |
| Don't | Avoid applying custom colors to individual tokens inside a Tokenizer; use the default token style for visual consistency across the set. |
| Don't | Don't hide the label; every Tokenizer needs a visible label so users understand what they are selecting. Use isLabelHidden only when surrounding context makes the purpose obvious. |
| Don't | Wrap a disabled Tokenizer in Tooltip to explain why it is disabled; disabled controls swallow the hover events the wrapper needs. Use the disabledMessage prop instead. |
Examples
Common configurations, variations, and states.Tokenizer — Clear
Tokenizer with a built-in clear-all button for bulk removal of all selected tokens.
Tokenizer — Creatable
Free-text tokenizer for creating custom tags and a combined create-or-search pattern. Use when users need to enter values that may not exist in a predefined list.
Tokenizer — End Content
Tokenizer with an action button in the end slot. Use for inline actions like applying selections alongside the input.
Tokenizer — Icon
Tokenizer with a leading search icon to visually reinforce the search behavior.
Tokenizer — Max Entries
Tokenizer with a maximum selection limit. The input hides automatically when the limit is reached, preventing further additions.
Tokenizer — Overflow
Tokenizer with overflow truncation when unfocused. Inline mode pushes content down on expand; layer mode overlays without shifting layout.
Tokenizer — States
Tokenizer in disabled, error, warning, and success states. Use to communicate validation feedback or lock a selection from editing.