Astryx Design System

Tokenizer@astryxdesign/core v0.0.15 · 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
import {Tokenizer} from '@astryxdesign/core/Tokenizer'

Best practices

Guidance	Practices
Do	Write a placeholder that tells users what they can search for — "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.

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.

Usage

import {Tokenizer} from '@astryxdesign/core/Tokenizer'

Best practices

Guidance	Practices
Do	Write a placeholder that tells users what they can search for — "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.