# v3-tag-input

> This is a simple input field for entering V3 tags. It is written in vue 3 and has no dependencies. It is totally unstyled and can be used in any project. It is highly customizable and can be used in any project.

Latest version **1.0.8** (published 2023-10-27) · 0 weekly downloads

## Install

```sh
npm install v3-tag-input
pnpm add v3-tag-input
yarn add v3-tag-input
bun add v3-tag-input
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.8 |
| Published | 2023-10-27 |
| First published | 2023-09-20 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM |
| Dependencies | 1 |
| Unpacked size | 7.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | atif0075 |
| Keywords | vue3, vue, tag, input, tag input, vue tag input, tag input vue, vue tag, tag vue, tag input, v3 tag, v3 tag input, v3 tag input vue, v3 tag vue, input tags, vue input tags |

## Links

- npm: https://www.npmjs.com/package/v3-tag-input
- Repository: https://github.com/atif0075/v3-tag-input
- Homepage: https://v3-tag-input.vercel.app/
- Issues: https://github.com/atif0075/v3-tag-input/issues
- npm.io page: https://npm.io/package/v3-tag-input

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^3.3.4

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 1.0.8 (latest) — 2023-10-27
- 1.0.7 — 2023-10-27
- 1.0.6 — 2023-10-27
- 1.0.4 — 2023-09-23
- 1.0.3 — 2023-09-22
- 1.0.2 — 2023-09-21
- 1.0.1 — 2023-09-21
- 1.0.0 — 2023-09-20

## README

# V3TagInput

This is a simple input field for entering V3 tags. It is written in vue 3 and has no dependencies. It is totally unstyled and can be used in any project. It is highly customizable and can be used in any project.

## Installation

```bash
npm install v3-tag-input
```

## Import

```javascript
import v3TagInput from "v3-tag-input";
```

## Usage

```vue
<script setup>
import { ref } from "vue";
import v3TagInput from "v3-tag-input";
const tags = ref([]);
</script>

<template>
  <v3TagInput
    placeholder="Add Skills"
    :removeAble="true"
    :allowDuplicates="true"
    :allowEmpty="true"
    @onDuplicate="() => console.log('Duplicate!')"
    @onRemove="() => console.log('Removed!')"
    @getTags="($event) => (tags = $event)"
  />
</template>
```

## Props

| Name            | Type     | Default | Description                                                    |
| --------------- | -------- | ------- | -------------------------------------------------------------- |
| placeholder     | String   | ""      | Placeholder text                                               |
| removeAble      | Boolean  | false   | If true, tags can be removed by clicking on the x              |
| allowDuplicates | Boolean  | false   | If true, duplicate tags can be added                           |
| allowEmpty      | Boolean  | false   | If true, empty tags can be added                               |
| onDuplicate     | Function | null    | Callback function that is called when a duplicate tag is added |
| onRemove        | Function | null    | Callback function that is called when a tag is removed         |
| getTags         | Function | null    | Callback function that is called when tags are changed         |

## Events

| Name        | Description                                                    |
| ----------- | -------------------------------------------------------------- |
| onDuplicate | Callback function that is called when a duplicate tag is added |
| onRemove    | Callback function that is called when a tag is removed         |
| getTags     | Callback function that is called when tags are changed         |

## Styling

The component is totally unstyled. You can style it by using the following classes:

```css
/* .tagInputContainer */
.tagInputContainer {
  padding: 1rem 1rem;
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1.5rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
}

/* .tags */
.tags {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #333;
  background-color: #f3f4f6;
  border-radius: 9999px;
}

/* .tagRemoveIconWrap */
.tagRemoveIconWrap {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem;
  margin-left: 0.5rem;
  font-size: 0.875rem;
  color: #718096;
  background-color: transparent;
  border-radius: 9999px;
  transition: background-color 0.2s, color 0.2s;
  border: none;
}

.tagRemoveIconWrap:hover {
  background-color: #e2e8f0;
  color: #1a202c;
}

/* .tagRemoveIcon */
.tagRemoveIcon {
  width: 0.5rem;
  height: 0.5rem;
}

/* .tagInput */
.tagInput {
  outline: none;
  height: 100%;
  width: auto;
  border: none;
}
```

---
_Source: https://npm.io/package/v3-tag-input · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._