Input - 输入框

更新日期

2026-10-15 UTC

Demo

input/demo.vue

名称

请输入名称。

<script setup lang="ts">
import { ref, useId } from 'vue'

const name = ref('')
const id = useId()
</script>

<template>
  <div class="grid max-w-sm w-full gap-4">
    <label :for="id" class="grid gap-2">
      名称
      <YlfInput :id="id" v-model="name" name="name" autocomplete="name" placeholder="输入名称" />
    </label>
    <YlfInput size="sm" aria-label="紧凑输入" placeholder="紧凑输入" />
    <YlfInput model-value="只读内容" aria-label="只读内容" readonly />
    <YlfInput model-value="暂不可用" aria-label="暂不可用" disabled />
    <div class="grid gap-2">
      <YlfInput invalid aria-label="名称" :aria-describedby="`${id}-error`" />
      <span :id="`${id}-error`" class="text-sm text-[var(--ylf-status-danger-text)]">请输入名称。</span>
    </div>
  </div>
</template>

YlfInput 保留原生输入行为，与 Select 共用一致的表面、圆角和密度。使用可见标签；错误信息通过 aria-describedby 关联到输入框。

Props

属性	说明	类型	默认值
modelValue	文本值（v-model）	string	''
size	控件密度	sm | md	md
invalid	标记输入值无效	boolean	false

id、name、type、required、disabled、readonly、placeholder、autocomplete 等原生属性和 input、blur 等事件直接透传。保留输入法组合事件行为。组件面向文本值；需要数字解析时使用专用数值控件。

默认点击高度至少 44px，紧凑模式 34px，粗指针下增大至 44px。错误状态仍需提供可读的错误说明。