Components
Textarea
Handle multi-line text inputs.
Usage
Should be something meaningful
<template>
<NXW-Textarea
v-model="value"
label="Message"
placeholder="Type your message here"
hint="Should be something meaningful"
/>
</template>
Props
append-icon
object
|
boolean
Default
false
autocomplete
string
Default
on
color
object
Default
<template>
<NXW-Textarea
:color="{
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',
}"
/>
</template>
counter
boolean
Default
false
disabled
boolean
Default
false
filled
boolean
|
string
Default
true
Example
border-b-2
height
string
Default
min-h-[40px]
hint
string
Default
"" (empty string)
label
string
Default
"" (empty string)
loading
boolean
Default
false
outlined
boolean
|
string
Default
false
Example
border
placeholder
string
Default
"" (empty string)
prepend-icon
object
|
boolean
Default
false
rounded
boolean
|
string
Default
true
Example
rounded-lg
shadow
boolean
|
string
Default
true
Example
shadow-lg
transition
boolean
|
object
Default
true
Example
<template>
<NXW-Textarea
:transition="{
duration: 'duration-300',
ease: 'ease-in-out',
placeholder: {
duration: 'placeholder:duration-500',
ease: 'placeholder:ease-in-out',
},
}"
/>
</template>
width
string
Default
w-full