nb-textarea

This is a textarea component for Vue.js 3+.

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 NbTextarea or nb-textarea.

Mode 1

<template>
  <NbTextarea />
</template>

Preview & Playground

Select the component you want to edit/test

Loading Sandbox...

Props

Items with an (*) mean they are required

To set initial value, use the inputText prop.

name	Value type	Default	Description
inputText	String	''	Defines the initial textarea value. Accepts String.

Other props

name	Value type	Default	Description
nbId (*)	String		Sets the id attribute to differentiate from other components
inputName (*)	String		Sets the name attribute for the textarea 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 textarea focusable by the keyboard.
hasTabIndexEnter	Boolean	true	Defines if pressing Enter should trigger the entered event.
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' }`
theme	String	'light'	Defines the theme. Accepts light and dark.
disabled	Boolean	false	Defines if the textarea is disabled
required	Boolean	false	Defines if the textarea is required
inputReadonly	Boolean	false	Defines if the textarea is readonly
inputText	String	''	Defines the initial textarea value.
inputPlaceholder	String	''	Defines the placeholder text for the textarea.
hasTrim	Boolean	false	Defines if the textarea value should be trimmed (spaces removed from start and end).
fontFamily	String	"'Lato', sans-serif"	Defines the font-family for the textarea
fontSize	String	null (default: `1.4em`)	Defines the font-size for the textarea. If `null`, uses `1.4em` as default size. Pass a string with the font-size and the unit (e.g., "1.2em").
fontWeight	Number	400	Defines the font-weight for the textarea
textColor	String	'#ffffff'	Defines the text color for the textarea
caretColor	String	''	Defines the caret (cursor) color. If empty, uses theme default.
selectionBgColor	String	''	Defines the background color for selected text. If empty, uses theme default.
selectionTextColor	String	''	Defines the text color for selected text. If empty, uses theme default.
hasBorderRadius	Boolean	false	Defines if the textarea should have border radius
borderRadius	Number	0.5	Defines the border radius in rem units. Only applies if `hasBorderRadius` is `true` and `inputStyle` is not `'line'`.
inputWidth	Number	200	Defines the textarea width in pixels. Only applies when `display` is not `'b'`.
inputStyle	String	'background'	Defines the textarea style. Accepts background, line, and border.
activeTextStyle	String	'normal'	Defines the text style when textarea is active. Accepts normal, italic, and oblique.
inputUppercase	Boolean	false	Defines if the textarea text should be displayed in uppercase
inputAutocomplete	String	'on'	Defines the autocomplete attribute. Accepts on and off.
textAlign	String	'left'	Defines the text alignment. Accepts left, center, and right.
rows	Number	2	Defines the number of visible text lines (height). Must be greater than 0.
cols	Number	20	Defines the visible width in average character widths. Must be greater than 0.
maxlength	Number	null	Defines the maximum number of characters allowed. If `null`, there is no limit.
minlength	Number	null	Defines the minimum number of characters required. If `null`, there is no minimum.
wrap	String	'soft'	Defines how the text should be wrapped. Accepts soft (automatic line breaks, visual only), hard (forced line breaks, included in form submission), and off (no line breaks).
spellcheck	Boolean/String	'default'	Defines if spell checking is enabled. Accepts true, false, or 'default' (browser default).
autofocus	Boolean	false	Defines if the textarea should automatically receive focus when the page loads.
resize	String	'vertical'	Defines how the textarea can be resized. Accepts none (not resizable), both (resizable in both directions), vertical (resizable vertically only), and horizontal (resizable horizontally only).
autoResize	Boolean	false	Defines if the textarea should automatically resize based on content. When enabled, the textarea grows/shrinks with the content.
minRows	Number	null	Defines the minimum number of rows when `autoResize` is enabled. If `null`, uses the `rows` value.
maxRows	Number	null	Defines the maximum number of rows when `autoResize` is enabled. If `null`, there is no limit.
showLabel	Boolean	false	Defines if the label should be displayed
label	String	'Label text'	Defines the label text
labelBackground	String	'transparent'	Defines the background color for the label when active (floating)
labelPadding	String	'1px 5px'	Defines the padding for the label when active (floating)
labelBorderRadius	Number	0	Defines the border radius for the label when active (floating)
labelLeft	Number	5	Defines the left position of the label when inactive (inside textarea)
inputLabelMarginActive	Number	15	Defines the top margin of the textarea when label is active (floating)
labelActiveTop	Number	-13	Defines the top position of the label when active (floating)
labelActiveLeft	Number	-10	Defines the left position of the label when active (floating)
fontFamilyLabel	String	"'Lato', sans-serif"	Defines the font-family for the label
fontSizeLabel	String	'1em'	Defines the font-size for the label when inactive
fontSizeLabelActive	String	'0.8em'	Defines the font-size for the label when active (floating)
fontWeightLabel	Number	400	Defines the font-weight for the label
lightTextColorLabel	String	'#333333'	Defines the text color for the label in light theme
lightTextColorLabelActive	String	'#333333'	Defines the text color for the label when active in light theme
darkTextColorLabel	String	'#ffffff'	Defines the text color for the label in dark theme
darkTextColorLabelActive	String	'#ffffff'	Defines the text color for the label when active in dark theme
lightBgColor	String	'#f8f8f2'	Defines the background color for the textarea in light theme
lightBgColorFocus	String	'#eaeaea'	Defines the background color for the textarea when focused in light theme
lightDisabledBgColor	String	'#dfdfd9'	Defines the background color for the textarea when disabled in light theme
lightTextColor	String	'#000000'	Defines the text color for the textarea in light theme
darkBgColor	String	'#353734'	Defines the background color for the textarea in dark theme
darkBgColorFocus	String	'#272936'	Defines the background color for the textarea when focused in dark theme
darkDisabledBgColor	String	'rgba(40, 42, 54, 1)'	Defines the background color for the textarea when disabled in dark theme
darkTextColor	String	'#000000'	Defines the text color for the textarea in dark theme
fontFamilyMsg	String	"'Lato', sans-serif"	Defines the font-family for the message
fontSizeMsg	String	'1em'	Defines the font-size for the message
fontWeightMsg	Number	400	Defines the font-weight for the message
textMessageColor	String	'#f15574'	Defines the text color for the message
showMsg	Boolean	false	Defines if the message should be displayed
hasMsg	Boolean	false	Defines if there is a message to display
message	String	'Default message text'	Defines the message text
hasCustomMsg	Boolean	false	Defines if the message uses custom styling
tabindex	String/Number	0	Defines the tabindex attribute for the textarea

