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:
- Install the theme as a dependency using npm or yarn:
npm install svelte-tags-input
- Import the theme into your project:
import TagsInput from "svelte-tags-input";
- Use the
<TagsInput> component in your Svelte templates:
<TagsInput {...options} />
- 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
