nb-input-chip

This is an input chip component for Vue.js 3+. It allows users to add and remove chips (tags) by typing and pressing Enter.

Installation

NbInputChip masks (input-mask) use the same peer dependency as NbInput: vue-the-mask@0.11.1. Tokens and behaviour are documented under Input mask (input-mask). Custom tokens (input-mask-tokens) are the same as on NbInput — see Custom mask tokens (input-mask-tokens).

yarn add @vlalg-nimbus/nb-inputs vue-the-mask@0.11.1

npm install @vlalg-nimbus/nb-inputs vue-the-mask@0.11.1

Usage

import { createApp } from 'vue'
import App from './App.vue'

import NbInputComponents from '@vlalg-nimbus/nb-inputs'
import "@vlalg-nimbus/nb-inputs/dist/style.css";

const app = createApp(App)
app.use(NbInputComponents)
app.mount('#app')

import NbInputComponents from '@vlalg-nimbus/nb-inputs'
import "@vlalg-nimbus/nb-inputs/dist/style.css";

export default defineNuxtPlugin(context => {
  context.vueApp.use(NbInputComponents)
})

To use, simply call the component, in this case it will be NbInputChip or nb-input-chip.

<template>
  <NbInputChip nb-id="chip1" input-name="tags" />
</template>

<template>
  <nb-input-chip nb-id="chip1" input-name="tags" />
</template>

<template>
  <nb-input-chip nb-id="chip1" input-name="tags"></nb-input-chip>
</template>

Preview & Playground

Select the component you want to edit/test

Props

Items with an (*) mean they are required

To set initial value, use the currentList prop.

Other props

Events

Slots

The component has slots for custom content:

chip

Custom chip slot for displaying custom chip content. The slot receives the following props:

• chip: The chip value (string)
• index: Position of this chip in the list (number) — use with removeChip so duplicates (allow-duplicates) remove only the clicked item
• chips: The complete chip list (array)
• removeChip: (index: number) => void — removes the chip at that index

<template>
  <NbInputChip
    nb-id="chip1"
    input-name="tags"
  >
    <template #chip="{ chip, index, removeChip }">
      <span class="chip-text">{{ chip }}</span>
      <span class="chip-remove" @click="removeChip(index)">×</span>
    </template>
  </NbInputChip>
</template>

Input mask (input-mask)

The chip text field is always type="text". Use input-mask (kebab-case) for the same vue-the-mask@0.11.1 patterns as NbInput: string for a fixed pattern, or an array when length varies. Install the peer dependency (see Installation). Full rules, tokens, and more examples: Input mask (input-mask).

Chips in the UI store the masked string when the user confirms with Enter. added / removed use the same input-mask-emit rules as NbInput for chip and list (masked, clean, or both). added-complete / removed-complete always use { masked, clean } per chip — sync current-list from *-complete.list mapped to .masked when the parent drives the list.

input-mask-tokens (prop inputMaskTokens) is supported on NbInputChip as well: use it when you need custom vue-the-mask tokens (merged with the library defaults). Full explanation, merge rules, and the signed-integer example pattern are in NbInput — Custom mask tokens (input-mask-tokens).

Example — CPF per chip

<template>
  <NbInputChip
    nb-id="chip-cpf"
    input-name="cpf-tags"
    input-mask="###.###.###-##"
    input-placeholder="CPF, then Enter"
    :current-list="initialCpfs"
    @added="onCpfAdded"
    @added-complete="onCpfAddedComplete"
  />
</template>

<script setup>
import { ref } from 'vue'

const initialCpfs = ref([])

function onCpfAdded({ chip, list }) {
  console.log('API (no mask):', chip, list)
}

function onCpfAddedComplete({ list }) {
  initialCpfs.value = list.map(p => p.masked)
}
</script>

Example — multiple patterns (landline / mobile)

<NbInputChip
  nb-id="chip-phone"
  input-name="phones"
  :input-mask="['(##) ####-####', '(##) #####-####']"
  input-placeholder="Phone, then Enter"
/>

Example — signed integer per chip (custom token)

Same token definition as NbInput: mask N### with N = minus or digit, then three digits.

<script setup>
const signedIntMaskTokens = {
  N: { pattern: /[-0-9]/ },
}
</script>

<template>
  <NbInputChip
    nb-id="chip-signed-int"
    input-name="signed-ints"
    input-mask="N###"
    :input-mask-tokens="signedIntMaskTokens"
    input-placeholder="-42 then Enter"
  />
</template>