Svelte Tags Input

screenshot of Svelte Tags Input
svelte

Svelte Tags Input

Fully customizable Svelte component to enter tags

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
  1. Import the theme into your project:
import TagsInput from "svelte-tags-input";
  1. Use the <TagsInput> component in your Svelte templates:
<TagsInput {...options} />
  1. 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

svelte
Svelte

Svelte is a modern front-end framework that compiles your code at build time, resulting in smaller and faster applications. It uses a reactive approach to update the DOM, allowing for high performance and a smoother user experience.

rollup
Rollup

RollupJS is a popular and efficient JavaScript module bundler that takes the code from multiple modules and packages them into a single optimized file, minimizing the overall size of the application and improving its performance.