输入框
用法
使用 v-model
指令来控制输入框的值。
<script setup lang="ts">
const value = ref('')
</script>
<template>
<UInput v-model="value" />
</template>
类型
使用 type
属性来改变输入类型。默认为 text
。
一些类型已在各自的组件中实现,例如 Checkbox、Radio、InputNumber 等,而其他类型则已进行样式化,例如 file
。
<template>
<UInput type="file" />
</template>
占位符
使用 placeholder
属性来设置占位符文本。
<template>
<UInput placeholder="Search..." />
</template>
颜色
使用 color
属性来改变输入框获得焦点时的外环颜色。
<template>
<UInput color="neutral" highlight placeholder="Search..." />
</template>
highlight
属性用于显示焦点状态。当发生验证错误时,它会在内部使用。变体
使用 variant
属性来改变输入框的变体样式。
<template>
<UInput color="neutral" variant="subtle" placeholder="Search..." />
</template>
尺寸
使用 size
属性来改变输入框的尺寸。
<template>
<UInput size="xl" placeholder="Search..." />
</template>
图标
使用 icon
属性在输入框内显示一个图标。
<template>
<UInput icon="i-lucide-search" size="md" variant="outline" placeholder="Search..." />
</template>
使用 leading
和 trailing
属性来设置图标位置,或使用 leading-icon
和 trailing-icon
属性来为每个位置设置不同的图标。
<template>
<UInput trailing-icon="i-lucide-at-sign" placeholder="Enter your email" size="md" />
</template>
头像
使用 avatar
属性在输入框内显示一个头像。

