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.

Loading component...

Installation

Yarn

yarn add @vlalg-nimbus/nb-inputs

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

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

Mode 1

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

Preview & Playground

Select the component you want to edit/test

Loading Sandbox...

Props

Items with an (*) mean they are required

name	Value type	Default	Description
nbId (*)	String		Sets the id attribute to differentiate from other components
display	String	'b'	Defines the display type. Accepts ib and b.
tabIndex	Number	0	Defines the tab index. Set this property to make the input focusable by the keyboard.
hasTabIndexEnter	Boolean	true	Enables the input to be activated with the Enter key when focused.
ariaLabel	String	'Input Chip'	Defines the aria-label attribute for screen readers.
ariaAttrs	Object	{}	Allows passing custom aria attributes as an object. Keys will automatically receive the `aria-` prefix. Example: `{ 'describedby': 'help-id', 'invalid': 'false' }`
caretColor	String	''	Defines the caret (cursor) color. Accepts Color name and Hex. If empty, uses default browser color.
selectionBgColor	String	''	Defines the background color of selected text. Accepts Color name and Hex. If empty, uses default browser color.
selectionTextColor	String	''	Defines the text color of selected text. Accepts Color name and Hex. If empty, uses default browser color.
width	Number	185	Defines the component width in pixels. Minimum value is 185.
textColor	String	'#ffffff'	Defines the text color. Accepts Color name and Hex
paddingX	Number	0.2	Defines the horizontal padding in rem units.
paddingY	Number	0.2	Defines the vertical padding in rem units.
hasBorderRadius	Boolean	false	Defines if the component should have border-radius.
borderRadius	Number	0.375	Defines border-radius in rem units.
disabled	Boolean	false	Defines if the component is disabled
required	Boolean	false	Defines if the input is required
inputReadonly	Boolean	false	Defines if the input is readonly
inputName	String	''	Sets the name attribute for the input element
inputPlaceholder	String	'Type and press Enter'	Defines the input placeholder text
inputUppercase	Boolean	false	Defines if the input text should be uppercase.
inputAutocomplete	String	'on'	Defines the autocomplete attribute. Accepts on and off.
currentList	Array		Defines the initial list of chips.
allowDuplicates	Boolean	false	Defines if duplicate chips are allowed.
minChips	Number	0	Defines the minimum number of chips allowed.
maxChips	Number	10	Defines the maximum number of chips allowed.
inputPosition	String	'bottom'	Defines the input position. Accepts top and bottom.
textAlign	String	'left'	Defines the text alignment. Accepts left, center, right.
activeTextStyle	String	'normal'	Defines the text style when input is active/focused. Accepts normal, italic, oblique.
theme	String	'light'	Defines the theme. Accepts light and dark.
inputStyle	String	'background'	Defines the input style. Accepts background, line, border.
fontFamily	String	"'Lato', sans-serif"	Defines the font-family
fontSize	String	'1.6em'	Defines the font-size
fontWeight	Number	400	Defines the font-weight
lightBgColor	String	'#f8f8f2'	Defines the background color for light theme
lightBgColorFocus	String	'#eaeaea'	Defines the background color when focused for light theme
lightBorderColor	String	'#353734'	Defines the border color for light theme
lightBorderColorFocus	String	'#272936'	Defines the border color when focused for light theme
lightDisabledBgColor	String	'#dfdfd9'	Defines the disabled background color for light theme
lightTextColor	String	'#000000'	Defines the text color for light theme
lightChipBgColor	String	'#e0e0e0'	Defines the chip background color for light theme
lightChipTextColor	String	'#000000'	Defines the chip text color for light theme
lightChipRemoveColor	String	'#f44336'	Defines the chip remove button color for light theme
lightDisabledBorderColor	String	'rgba(53, 55, 52, 0.3)'	Defines the disabled border color for light theme
darkBgColor	String	'#353734'	Defines the background color for dark theme
darkBgColorFocus	String	'#272936'	Defines the background color when focused for dark theme
darkBorderColor	String	'#44475a'	Defines the border color for dark theme
darkBorderColorFocus	String	'rgba(68, 71, 90, 0.4)'	Defines the border color when focused for dark theme
darkDisabledBgColor	String	'rgba(40, 42, 54, 1)'	Defines the disabled background color for dark theme
darkTextColor	String	'#ffffff'	Defines the text color for dark theme
darkChipBgColor	String	'#44475a'	Defines the chip background color for dark theme
darkChipTextColor	String	'#ffffff'	Defines the chip text color for dark theme
darkChipRemoveColor	String	'#f44336'	Defines the chip remove button color for dark theme
darkDisabledBorderColor	String	'rgba(68, 71, 90, 0.3)'	Defines the disabled border color for dark theme

Events

name	Return type	Description
clicked	nothing	Fired when the component container is clicked.
changed	array	Fired when the chip list changes, returns the current chip list.
removed	string	Fired when a chip is removed, returns the removed chip value.
added	string	Fired when a chip is added, returns the added chip value.
input-changed	string	Fired when the input value changes, returns the current input value.
focused	nothing	Fired when the input receives focus.
blurred	nothing	Fired when the input loses focus.

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>

Nb Inputsnb-input

Nb Loadersnb-loaders