Events

changed

Fired when the textarea value changes.

Returns: String - The current textarea value

Example:

@changed="onTextareaChanged"

const onTextareaChanged = (value) => {
  console.log('Textarea value:', value)
}

current-value

Fired whenever the textarea value changes (same as changed but with a different name for compatibility). Returns the same format as changed.

Returns: String - The current textarea value

Example:

@current-value="onCurrentValue"

const onCurrentValue = (value) => {
  console.log('Current value:', value)
}

focused

Fired when the textarea receives focus.

Returns: No return value

Example:

@focused="onTextareaFocused"

const onTextareaFocused = () => {
  console.log('Textarea focused')
}

blurred

Fired when the textarea loses focus.

Returns: No return value

Example:

@blurred="onTextareaBlurred"

const onTextareaBlurred = () => {
  console.log('Textarea blurred')
}

clicked

Fired when the textarea or its container is clicked.

Returns: No return value

Example:

@clicked="onTextareaClicked"

const onTextareaClicked = () => {
  console.log('Textarea clicked')
}

entered

Fired when the user presses Enter while the textarea is focused. Only fires if hasTabIndexEnter is true and the textarea is not disabled or readonly.

Returns: The current textarea value (same format as changed)

Example:

@entered="onEnterPressed"

const onEnterPressed = (value) => {
  console.log('Enter pressed with value:', value)
}

Slots

message

Custom slot for the message area. Allows custom HTML/content to be displayed as the message.

Example:

<nb-textarea nb-id="textarea-1" input-name="description">
  <template #message>
    <span>Custom error message</span>
  </template>
</nb-textarea>

Examples

Basic Textarea

<template>
  <NbTextarea
    nb-id="textarea-basic"
    input-name="description"
    @changed="onTextareaChanged"
  />
</template>

<script setup>
const onTextareaChanged = (value) => {
  console.log('Textarea value:', value)
}
</script>

Textarea with Label

<template>
  <NbTextarea
    nb-id="textarea-label"
    input-name="description"
    :show-label="true"
    label="Enter your description"
    @changed="onTextareaChanged"
  />
</template>

<script setup>
const onTextareaChanged = (value) => {
  console.log('Textarea value:', value)
}
</script>

