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).

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)
• chips: The complete chip list (array)
• removeChip: Function to remove the chip (function)

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

Each chip stores the masked string emitted when the user confirms with Enter (e.g. CPF including dots and hyphen).

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"
  />
</template>

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

const initialCpfs = ref([])

function onCpfAdded({ chip, list }) {
  console.log('New chip:', chip, 'List:', list)
}
</script>

Example — multiple patterns (landline / mobile)

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