Components
Select
Quickly choose from a list of options.
Usage
<template>
<NXW-Select
v-model="value"
label="Framework"
placeholder="Select a framework"
filled
search
mark-on-focus
/>
</template>
Props
append-icon
object
|
boolean
Default
false
clearable
boolean
Default
false
color
object
Default
<template>
<NXW-Select
:color="{
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',
}"
/>
</template>
disabled
boolean
Default
false
filled
boolean
|
string
Default
false
Example
border-b-2
height
string
Default
max-h-48
items
array
required
Default
<template>
<NXW-Select :items="[]" />
</template>
Example
<template>
<NXW-Select :items="['Vue', 'React', 'Angular']" />
</template>
label
string
loading
boolean
Default
false
mark-on-focus
boolean
Default
false
outlined
boolean
|
string
Default
false
Example
border
placeholder
string
prepend-icon
object
|
boolean
Default
false
search
boolean
Default
false
shadow
boolean
|
string
Default
false
Example
shadow-lg
show-all-on-focus
boolean
Default
false
transition
boolean
|
object
Default
true
Example
<template>
<NXW-Select
:transition="{
duration: 'duration-300',
ease: 'ease-in-out',
placeholder: {
duration: 'placeholder:duration-500',
ease: 'placeholder:ease-in-out',
},
}"
/>
</template>
width
object
Default
<template>
<NXW-Select :width="{ textfield: 'w-full', select: 'w-full' }" />
</template>