Components
Select
Quickly choose from a list of options.
Usage
<template>
<NXW-Select
v-model="modelValue"
:items="items"
label="Framework"
placeholder="Select a framework"
/>
</template>
<script setup lang="ts">
const modelValue = ref('')
const items = ref(['Vue', 'React', 'Angular'])
</script>
Props
append-icon
object
clearable
boolean
Default
false
color
object
Default
{
"textfield": {},
"bg": "bg-gray-200 dark:bg-zinc-800",
"text": "text-black dark:text-white",
"border": "border-gray-300 dark:border-zinc-700",
"hover": "hover:bg-primary-700"
}
disabled
boolean
Default
false
filled
boolean
|
string
Default
filled
font
object
Default
{
"label": "text-sm",
"input": "text-sm",
"placeholder": "text-sm",
"hint": "text-sm"
}
height
string
Default
max-h-48
items
array
|
array
Default
;[]
label
string
Default
loading
boolean
Default
false
mark-on-focus
boolean
Default
false
outlined
boolean
|
string
Default
border-2
placeholder
string
Default
prepend-icon
object
search
boolean
Default
false
shadow
boolean
|
string
Default
shadow-lg
show-all-on-focus
boolean
Default
false
transition
boolean
|
object
Default
{
"duration": "duration-300",
"ease": "ease-in-out",
"placeholder": {
"duration": "duration-300",
"ease": "ease-in-out"
}
}
width
object
Default
{
"textfield": "w-full",
"select": "w-full"
}
display-property
string
Slots
append-icon (slot)
Custom content for appending an icon to the right side of the input.
item
Customizes the appearance of the items in the dropdown.
label (slot)
Custom content for the label.
<template>
<NXW-Select v-model="modelValue" :items="items" placeholder="Select a framework">
<template #label> Custom Label </template>
</NXW-Select>
</template>
<script setup lang="ts">
const modelValue = ref('')
const items = ref(['Vue', 'React', 'Angular'])
</script>
prepend-icon (slot)
Custom content for prepending an icon to the left side of the input.