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.
• changed and current-value emit the masked string (e.g. "123.456.789-00" for CPF). To send a normalized value to an API (digits only, cents, etc.), parse in your app.
• 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.

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.

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