nb-input

This is an input component for Vue.js 3+.

Installation

NbInput masks (input-mask) use vue-the-mask@0.11.1 as a peer dependency (versão fixada pelo nb-inputs; a lib não recebe releases novas). @vlalg-nimbus/magic-debounce (e.g. NbInputSearch) remains a normal dependency of the package and does not require a separate install.

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 NbInput or nb-input.

<template>
  <NbInput />
</template>

<template>
  <nb-input />
</template>

<template>
  <nb-input></nb-input>
</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 inputText prop.

Other props

Events

Slots

The component has slots for custom content:

message

Custom message slot for displaying validation messages or other information.

<template>
  <NbInput
    nb-id="input1"
    input-name="email"
    :show-msg="true"
    :has-msg="true"
    :has-custom-msg="true"
  >
    <template #message>
      <div class="custom-error">Please enter a valid email address</div>
    </template>
  </NbInput>
</template>

eye-icon-show

Custom icon slot for when password is visible (only when inputEyeCustomIcon is true).

<template>
  <NbInput
    nb-id="input1"
    input-name="password"
    input-type="password"
    :show-input-eye="true"
    :input-eye-custom-icon="true"
  >
    <template #eye-icon-show>
      <span>👁️</span>
    </template>
    <template #eye-icon-hidden>
      <span>🙈</span>
    </template>
  </NbInput>
</template>

eye-icon-hidden

Custom icon slot for when password is hidden (only when inputEyeCustomIcon is true).

icon

Custom icon slot for displaying an icon inside the input (only when hasIcon is true).

<template>
  <NbInput
    nb-id="input1"
    input-name="search"
    :has-icon="true"
    icon-direction="left"
    icon-padding="10px 15px"
    :icon-padding-input="40"
    icon-light-bg-color="#353734"
    icon-dark-bg-color="#353734"
  >
    <template #icon>
      <span>🔍</span>
    </template>
  </NbInput>
</template>

Input mask (input-mask)

Masking uses vue-the-mask@0.11.1 as a peer dependency — install it alongside @vlalg-nimbus/nb-inputs (see Installation). The NbInput module imports this package, so your bundler must be able to resolve vue-the-mask whenever you use NbInput, not only when input-mask is set.

Rules

• input-type must be text — input-mask is ignored for number, email, and password.
• In templates, use the kebab-case attribute input-mask, which maps to the inputMask prop.
• With input-mask, the shape of values in changed, current-value, and entered follows input-mask-emit: masked (default), clean, or both ({ masked, clean }). See the prop table and the subsection below.
• Optional input-mask-tokens: merge extra vue-the-mask tokens for patterns the defaults cannot express (e.g. optional leading minus). See Custom mask tokens (input-mask-tokens).
• Pass a string for a fixed pattern, or an array of strings when the mask length should change (e.g. landline vs mobile phone). Avoid Object.freeze() on arrays you pass in — vue-the-mask may sort patterns in place; NbInput already passes a shallow copy of arrays to the directive, but keeping mutable arrays in your code is simpler.

Emit shape with mask (input-mask-emit)

Use the kebab-case attribute input-mask-emit on NbInput when input-mask is set:

Without input-mask, input-mask-emit has no effect.

Pattern tokens (vue-the-mask)

Common placeholders (see the package README for full list):

Literal characters in the pattern (e.g. ., -, (, space after R$) are not special unless you use ! where the library requires it.

Custom mask tokens (input-mask-tokens)

The default tokens (#, X, S, …) cover many cases, but not everything — for example # only matches digits, so a optional leading minus for negative numbers is not expressible with the default set alone.

Use the inputMaskTokens prop (template: input-mask-tokens) to pass an object of extra token definitions. The component shallow-merges it onto vue-the-mask’s default token map: { ...defaultTokens, ...inputMaskTokens }.

Example — signed integer (optional -, then up to three digits): use one custom slot N (minus or digit) and three normal digit slots #:

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

<template>
  <NbInput
    nb-id="signed-int"
    input-name="signed-int"
    input-type="text"
    input-mask="N###"
    :input-mask-tokens="signedIntMaskTokens"
    label="Signed value"
    :show-label="true"
  />
</template>

The same input-mask-tokens API exists on NbInputChip for the chip text field.

Examples

CPF (fixed 11 digits)

<NbInput
  nb-id="doc-cpf"
  input-name="cpf"
  input-type="text"
  input-mask="###.###.###-##"
  label="CPF"
  :show-label="true"
/>

CEP

<NbInput
  nb-id="doc-cep"
  input-name="cep"
  input-type="text"
  input-mask="#####-###"
/>

Brazilian phone (dynamic mask)

<script setup>
const phoneMasks = ['(##) ####-####', '(##) #####-####']
</script>

<template>
  <NbInput
    nb-id="doc-phone"
    input-name="phone"
    input-type="text"
    :input-mask="phoneMasks"
    label="Phone"
    :show-label="true"
  />
</template>

Currency-style display (prefix + growing groups) — still a string in emits; parse before persisting:

<script setup>
const brlMasks = [
  'R$ #,##',
  'R$ ##,##',
  'R$ ###,##',
  'R$ #.###,##',
  'R$ ##.###,##',
  'R$ ###.###,##',
]
</script>

<template>
  <NbInput
    nb-id="doc-money"
    input-name="amount"
    input-type="text"
    :input-mask="brlMasks"
    label="Amount"
    :show-label="true"
  />
</template>

For the same numeric layout with another prefix (e.g. S 1.000,00), use the same group progression with a leading S instead of R$ .

Signed integer with custom token — see Custom mask tokens (input-mask-tokens) above.