Overview

This document is a product analysis of a REPL example with options for a Svelte Tags Input theme. The theme allows users to create tags using an input field, and provides various customization options.

Features

• bind:tags: To get the values
• addKeys: Set which keys add new values
• removeKeys: Set which keys remove new values
• allowPaste: Enable pasting of a tag or tag group
• allowDrop: Enable drag and drop of a tag or tag group
• splitWith: Choose what character split you group of tags (Work only if allowDrop or allowPaste are true)
• maxTags: Set maximum number of tags
• onlyUnique: Set the entered tags to be unique
• placeholder: Set a placeholder
• autoComplete: Set an array of elements to create an auto-complete dropdown or a function
• autoCompleteKey: Set a key to search on auto-complete array of objects
• autoCompleteFilter: If false, disable auto-complete filter and return endpoint response without filter
• onlyAutocomplete: Only accept tags inside the auto-complete list
• name: Set a name attribute
• id: Set an ID attribute
• allowBlur: Enable add tag when input blur
• disable: Disable input
• minChars: Minimum length of search text to show auto-complete list. If 0, auto-complete list shows all results when clicked on input.
• labelText: Custom text for input label
• labelShow: If true, the label will be visible
• readonly: If true, the input shows in display mode
• onTagClick: A function to fire when a tag is clicked
• autoCompleteShowKey: A key string to show a different value from the auto-complete list object returned

Installation

To install the Svelte Tags Input theme, you can follow these steps:

1. Install the theme as a dependency using npm or yarn:

npm install svelte-tags-input

2. Import the theme into your project:

import TagsInput from "svelte-tags-input";

3. Use the <TagsInput> component in your Svelte templates:

<TagsInput {...options} />

4. Customize the options object according to your needs. You can refer to the features list above for available options.

Summary

The Svelte Tags Input theme is a customizable input field that allows users to create tags. It provides a variety of options for customization, including setting maximum number of tags, enabling auto-complete, and disabling certain functionalities. The theme is open source and available under the MIT License.

Author: @agustinl2023