<template>
<UInput
:avatar="{
src: 'https://github.com/nuxt.png'
}"
size="md"
variant="outline"
placeholder="Search..."
/>
</template>
加载中
使用 loading
属性在输入框上显示加载图标。
<template>
<UInput loading placeholder="Search..." />
</template>
加载图标
使用 loading-icon
属性自定义加载图标。默认为 i-lucide-refresh-cw
。
<template>
<UInput loading loading-icon="i-lucide-repeat-2" placeholder="Search..." />
</template>
禁用
使用 disabled
属性来禁用输入框。
<template>
<UInput disabled placeholder="Search..." />
</template>
示例
带清除按钮
您可以在 #trailing
插槽内放置一个Button 来清除输入框。
<script setup lang="ts">
const value = ref('Click to clear')
</script>
<template>
<UInput
v-model="value"
placeholder="Type something..."
:ui="{ trailing: 'pe-1' }"
>
<template v-if="value?.length" #trailing>
<UButton
color="neutral"
variant="link"
size="sm"
icon="i-lucide-circle-x"
aria-label="Clear input"
@click="value = ''"
/>
</template>
</UInput>
</template>
带复制按钮
您可以在 #trailing
插槽内放置一个Button 来将值复制到剪贴板。
<script setup lang="ts">
const value = ref('npx nuxi module add ui')
const copied = ref(false)
function copy() {
navigator.clipboard.writeText(value.value)
copied.value = true
setTimeout(() => {
copied.value = false
}, 2000)
}
</script>
<template>
<UInput
v-model="value"
:ui="{ trailing: 'pr-0.5' }"
>
<template v-if="value?.length" #trailing>
<UTooltip text="Copy to clipboard" :content="{ side: 'right' }">
<UButton
:color="copied ? 'success' : 'neutral'"
variant="link"
size="sm"
:icon="copied ? 'i-lucide-copy-check' : 'i-lucide-copy'"
aria-label="Copy to clipboard"
@click="copy"
/>
</UTooltip>
</template>
</UInput>
</template>
带密码切换按钮
您可以在 #trailing
插槽内放置一个Button 来切换密码可见性。
<script setup lang="ts">
const show = ref(false)
const password = ref('')
</script>
<template>
<UInput
v-model="password"
placeholder="Password"
:type="show ? 'text' : 'password'"
:ui="{ trailing: 'pe-1' }"
>
<template #trailing>
<UButton
color="neutral"
variant="link"
size="sm"
:icon="show ? 'i-lucide-eye-off' : 'i-lucide-eye'"
:aria-label="show ? 'Hide password' : 'Show password'"
:aria-pressed="show"
aria-controls="password"
@click="show = !show"
/>
</template>
</UInput>
</template>
带密码强度指示器
您可以使用 Progress 组件来显示密码强度指示器。
输入密码。必须包含
- 至少 8 个字符 - 未满足要求
- 至少 1 个数字 - 未满足要求
- 至少 1 个小写字母 - 未满足要求
- 至少 1 个大写字母 - 未满足要求
<script setup lang="ts">
const show = ref(false)
const password = ref('')
function checkStrength(str: string) {
const requirements = [
{ regex: /.{8,}/, text: 'At least 8 characters' },
{ regex: /\d/, text: 'At least 1 number' },
{ regex: /[a-z]/, text: 'At least 1 lowercase letter' },
{ regex: /[A-Z]/, text: 'At least 1 uppercase letter' }
]
return requirements.map(req => ({ met: req.regex.test(str), text: req.text }))
}
const strength = computed(() => checkStrength(password.value))
const score = computed(() => strength.value.filter(req => req.met).length)
const color = computed(() => {
if (score.value === 0) return 'neutral'
if (score.value <= 1) return 'error'
if (score.value <= 2) return 'warning'
if (score.value === 3) return 'warning'
return 'success'
})
const text = computed(() => {
if (score.value === 0) return 'Enter a password'
if (score.value <= 2) return 'Weak password'
if (score.value === 3) return 'Medium password'
return 'Strong password'
})
</script>
<template>
<div class="space-y-2">
<UFormField label="Password">
<UInput
v-model="password"
placeholder="Password"
:color="color"
:type="show ? 'text' : 'password'"
:ui="{ trailing: 'pe-1' }"
:aria-invalid="score < 4"
aria-describedby="password-strength"
class="w-full"
>
<template #trailing>
<UButton
color="neutral"
variant="link"
size="sm"
:icon="show ? 'i-lucide-eye-off' : 'i-lucide-eye'"
:aria-label="show ? 'Hide password' : 'Show password'"
:aria-pressed="show"
aria-controls="password"
@click="show = !show"
/>
</template>
</UInput>
</UFormField>
<UProgress
:color="color"
:indicator="text"
:model-value="score"
:max="4"
size="sm"
/>
<p id="password-strength" class="text-sm font-medium">
{{ text }}. Must contain:
</p>
<ul class="space-y-1" aria-label="Password requirements">
<li
v-for="(req, index) in strength"
:key="index"
class="flex items-center gap-0.5"
:class="req.met ? 'text-success' : 'text-muted'"
>
<UIcon :name="req.met ? 'i-lucide-circle-check' : 'i-lucide-circle-x'" class="size-4 shrink-0" />
<span class="text-xs font-light">
{{ req.text }}
<span class="sr-only">
{{ req.met ? ' - Requirement met' : ' - Requirement not met' }}
</span>
</span>
</li>
</ul>
</div>
</template>
带字符限制
您可以使用 #trailing
插槽来为输入框添加字符限制。
<script setup lang="ts">
const value = ref('')
const maxLength = 15
</script>
<template>
<UInput
v-model="value"
:maxlength="maxLength"
aria-describedby="character-count"
:ui="{ trailing: 'pointer-events-none' }"
>
<template #trailing>
<div
id="character-count"
class="text-xs text-muted tabular-nums"
aria-live="polite"
role="status"
>
{{ value?.length }}/{{ maxLength }}
</div>
</template>
</UInput>
</template>
带键盘快捷键
您可以在 #trailing
插槽内使用 Kbd 组件为输入框添加键盘快捷键。
<script setup lang="ts">
const input = useTemplateRef('input')
defineShortcuts({
'/': () => {
input.value?.inputRef?.focus()
}
})
</script>
<template>
<UInput
ref="input"
icon="i-lucide-search"
placeholder="Search..."
>
<template #trailing>
<UKbd value="/" />
</template>
</UInput>
</template>
带浮动标签
您可以使用 #default
插槽为输入框添加浮动标签。
<script setup lang="ts">
const value = ref('')
</script>
<template>
<UInput v-model="value" placeholder="" :ui="{ base: 'peer' }">
<label class="pointer-events-none absolute left-0 -top-2.5 text-highlighted text-xs font-medium px-1.5 transition-all peer-focus:-top-2.5 peer-focus:text-highlighted peer-focus:text-xs peer-focus:font-medium peer-placeholder-shown:text-sm peer-placeholder-shown:text-dimmed peer-placeholder-shown:top-1.5 peer-placeholder-shown:font-normal">
<span class="inline-flex bg-default px-1">Email address</span>
</label>
</UInput>
</template>
在 FormField 中使用
您可以在 FormField 组件中使用 Input 来显示标签、帮助文本、必填标记等。
我们不会分享您的电子邮件。
<script setup lang="ts">
const email = ref('')
</script>
<template>
<UFormField label="Email" help="We won't share your email." required>
<UInput v-model="email" placeholder="Enter your email" icon="i-lucide-at-sign" />
</UFormField>
</template>
在 ButtonGroup 中使用
您可以在 ButtonGroup 组件中使用 Input 来将多个元素分组在一起。
https://
<script setup lang="ts">
const value = ref('')
const domains = ['.com', '.dev', '.org']
const domain = ref(domains[0])
</script>
<template>
<UButtonGroup>
<UInput
v-model="value"
placeholder="nuxt"
:ui="{
base: 'pl-[57px]',
leading: 'pointer-events-none'
}"
>
<template #leading>
<p class="text-sm text-muted">
https://
</p>
</template>
</UInput>
<USelectMenu v-model="domain" :items="domains" />
</UButtonGroup>
</template>
API
属性
属性 | 默认值 | 类型 |
---|---|---|
as |
|
此组件应渲染为何种元素或组件。 |
id |
| |
name |
| |
类型 |
|
|
占位符 |
输入框为空时的占位文本。 | |
颜色 |
|
|
变体 |
|
|
尺寸 |
|
|
required |
| |
autocomplete |
|
|
autofocus |
| |
autofocusDelay |
|
|
disabled |
| |
高亮 |
将外环颜色高亮,如同焦点状态。 | |
icon |
根据 | |
avatar |
在左侧显示头像。
| |
leading |
当为 | |
leadingIcon |
在左侧显示一个图标。 | |
trailing |
当为 | |
trailingIcon |
在右侧显示一个图标。 | |
loading |
当为 | |
loadingIcon |
|
当 |
modelValue |
| |
ui |
|
插槽
插槽 | 类型 |
---|---|
leading |
|
default |
|
trailing |
|
事件
事件 | 类型 |
---|---|
blur |
|
change |
|
update:modelValue |
|
暴露的接口
通过模板引用访问组件时,可以使用以下属性/方法:
名称 | 类型 |
---|---|
inputRef | Ref<HTMLInputElement | null> |
主题
export default defineAppConfig({
ui: {
input: {
slots: {
root: 'relative inline-flex items-center',
base: [
'w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75',
'transition-colors'
],
leading: 'absolute inset-y-0 start-0 flex items-center',
leadingIcon: 'shrink-0 text-dimmed',
leadingAvatar: 'shrink-0',
leadingAvatarSize: '',
trailing: 'absolute inset-y-0 end-0 flex items-center',
trailingIcon: 'shrink-0 text-dimmed'
},
variants: {
buttonGroup: {
horizontal: {
root: 'group',
base: 'group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none'
},
vertical: {
root: 'group',
base: 'group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none'
}
},
size: {
xs: {
base: 'px-2 py-1 text-xs gap-1',
leading: 'ps-2',
trailing: 'pe-2',
leadingIcon: 'size-4',
leadingAvatarSize: '3xs',
trailingIcon: 'size-4'
},
sm: {
base: 'px-2.5 py-1.5 text-xs gap-1.5',
leading: 'ps-2.5',
trailing: 'pe-2.5',
leadingIcon: 'size-4',
leadingAvatarSize: '3xs',
trailingIcon: 'size-4'
},
md: {
base: 'px-2.5 py-1.5 text-sm gap-1.5',
leading: 'ps-2.5',
trailing: 'pe-2.5',
leadingIcon: 'size-5',
leadingAvatarSize: '2xs',
trailingIcon: 'size-5'
},
lg: {
base: 'px-3 py-2 text-sm gap-2',
leading: 'ps-3',
trailing: 'pe-3',
leadingIcon: 'size-5',
leadingAvatarSize: '2xs',
trailingIcon: 'size-5'
},
xl: {
base: 'px-3 py-2 text-base gap-2',
leading: 'ps-3',
trailing: 'pe-3',
leadingIcon: 'size-6',
leadingAvatarSize: 'xs',
trailingIcon: 'size-6'
}
},
variant: {
outline: 'text-highlighted bg-default ring ring-inset ring-accented',
soft: 'text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50',
subtle: 'text-highlighted bg-elevated ring ring-inset ring-accented',
ghost: 'text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent',
none: 'text-highlighted bg-transparent'
},
color: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: ''
},
leading: {
true: ''
},
trailing: {
true: ''
},
loading: {
true: ''
},
highlight: {
true: ''
},
type: {
file: 'file:me-1.5 file:font-medium file:text-muted file:outline-none'
}
},
compoundVariants: [
{
color: 'primary',
variant: [
'outline',
'subtle'
],
class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary'
},
{
color: 'primary',
highlight: true,
class: 'ring ring-inset ring-primary'
},
{
color: 'neutral',
variant: [
'outline',
'subtle'
],
class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted'
},
{
color: 'neutral',
highlight: true,
class: 'ring ring-inset ring-inverted'
},
{
leading: true,
size: 'xs',
class: 'ps-7'
},
{
leading: true,
size: 'sm',
class: 'ps-8'
},
{
leading: true,
size: 'md',
class: 'ps-9'
},
{
leading: true,
size: 'lg',
class: 'ps-10'
},
{
leading: true,
size: 'xl',
class: 'ps-11'
},
{
trailing: true,
size: 'xs',
class: 'pe-7'
},
{
trailing: true,
size: 'sm',
class: 'pe-8'
},
{
trailing: true,
size: 'md',
class: 'pe-9'
},
{
trailing: true,
size: 'lg',
class: 'pe-10'
},
{
trailing: true,
size: 'xl',
class: 'pe-11'
},
{
loading: true,
leading: true,
class: {
leadingIcon: 'animate-spin'
}
},
{
loading: true,
leading: false,
trailing: true,
class: {
trailingIcon: 'animate-spin'
}
}
],
defaultVariants: {
size: 'md',
color: 'primary',
variant: 'outline'
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
input: {
slots: {
root: 'relative inline-flex items-center',
base: [
'w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75',
'transition-colors'
],
leading: 'absolute inset-y-0 start-0 flex items-center',
leadingIcon: 'shrink-0 text-dimmed',
leadingAvatar: 'shrink-0',
leadingAvatarSize: '',
trailing: 'absolute inset-y-0 end-0 flex items-center',
trailingIcon: 'shrink-0 text-dimmed'
},
variants: {
buttonGroup: {
horizontal: {
root: 'group',
base: 'group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none'
},
vertical: {
root: 'group',
base: 'group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none'
}
},
size: {
xs: {
base: 'px-2 py-1 text-xs gap-1',
leading: 'ps-2',
trailing: 'pe-2',
leadingIcon: 'size-4',
leadingAvatarSize: '3xs',
trailingIcon: 'size-4'
},
sm: {
base: 'px-2.5 py-1.5 text-xs gap-1.5',
leading: 'ps-2.5',
trailing: 'pe-2.5',
leadingIcon: 'size-4',
leadingAvatarSize: '3xs',
trailingIcon: 'size-4'
},
md: {
base: 'px-2.5 py-1.5 text-sm gap-1.5',
leading: 'ps-2.5',
trailing: 'pe-2.5',
leadingIcon: 'size-5',
leadingAvatarSize: '2xs',
trailingIcon: 'size-5'
},
lg: {
base: 'px-3 py-2 text-sm gap-2',
leading: 'ps-3',
trailing: 'pe-3',
leadingIcon: 'size-5',
leadingAvatarSize: '2xs',
trailingIcon: 'size-5'
},
xl: {
base: 'px-3 py-2 text-base gap-2',
leading: 'ps-3',
trailing: 'pe-3',
leadingIcon: 'size-6',
leadingAvatarSize: 'xs',
trailingIcon: 'size-6'
}
},
variant: {
outline: 'text-highlighted bg-default ring ring-inset ring-accented',
soft: 'text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50',
subtle: 'text-highlighted bg-elevated ring ring-inset ring-accented',
ghost: 'text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent',
none: 'text-highlighted bg-transparent'
},
color: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: ''
},
leading: {
true: ''
},
trailing: {
true: ''
},
loading: {
true: ''
},
highlight: {
true: ''
},
type: {
file: 'file:me-1.5 file:font-medium file:text-muted file:outline-none'
}
},
compoundVariants: [
{
color: 'primary',
variant: [
'outline',
'subtle'
],
class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary'
},
{
color: 'primary',
highlight: true,
class: 'ring ring-inset ring-primary'
},
{
color: 'neutral',
variant: [
'outline',
'subtle'
],
class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted'
},
{
color: 'neutral',
highlight: true,
class: 'ring ring-inset ring-inverted'
},
{
leading: true,
size: 'xs',
class: 'ps-7'
},
{
leading: true,
size: 'sm',
class: 'ps-8'
},
{
leading: true,
size: 'md',
class: 'ps-9'
},
{
leading: true,
size: 'lg',
class: 'ps-10'
},
{
leading: true,
size: 'xl',
class: 'ps-11'
},
{
trailing: true,
size: 'xs',
class: 'pe-7'
},
{
trailing: true,
size: 'sm',
class: 'pe-8'
},
{
trailing: true,
size: 'md',
class: 'pe-9'
},
{
trailing: true,
size: 'lg',
class: 'pe-10'
},
{
trailing: true,
size: 'xl',
class: 'pe-11'
},
{
loading: true,
leading: true,
class: {
leadingIcon: 'animate-spin'
}
},
{
loading: true,
leading: false,
trailing: true,
class: {
trailingIcon: 'animate-spin'
}
}
],
defaultVariants: {
size: 'md',
color: 'primary',
variant: 'outline'
}
}
}
})
]
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'
export default defineConfig({
plugins: [
vue(),
uiPro({
ui: {
input: {
slots: {
root: 'relative inline-flex items-center',
base: [
'w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75',
'transition-colors'
],
leading: 'absolute inset-y-0 start-0 flex items-center',
leadingIcon: 'shrink-0 text-dimmed',
leadingAvatar: 'shrink-0',
leadingAvatarSize: '',
trailing: 'absolute inset-y-0 end-0 flex items-center',
trailingIcon: 'shrink-0 text-dimmed'
},
variants: {
buttonGroup: {
horizontal: {
root: 'group',
base: 'group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none'
},
vertical: {
root: 'group',
base: 'group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none'
}
},
size: {
xs: {
base: 'px-2 py-1 text-xs gap-1',
leading: 'ps-2',
trailing: 'pe-2',
leadingIcon: 'size-4',
leadingAvatarSize: '3xs',
trailingIcon: 'size-4'
},
sm: {
base: 'px-2.5 py-1.5 text-xs gap-1.5',
leading: 'ps-2.5',
trailing: 'pe-2.5',
leadingIcon: 'size-4',
leadingAvatarSize: '3xs',
trailingIcon: 'size-4'
},
md: {
base: 'px-2.5 py-1.5 text-sm gap-1.5',
leading: 'ps-2.5',
trailing: 'pe-2.5',
leadingIcon: 'size-5',
leadingAvatarSize: '2xs',
trailingIcon: 'size-5'
},
lg: {
base: 'px-3 py-2 text-sm gap-2',
leading: 'ps-3',
trailing: 'pe-3',
leadingIcon: 'size-5',
leadingAvatarSize: '2xs',
trailingIcon: 'size-5'
},
xl: {
base: 'px-3 py-2 text-base gap-2',
leading: 'ps-3',
trailing: 'pe-3',
leadingIcon: 'size-6',
leadingAvatarSize: 'xs',
trailingIcon: 'size-6'
}
},
variant: {
outline: 'text-highlighted bg-default ring ring-inset ring-accented',
soft: 'text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50',
subtle: 'text-highlighted bg-elevated ring ring-inset ring-accented',
ghost: 'text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent',
none: 'text-highlighted bg-transparent'
},
color: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: ''
},
leading: {
true: ''
},
trailing: {
true: ''
},
loading: {
true: ''
},
highlight: {
true: ''
},
type: {
file: 'file:me-1.5 file:font-medium file:text-muted file:outline-none'
}
},
compoundVariants: [
{
color: 'primary',
variant: [
'outline',
'subtle'
],
class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary'
},
{
color: 'primary',
highlight: true,
class: 'ring ring-inset ring-primary'
},
{
color: 'neutral',
variant: [
'outline',
'subtle'
],
class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted'
},
{
color: 'neutral',
highlight: true,
class: 'ring ring-inset ring-inverted'
},
{
leading: true,
size: 'xs',
class: 'ps-7'
},
{
leading: true,
size: 'sm',
class: 'ps-8'
},
{
leading: true,
size: 'md',
class: 'ps-9'
},
{
leading: true,
size: 'lg',
class: 'ps-10'
},
{
leading: true,
size: 'xl',
class: 'ps-11'
},
{
trailing: true,
size: 'xs',
class: 'pe-7'
},
{
trailing: true,
size: 'sm',
class: 'pe-8'
},
{
trailing: true,
size: 'md',
class: 'pe-9'
},
{
trailing: true,
size: 'lg',
class: 'pe-10'
},
{
trailing: true,
size: 'xl',
class: 'pe-11'
},
{
loading: true,
leading: true,
class: {
leadingIcon: 'animate-spin'
}
},
{
loading: true,
leading: false,
trailing: true,
class: {
trailingIcon: 'animate-spin'
}
}
],
defaultVariants: {
size: 'md',
color: 'primary',
variant: 'outline'
}
}
}
})
]
})