Form Advanced
Basic Tagify
The Basic Tagify example shows how to use Tagify to add and manage tags in an input field. You can configure it with options like maxTags, placeholder, and delimiters.
Tagify With Read Only
The Tagify With Read Only example shows how to display tags in a read-only mode, where users can't add or remove tags. This can be configured by setting the readonly option to true.
Tagify With Item Limits
The Tagify With Item Limits example shows how to restrict the number of tags a user can add. You can configure the maximum limit using the maxTags option.
Tagify With Single Select
The Tagify With Single Select example allows the user to select only one tag from the list. It is configured using the maxTags: 1 option to enforce single selection.
Tagify With mix
The Tagify With Mix example allows a combination of both single and multi-select tags. This lets users add a mix of single tags and multiple tags within the same input field.
users-list
The Users List example displays a list of users with their names, roles, and other information. It can be customized to show different user data or allow interactions like searching or filtering.
users-list
The Tagify field is placed inside a container with dir="rtl", ensuring right-to-left text direction. The Tagify dropdown is also configured for RTL display for proper alignment.
Select by class
The Dual Listbox package creates a user-friendly dual-selection interface.
It allows moving items between two lists with buttons like Add, Remove, and Add All.
Use config options to customize button labels and functionality.
Add options and add eventListeners
The Dual Listbox package provides an easy way to move items between two lists.
You can customize titles, button labels, and add a search feature using options like
availableTitle, selectedTitle, searchPlaceholder, and more.
Clipboard on Change Icon
Click the Copy button to copy the text inside the input field. After copying, the icon changes to a checkmark () and resets after a few seconds. Uses navigator.clipboard for seamless copying.
Clipboard on Text Input
Easily cut or copy text from the input field using the Copy and Cut buttons. The Copy button duplicates the text, while the Cut button removes it after copying. Uses navigator.clipboard for seamless functionality.
Cut/copy from textarea
Use the Copy button to duplicate text and the Cut button to remove and copy text from the textarea. Works smoothly with navigator.clipboard.
Default Touchspin
Create a number input with increment and decrement buttons using .qty-input. Each button uses data-action="plus" or data-action="minus" to increase or decrease the value within the defined min and max limits. Clicking the buttons updates the input field dynamically.
Outlined Touchspin
Use .qty-input-outline to create an outlined number input spinner. Click the plus or minus buttons to increase or decrease the value within the set range.
Rounded Touchspin
Use .qty-input-rounded to create a rounded number input spinner. Click the plus or minus buttons to adjust the value within the allowed range.