Basic Tagify

Enable tagging functionality by initializing Tagify on an input field. This allows users to enter multiple tags with auto-suggestion support.

Tagify With Custom Dropdown

Enhance user experience by enabling Tagify with custom suggestions, allowing predefined tag recommendations as users type.

Readonly Tagify Mixed

Use Tagify to display a combination of editable and read-only tags. Read-only tags can't be removed or edited by users.

Render suggestions list manually

Use Tagify with a custom dropdown to show dynamic suggestions based on input. This enhances user experience by filtering tags as they type.

Disabled user input

Use Tagify with user input disabled to allow selection only from predefined tag suggestions. This helps maintain data consistency and prevents custom entries.

Tagify With Select Mode

Use Tagify in select mode to let users choose from predefined tags using a dropdown-style input. Ideal for tagging systems or multi-select inputs.

Tagify With mix

Enable Tagify in mix mode to combine free text with inline tags (users, hashtags, etc.) inside a single input. This is ideal for chat messages, comments, or mentions.

users-list

Use Tagify to create an email or user list input field that allows users to enter multiple entries as tags. Useful for contact lists, mentions, or multi-recipient fields.

RTL & Uncapped Dropdown Width

Use Tagify with right-to-left (RTL) text direction and uncapped dropdown width to support languages like Hebrew or Arabic. This ensures proper alignment and full visibility of long tag suggestions.

Outside Of The Box

Enhance Tagify functionality by placing the tag input outside the component's default layout, allowing greater flexibility in UI design and better alignment with custom interfaces.

Advance Options

Utilize Tagify with advanced configuration options such as input validation patterns, custom tag data, and dynamic behavior to meet complex tagging requirements and improve user experience.

disabled

Use the disabled attribute on a Tagify input to make it read-only, preventing users from editing or adding tags while maintaining a clear display of existing tag values.

Theme Customization
Layout:
Vertical
Horizontal
Semi Box
Content Width:
Default
Box
Layout Direction:
LTR
RTL
Layout Mode:
Light
Dark
System
Sidebar Size:
Default
Medium
Icon
Icon hover