Mobile Tokenizer
Lab prototype for trying the touch Tokenizer flow: tap the field to open the manage sheet (review, remove, Clear all, Add item), tap Add item for the stacked search sheet (results above, filter + Done in the bottom row above the keyboard, tap +/check to toggle immediately).
@astryxdesign/lab
Usage
Lab prototype for trying the touch Tokenizer flow: tap the field to open the manage sheet (review, remove, Clear all, Add item), tap Add item for the stacked search sheet (results above, filter + Done in the bottom row above the keyboard, tap +/check to toggle immediately).
- Try this in Lab/canary to validate the flow; graduate via Core Tokenizer presentation="adaptive" when it ships.
- Do not ship stable product on this Lab API; it has no theming, i18n, or spec contract yet.
Typed props
| Prop | Type and behavior |
|---|---|
label | string · requiredField label and sheet heading. |
searchSource | SearchSource<T> · requiredCore Typeahead search source (search + bootstrap). |
value | T[] · requiredSelected items (Core SearchableItem). |
onChange | (items: T[], change: MobileTokenizerChange<T>) => void · requiredMirrors Core Tokenizer: single-item add/create/remove, or reorder. |
placeholder | stringTrigger text when nothing is selected. |
hasCreate | boolean · default falseOffer Create "<query>" for unmatched free text. |
maxEntries | numberCap selections; add rows disable at the cap. |
renderItem | (item: T) => ReactNodeCustom add-sheet row content. |
Anatomy
Trigger field · required
Button showing tokens as a summary, with chevron.
Manage sheet · required
Selected rows with remove, Clear all footer, Add item.
Add sheet · required
Stacked sheet: result rows with +/check toggles, bottom filter + Done row.