Components
Textfield
Handle single-line inputs.
Usage
Anything besides Vue/Nuxt will be considered wrong :)
<template>
<NXW-Textfield
v-model="value"
label="Favorite framework"
placeholder="Tell us your favorite framework"
hint="Anything besides Vue/Nuxt will be considered wrong :)"
/>
</template>
Props
append-icon
object
|
boolean
Default
false
autocomplete
string
Default
on
clearable
boolean
Default
false
color
object
Default
<template>
<NXW-Textfield
: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',
borderError: 'border-red-500',
borderFocusError: 'focus:border-red-500',
}"
/>
</template>
disabled
boolean
Default
false
filled
boolean
|
string
Default
true
Example
border-b-2
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-Textfield
:transition="{
duration: 'duration-300',
ease: 'ease-in-out',
placeholder: {
duration: 'placeholder:duration-500',
ease: 'placeholder:ease-in-out',
},
}"
/>
</template>
width
string
Default
w-full