Skip to content

Tokenizer

Overview

The Tokenizer component helps process and manage multiple values simultaneously in an input field. Each item is separated into individual "tokens" and managed as a collection whenever the user enters a value. It is useful in situations where multiple values need to be entered and managed at once, such as email address input, tag input, and recipient list management.

Key Features

1. Custom Renderer

You can render each item in the suggestion list in any desired form. You can freely combine text, images, buttons, etc. to express items.

View Related Items

2. Suggestion List State Handling

Improves user experience by visually displaying the state when the recommendation list is loading or when there is no data.

View Related Items

3. Suggestion List Configuration

You can customize the logic for constructing recommendation lists related to entered text to apply various recommendation criteria (e.g., API calls, local data filtering, etc.).

View Related Items

4. Label and Placeholder

Set label and placeholder in the input field to clearly guide users about the input purpose and format.

View Related Items

5. Minimum Character Specification

You can set how many characters need to be entered before recommendations start to prevent unnecessary suggestions from appearing when users enter very short words.

View Related Items
Minimum characters
2
Please enter at least 2 characters.

6. Suggestion List Container Control

Provides automatic and manual closing functionality for the recommendation list container to help users conveniently manage the recommendation list.

View Related Items

7. Token Creation and Deletion

Tokens are created based on values entered by users or selected from the suggestion list, and the created tokens are managed as a collection. Additionally, it provides functionality to delete individual tokens or initialize all tokens as needed.

View Related Items

Released under the MIT License.