Components
Textarea
Handle multi-line text inputs.
Usage
<template>
<NXW-Textarea label="Message" placeholder="Type your message here" v-model="modelValue" />
</template>
<script setup lang="ts">
const modelValue = ref('')
</script>
Props
appendIcon
boolean
|
object
Default
false
autocomplete
string
Default
on
color
object
Default
{
"bg": "bg-gray-200 dark:bg-zinc-800",
"text": "text-black dark:text-white",
"hint": "text-gray-600 dark:text-gray-400",
"error": "text-red-500 dark:text-red-500",
"label": "text-black dark:text-white",
"labelFocus": "peer-focus:text-primary-600",
"placeholderText": "placeholder:text-gray-400 dark:placeholder:text-gray-600",
"icon": "text-black dark:text-white",
"iconFocus": "group-focus-within:text-primary-600",
"border": "border-black dark:border-white",
"borderFocus": "focus:border-primary-800 dark:focus:border-primary-800 focus-within:border-primary-800 dark:focus-within:border-primary-800",
"borderError": "border-red-500",
"borderFocusError": "focus:border-red-500"
}
counter
boolean
Default
false
disabled
boolean
Default
false
filled
boolean
|
string
Default
border-b-2
font
object
Default
{
"label": "text-sm",
"input": "text-sm",
"placeholder": "text-sm",
"hint": "text-sm"
}
height
string
Default
min-h-[40px]
hint
string
Default
label
string
Default
Textarea
loading
boolean
Default
false
outlined
boolean
|
string
Default
border
placeholder
string
Default
prependIcon
boolean
|
object
Default
false
rounded
boolean
|
string
Default
rounded-lg
shadow
boolean
|
string
Default
shadow-lg
transition
boolean
|
object
Default
{
"duration": "duration-300",
"ease": "ease-in-out",
"placeholder": {
"duration": "placeholder:duration-500",
"ease": "placeholder:ease-in-out"
}
}
width
string
Default
w-full
Slots
append-icon (slot)
Custom content for appending an icon to the right side of the input.
label (slot)
Custom content for the label.
<template>
<NXW-Textarea placeholder="Type your message here" v-model="modelValue">
<template #label> Message </template>
</NXW-Textarea>
</template>
<script setup lang="ts">
const modelValue = ref('')
</script>
prepend-icon (slot)
Custom content for prepending an icon to the left side of the input.