nb-input
This is an input component for Vue.js 3+.
Loading component...
Installation
Yarn
yarn add @vlalg-nimbus/nb-inputs
Usage
Vue 3
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 NbInput or nb-input.
Mode 1
<template>
<NbInput />
</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 | |
| inputName (*) | String | Sets the name attribute for the input element | |
| 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 | 'Alternate Text Button' | 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' } |
| textColor | String | '#ffffff' | Defines the text color. Accepts Color name and Hex |
| 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. |
| theme | String | 'light' | Defines the theme. Accepts light and dark. |
| hasBorderRadius | Boolean | false | Defines if the input should have border-radius. |
| borderRadius | Number | 0.5 | Defines border-radius. |
| disabled | Boolean | false | Defines if the input is disabled |
| required | Boolean | false | Defines if the input is required |
| inputReadonly | Boolean | false | Defines if the input is readonly |
| inputText | String | '' | Defines the initial input value |
| inputType | String | 'text' | Defines the input type. Accepts text, number, email, password. |
| inputPlaceholder | String | '' | Defines the input placeholder text |
| inputWidth | Number | 200 | Defines the input width in pixels |
| inputStyle | String | 'background' | Defines the input style. Accepts background, line, border. |
| inputUppercase | Boolean | false | Defines if the input text should be uppercase. |
| inputAutocomplete | String | 'on' | Defines the autocomplete attribute. Accepts on and off. |
| hasTrim | Boolean | false | Defines if the input value should be trimmed on blur. |
| showInputEye | Boolean | false | Defines if the password visibility toggle (eye icon) should be shown. Only works with inputType="password". When inputType="password", the default browser password reveal icon is automatically hidden to allow using the custom eye icon. |
| inputEyeIcon | String | '🫣' | Defines the icon shown when password is visible. |
| inputEyeIconHidden | String | '😎' | Defines the icon shown when password is hidden. |
| inputEyeCustomIcon | Boolean | false | Defines if custom icons should be used via slots instead of emoji. |
| activeTextStyle | String | 'normal' | Defines the text style when input is active/focused. Accepts normal, italic, oblique. |
| sizeMediaQuery | String | 'sm' | Defines the responsive size. Accepts xs, sm, md, lg. |
| showMsg | Boolean | false | Defines if the message should be displayed. |
| hasMsg | Boolean | false | Defines if there is a message to show. |
| message | String | 'Default message text' | Defines the message text. |
| hasCustomMsg | Boolean | false | Defines if a custom message slot should be used. |
| textAlign | String | 'left' | Defines the text alignment. Accepts left, center, right. |
| fontFamily | String | "'Lato', sans-serif" | Defines the font-family |
| fontSize | String | '1.6em' | Defines the font-size |
| fontWeight | Number | 400 | Defines the font-weight |
| fontFamilyMsg | String | "'Lato', sans-serif" | Defines the message font-family |
| fontSizeMsg | String | '1em' | Defines the message font-size |
| fontWeightMsg | Number | 400 | Defines the message font-weight |
| textMessageColor | String | '#f15574' | Defines the message text color |
| lightBgColor | String | '#f8f8f2' | Defines the background color for light theme |
| lightBgColorFocus | String | '#eaeaea' | Defines the background color when focused for light theme |
| lightEyeBgColor | String | '#353734' | Defines the eye icon background color for light theme |
| lightEyeBgColorActive | String | '#272936' | Defines the eye icon background color when active for light theme |
| lightDisabledBgColor | String | '#dfdfd9' | Defines the disabled background color for light theme |
| lightTextColor | String | '#000000' | Defines the text 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 |
| darkEyeBgColor | String | '#353734' | Defines the eye icon background color for dark theme |
| darkEyeBgColorActive | String | '#272936' | Defines the eye icon background color when active for dark theme |
| darkDisabledBgColor | String | 'rgba(40, 42, 54, 1)' | Defines the disabled background color for dark theme |
| darkTextColor | String | '#000000' | Defines the text color for dark theme |
| darkDisabledEyeBgColor | String | 'rgba(68, 71, 90, 0.3)' | Defines the disabled eye icon background color for dark theme |
| lightDisabledEyeBgColor | String | 'rgba(53, 55, 52, 0.3)' | Defines the disabled eye icon background color for light theme |
| hasIcon | Boolean | false | Defines if a custom icon should be displayed. When true, shows an icon slot on the left or right side of the input. |
| iconWidth | Number | 32 | Defines the icon width in pixels |
| iconDirection | String | 'left' | Defines the icon position. Accepts left and right. |
| iconPadding | String | '5px 10px' | Defines the icon padding. Must be two space-separated values (e.g., "5px 10px"). |
| iconPaddingInput | Number | 35 | Defines the input padding when icon is present. Adds padding to the side where the icon is positioned. |
| iconMargin | String | '0' | Defines the icon margin |
| iconLightTextColor | String | '#f8f8f2' | Defines the icon text color for light theme |
| iconDarkTextColor | String | '#f8f8f2' | Defines the icon text color for dark theme |
| iconLightBgColor | String | '#353734' | Defines the icon background color for light theme |
| iconLightBgColorActive | String | '#272936' | Defines the icon background color when active for light theme |
| iconDarkBgColor | String | '#353734' | Defines the icon background color for dark theme |
| iconDarkBgColorActive | String | '#272936' | Defines the icon background color when active for dark theme |
| iconDarkDisabledBgColor | String | 'rgba(68, 71, 90, 0.3)' | Defines the disabled icon background color for dark theme |
| iconLightDisabledBgColor | String | 'rgba(53, 55, 52, 0.3)' | Defines the disabled icon background color for light theme |
| iconBorderRadius | Number | 0 | Defines the border-radius for the icon |
| iconSize | Number | 1 | Defines the icon size multiplier |
Events
| name | Return type | Description |
|---|---|---|
| current-value | value | Fired when the input value changes, returns the current value. |
| changed | value | Fired when the input value changes, returns the current value. |
| focused | nothing | Fired when the input receives focus. |
| blurred | nothing | Fired when the input loses focus. |
| show-input-eye | boolean | Fired when the password visibility toggle is clicked, returns the visibility state. |
| clicked | nothing | Fired when the input container is clicked. |
| entered | value | Fired when the Enter key is pressed, returns the current value. |
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>