Components
Textfield
Handle single-line inputs.
Usage
<template>
<NXW-Textfield label="Name" placeholder="Type your name here" v-model="modelValue" />
</template>
<script setup lang="ts">
const modelValue = ref('')
</script>
Props
append-icon
boolean
|
object
Default
false
autocomplete
string
Default
on
clearable
boolean
Default
false
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",
"borderError": "border-red-500",
"borderFocusError": "focus:border-red-500"
}
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"
}
hint
string
Default
label
string
Default
Label
loading
boolean
Default
false
outlined
boolean
|
string
Default
border
placeholder
string
Default
prepend-icon
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-Textfield placeholder="Type your name here" v-model="modelValue">
<template #label> Name </template>
</NXW-Textfield>
</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.