agustinl / Svelte Tags Input
Licence: other
Svelte tags input is a component to use with Svelte and easily enter tags and customize some options
Stars: ✭ 123
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Svelte Tags Input
bootstrap5-tags
Replace select[multiple] with nices badges for Bootstrap 5
Stars: ✭ 58 (-52.85%)
Mutual labels: tags, input
react-native-element-textinput
A react-native TextInput, TagsInput and AutoComplete component easy to customize for both iOS and Android.
Stars: ✭ 28 (-77.24%)
Mutual labels: tags, input
tag-picker
Better tags input interaction with JavaScript.
Stars: ✭ 27 (-78.05%)
Mutual labels: tags, input
React Selectrix
A beautiful, materialized and flexible React Select control
Stars: ✭ 166 (+34.96%)
Mutual labels: input, tags
Svelte Input Mask
Input masking component for Svelte with simple API and rich customization
Stars: ✭ 56 (-54.47%)
Mutual labels: input, svelte
svelte-search
Accessible, customizable Svelte search component
Stars: ✭ 17 (-86.18%)
Mutual labels: input, svelte
svelte-multiselect
Keyboard-friendly, accessible and highly customizable multi-select component
Stars: ✭ 91 (-26.02%)
Mutual labels: input, svelte
React Tagsinput
Highly customizable React component for inputing tags.
Stars: ✭ 1,241 (+908.94%)
Mutual labels: input, tags
React Categorized Tag Input
React.js component for making tag autocompletion inputs with categorized results.
Stars: ✭ 78 (-36.59%)
Mutual labels: input, tags
Tagify
🔖 lightweight, efficient Tags input component in Vanilla JS / React / Angular / Vue
Stars: ✭ 2,305 (+1773.98%)
Mutual labels: input, tags
Cypress Svelte Unit Test
Unit testing Svelte components in Cypress E2E test runner
Stars: ✭ 110 (-10.57%)
Mutual labels: svelte
Hypertag
Knowledge Management for Humans using Machine Learning & Tags
Stars: ✭ 116 (-5.69%)
Mutual labels: tags
Sapper Firebase Typescript Graphql Tailwindcss Actions Template
A template that includes Sapper for Svelte, Firebase functions and hosting, TypeScript and TypeGraphQL, Tailwind CSS, ESLint, and automatic building and deployment with GitHub Actions
Stars: ✭ 111 (-9.76%)
Mutual labels: svelte
Vime
Customizable, extensible, accessible and framework agnostic media player. Modern alternative to Video.js and Plyr. Supports HTML5, HLS, Dash, YouTube, Vimeo, Dailymotion...
Stars: ✭ 1,928 (+1467.48%)
Mutual labels: svelte
Ttgtagcollectionview
Useful for showing text or custom view tags in a vertical or horizontal scrollable view and support Autolayout at the same time. It is highly customizable that most features of the text tag can be configured. 标签流显示控件,同时支持文字或自定义View
Stars: ✭ 1,626 (+1221.95%)
Mutual labels: tags
svelte-tags-input
Svelte tags input is a component to use with Svelte and easily enter tags and customize some options
Basic REPL Example
Install
npm install svelte-tags-input --save
import Tags from "svelte-tags-input";
<Tags />
Options
Option | Type | Default | Description |
---|---|---|---|
on:tags | Function |
undefined |
To get the values |
addKeys | Array |
ENTER 13 | Set which keys add new values |
removeKeys | Array |
BACKSPACE 8 | Set which keys remove new values |
allowPaste | Boolean |
false |
Enable pasting of a tag or tag group |
allowDrop | Boolean |
false |
Enable drag and drop of a tag or tag group |
splitWith | String |
, | Choose what character split you group of tags Work only if allowDrop or allowPaste are true |
maxTags | Number |
false |
Set maximum number of tags |
onlyUnique | Boolean |
false |
Set the entered tags to be unique |
placeholder | String |
false |
Set a placeholder |
autoComplete |
Array or fn()
|
false |
Set an array of elements to create a auto-complete dropdown |
autoCompleteKey | String |
false |
Set a key to search on autoComplete array of objects |
name | String |
svelte-tags-input |
Set a name attribute |
id | String |
Random Unique ID | Set a id attribute |
allowBlur | Boolean |
false |
Enable add tag when input blur |
disable | Boolean |
false |
Disable input |
minChars | Number |
1 |
Minimum length of search text to show auto-complete list |
A complete list of key codes
Full example
Full REPL Example
import Tags from "svelte-tags-input";
// If on:tags is defined
let tag = "";
function handleTags(event) {
tag = event.detail.tags;
}
const countryList = [
"Afghanistan",
"Albania",
"Algeria",
"American Samoa",
"Andorra",
"Angola",
"Anguilla",
"Antarctica",
"Antigua and Barbuda",
"Argentina"
...
];
<Tags
on:tags={handleTags}
addKeys={[9]} // TAB Key
maxTags={3}
allowPaste={true}
allowDrop={true}
splitWith={"/"}
onlyUnique={true}
removeKeys={[27]} // ESC Key
placeholder={"Svelte Tags Input full example"}
autoComplete={countryList}
name={"custom-name"}
id={"custom-id"}
allowBlur={true}
disable={false} // Just to illustrate. No need to declare it if it's false.
minChars={3}
/>
autoComplete
function
Example with REPL Example
import Tags from "svelte-tags-input";
let tag = "";
function handleTags(event) {
tag = event.detail.tags;
}
const customAutocomplete = async () => {
const list = await fetch('https://restcountries.eu/rest/v2/all?fields=name;flag');
const res = await list.json();
return res;
}
<Tags
on:tags={handleTags}
autoComplete={customAutocomplete}
autoCompleteKey={"name"}
/>
{#each tag as country, index}
<p>{index} - {country.name} </p>
<img src={country.flag} />
{/each}
FAQs
CHANGELOG
License
This project is open source and available under the MIT License.
Author
2021
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].