XDS — Design System

Tokenizer@xds/core v0.0.13 · XDSTokenizer

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 {XDSTokenizer} from '@xds/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 \u2014 Clear

Tokenizer with a built-in clear-all button for bulk removal of all selected tokens.

Tokenizer \u2014 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 \u2014 End Content

Tokenizer with an action button in the end slot. Use for inline actions like applying selections alongside the input.

Tokenizer \u2014 Icon

Tokenizer with a leading search icon to visually reinforce the search behavior.

Tokenizer \u2014 Max Entries

Tokenizer with a maximum selection limit. The input hides automatically when the limit is reached, preventing further additions.

Tokenizer \u2014 Overflow

Tokenizer with overflow truncation when unfocused. Inline mode pushes content down on expand; layer mode overlays without shifting layout.

Tokenizer \u2014 States

Tokenizer in disabled, error, warning, and success states. Use to communicate validation feedback or lock a selection from editing.

Usage

import {XDSTokenizer} from '@xds/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.