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.