Textarea with Placeholder

<template>
  <NbTextarea
    nb-id="textarea-placeholder"
    input-name="description"
    input-placeholder="Enter your description here..."
    @changed="onTextareaChanged"
  />
</template>

<script setup>
const onTextareaChanged = (value) => {
  console.log('Textarea value:', value)
}
</script>

Textarea with Character Limit

<template>
  <NbTextarea
    nb-id="textarea-limit"
    input-name="description"
    :maxlength="500"
    :minlength="10"
    @changed="onTextareaChanged"
  />
</template>

<script setup>
const onTextareaChanged = (value) => {
  console.log('Textarea value:', value)
}
</script>

Auto-Resizing Textarea

<template>
  <NbTextarea
    nb-id="textarea-autoresize"
    input-name="description"
    :auto-resize="true"
    :min-rows="3"
    :max-rows="10"
    @changed="onTextareaChanged"
  />
</template>

<script setup>
const onTextareaChanged = (value) => {
  console.log('Textarea value:', value)
}
</script>

Textarea with Custom Size

<template>
  <NbTextarea
    nb-id="textarea-size"
    input-name="description"
    :rows="5"
    :cols="50"
    @changed="onTextareaChanged"
  />
</template>

<script setup>
const onTextareaChanged = (value) => {
  console.log('Textarea value:', value)
}
</script>

Textarea with Wrap Options

<template>
  <NbTextarea
    nb-id="textarea-wrap"
    input-name="description"
    wrap="hard"
    @changed="onTextareaChanged"
  />
</template>

<script setup>
const onTextareaChanged = (value) => {
  console.log('Textarea value:', value)
}
</script>

Textarea with Resize Options

<template>
  <NbTextarea
    nb-id="textarea-resize"
    input-name="description"
    resize="both"
    @changed="onTextareaChanged"
  />
</template>

<script setup>
const onTextareaChanged = (value) => {
  console.log('Textarea value:', value)
}
</script>

Dark Theme Textarea

<template>
  <NbTextarea
    nb-id="textarea-dark"
    input-name="description"
    theme="dark"
    :input-width="400"
    @changed="onTextareaChanged"
  />
</template>

<script setup>
const onTextareaChanged = (value) => {
  console.log('Textarea value:', value)
}
</script>

Textarea with Custom Styling

<template>
  <NbTextarea
    nb-id="textarea-custom"
    input-name="description"
    :has-border-radius="true"
    :border-radius="0.8"
    input-style="border"
    :input-width="300"
    text-align="center"
    @changed="onTextareaChanged"
  />
</template>

<script setup>
const onTextareaChanged = (value) => {
  console.log('Textarea value:', value)
}
</script>

Textarea with Message

<template>
  <NbTextarea
    nb-id="textarea-message"
    input-name="description"
    :show-msg="true"
    :has-msg="true"
    message="Please enter a valid description"
    @changed="onTextareaChanged"
  />
</template>

<script setup>
const onTextareaChanged = (value) => {
  console.log('Textarea value:', value)
}
</script>

Readonly Textarea

<template>
  <NbTextarea
    nb-id="textarea-readonly"
    input-name="description"
    :input-readonly="true"
    input-text="This text cannot be edited"
    @changed="onTextareaChanged"
  />
</template>

<script setup>
const onTextareaChanged = (value) => {
  console.log('Textarea value:', value)
}
</script>

Disabled Textarea

<template>
  <NbTextarea
    nb-id="textarea-disabled"
    input-name="description"
    :disabled="true"
    input-text="This textarea is disabled"
    @changed="onTextareaChanged"
  />
</template>

<script setup>
const onTextareaChanged = (value) => {
  console.log('Textarea value:', value)
}
</script>

Textarea with Spellcheck

<template>
  <NbTextarea
    nb-id="textarea-spellcheck"
    input-name="description"
    :spellcheck="true"
    @changed="onTextareaChanged"
  />
</template>

<script setup>
const onTextareaChanged = (value) => {
  console.log('Textarea value:', value)
}
</script>

Textarea with Autofocus

<template>
  <NbTextarea
    nb-id="textarea-autofocus"
    input-name="description"
    :autofocus="true"
    @changed="onTextareaChanged"
  />
</template>

<script setup>
const onTextareaChanged = (value) => {
  console.log('Textarea value:', value)
}
</script>

Nb Inputsnb-input-chip

Nb Inputsnb-date-picker