Input 输入框
新粗野主义风格的文本输入框，支持变体、尺寸和 v-model 双向绑定。
预览
变体
尺寸
状态
图标与装饰
辅助能力
v-model 绑定
值：
冲压凹槽形态（inset）
安装
pnpm dlx brutx-vue@latest add input用法
<script setup>
import { ref } from 'vue'
import { Input } from 'brutx-ui-vue'
const value = ref('')
</script>
<template>
<Input v-model="value" placeholder="Enter your name..." />
</template>搭配 Label
<script setup>
import { ref } from 'vue'
import { Input, Label } from 'brutx-ui-vue'
const email = ref('')
</script>
<template>
<div class="space-y-2">
<Label for="email">Email</Label>
<Input id="email" v-model="email" type="email" placeholder="you@example.com" />
</div>
</template>禁用状态
<script setup>
import { Input } from 'brutx-ui-vue'
</script>
<template>
<Input disabled placeholder="Disabled input" />
</template>只读状态
通过 readonly 属性设置只读输入框。只读状态下输入框不可编辑但可聚焦选择文本，光标样式为 cursor-default，不会降低透明度（区别于 disabled）。
<script setup>
import { ref } from 'vue'
import { Input } from 'brutx-ui-vue'
const value = ref('只读内容，可选中复制但不可编辑')
</script>
<template>
<Input v-model="value" readonly />
</template>错误消息
通过 variant="error" 和 errorMessage 属性显示错误消息。错误消息使用 role="alert" 确保屏幕阅读器自动播报。
<script setup>
import { ref } from 'vue'
import { Input } from 'brutx-ui-vue'
const email = ref('')
</script>
<template>
<Input
v-model="email"
type="email"
variant="error"
error-message="请输入有效的邮箱地址"
placeholder="you@example.com"
/>
</template>可清除
设置 clearable 属性后，鼠标悬停时会显示清除按钮。
<script setup>
import { ref } from 'vue'
import { Input } from 'brutx-ui-vue'
const value = ref('点击清除')
</script>
<template>
<Input v-model="value" clearable @clear="value = ''" />
</template>密码切换
设置 show-password 属性后，密码输入框会显示可见性切换按钮。
<script setup>
import { ref } from 'vue'
import { Input } from 'brutx-ui-vue'
const password = ref('')
</script>
<template>
<Input v-model="password" type="password" show-password placeholder="请输入密码" />
</template>字数统计
同时设置 show-word-limit 和 maxlength 属性后，会显示字数统计。
<script setup>
import { ref } from 'vue'
import { Input } from 'brutx-ui-vue'
const value = ref('')
</script>
<template>
<Input v-model="value" maxlength="100" show-word-limit placeholder="最多 100 个字符" />
</template>图标与前后缀
优先使用 Input 自身的 prefixIcon、suffixIcon props 和 prepend、append 插槽来实现输入框装饰。
<script setup>
import { ref } from 'vue'
import { Input } from 'brutx-ui-vue'
import { Search } from '@lucide/vue'
const url = ref('')
</script>
<template>
<Input :prefix-icon="Search" placeholder="搜索项目" />
<Input v-model="url" placeholder="请输入网址">
<template #prepend>https://</template>
<template #append>.com</template>
</Input>
</template>变体
| 变体 | 说明 |
|---|---|
default | 标准边框，悬浮上浮 + 盖影按压，聚焦时阴影放大 |
error | 错误边框，聚焦时使用 Primary 阴影 |
success | 成功边框，聚焦时使用 Secondary 阴影 |
inset | 冲压凹槽：静态内嵌形态（内嵌阴影），刻意无悬浮/按压/聚焦上浮反馈——凹槽的物理语义是「沉入外壳」 |
<template>
<Input v-model="value" variant="inset" placeholder="冲压凹槽形态" />
</template>尺寸
| 尺寸 | 高度 | 内边距 | 字体大小 |
|---|---|---|---|
sm | h-9 | px-3 py-1 | text-sm |
default | h-11 | px-4 py-2 | text-base |
lg | h-14 | px-5 py-3 | text-lg |
API 参考
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
type | HTMLInputType | undefined | "text" | 原生 input 控件的输入类型，决定浏览器提供的输入行为。 |
详情声明类型HTMLInputType | undefined 字面量
关联类型 HTMLInputType 类型定义 — HTMLInputTypetype HTMLInputType =
| 'button'
| 'checkbox'
| 'color'
| 'date'
| 'datetime-local'
| 'email'
| 'file'
| 'hidden'
| 'image'
| 'month'
| 'number'
| 'password'
| 'radio'
| 'range'
| 'reset'
| 'search'
| 'submit'
| 'tel'
| 'text'
| 'time'
| 'url'
| 'week'默认值详情
来源packages/ui/src/components/input/Input.vue | |||
modelValue | string | undefined | undefined | 当前输入值，可通过 v-model 受控绑定。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/input/Input.vue | |||
variant | "default" | "error" | "inset" | "success" | undefined | "default" | 输入框的视觉状态变体；error 会启用错误态样式和错误状态语义。 |
详情声明类型NonNullable<"default" | "success" | "error" | "inset" | null | undefined> | undefined 字面量
默认值详情
来源packages/ui/src/components/input/Input.vue | |||
size | "default" | "lg" | "sm" | undefined | "default" | 输入框的尺寸变体。 |
详情声明类型NonNullable<"default" | "lg" | "sm" | null | undefined> | undefined 字面量
默认值详情
来源packages/ui/src/components/input/Input.vue | |||
disabled | boolean | undefined | false | 禁用原生输入控件及其交互。 |
详情声明类型boolean | undefined 字面量
默认值详情
来源packages/ui/src/components/input/Input.vue | |||
readonly | boolean | undefined | false | 阻止修改输入值，但仍允许聚焦和选择文本。 |
详情声明类型boolean | undefined 字面量
默认值详情
来源packages/ui/src/components/input/Input.vue | |||
placeholder | string | undefined | undefined | 输入值为空时显示的占位文本。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/input/Input.vue | |||
maxlength | number | undefined | undefined | 传递给原生输入控件的最大字符数；与 showWordLimit 配合时用于显示计数上限。 |
详情声明类型number | undefined 默认值详情
来源packages/ui/src/components/input/Input.vue | |||
autocomplete | string | undefined | undefined | 传递给浏览器的自动填充提示，例如 email 或 current-password。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/input/Input.vue | |||
clearable | boolean | undefined | false | 启用清除按钮；仅当输入有值且控件既未禁用也非只读时显示。 |
详情声明类型boolean | undefined 字面量
默认值详情
来源packages/ui/src/components/input/Input.vue | |||
showPassword | boolean | undefined | false | 为 password 类型显示密码显隐切换按钮；切换只改变实际 input 类型。 |
详情声明类型boolean | undefined 字面量
默认值详情
来源packages/ui/src/components/input/Input.vue | |||
showWordLimit | boolean | undefined | false | 配合 maxlength 显示当前字符数和最大长度。 |
详情声明类型boolean | undefined 字面量
默认值详情
来源packages/ui/src/components/input/Input.vue | |||
prefixIcon | ConcreteComponent | (() => Component) | undefined | undefined | 在输入控件前方渲染的图标组件。 |
详情声明类型ConcreteComponent | (() => Component) | undefined 默认值详情
来源packages/ui/src/components/input/Input.vue | |||
suffixIcon | ConcreteComponent | (() => Component) | undefined | undefined | 在输入控件后方渲染的图标组件。 |
详情声明类型ConcreteComponent | (() => Component) | undefined 默认值详情
来源packages/ui/src/components/input/Input.vue | |||
errorMessage | string | undefined | undefined | 错误态下显示的错误文本，并作为错误提示内容提供给辅助技术。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/input/Input.vue | |||
id | string | undefined | undefined | 原生输入控件的 ID；未提供时由 useId 为实例生成唯一 ID。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/input/Input.vue | |||
ariaLabel | string | undefined | undefined | 传递给原生输入控件的无障碍名称。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/input/Input.vue | |||
ariaLabelledby | string | undefined | undefined | 传递给原生输入控件的标签元素 ID。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/input/Input.vue | |||
ariaDescribedby | string | undefined | undefined | 传递给原生输入控件的描述元素 ID。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/input/Input.vue | |||
ariaInvalid | boolean | undefined | undefined | 显式设置输入控件的无效状态；未设置时根据 variant 是否为 error 推导。 |
详情声明类型boolean | undefined 字面量
默认值详情
来源packages/ui/src/components/input/Input.vue | |||
ariaErrormessage | string | undefined | undefined | 传递给原生输入控件的错误消息元素 ID。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/input/Input.vue | |||
ariaRequired | boolean | undefined | undefined | 传递给原生输入控件的必填状态。 |
详情声明类型boolean | undefined 字面量
默认值详情
来源packages/ui/src/components/input/Input.vue | |||
class | string | undefined | undefined | 追加到输入框外层容器的自定义 CSS 类。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/input/Input.vue | |||
| 名称 | 签名或类型 | 说明 |
|---|---|---|
@update:modelValue | [value: string] | 用户输入值变化时发出新的字符串值以更新 v-model；输入法组合过程中不发出中间值。 |
详情声明类型[value: string] 来源packages/ui/src/components/input/Input.vue | ||
@clear | [] | 清除操作将输入值更新为空字符串后发出。 |
详情声明类型[] 来源packages/ui/src/components/input/Input.vue | ||
| 名称 | 签名或类型 | 说明 |
|---|---|---|
#prepend | {} | 在输入控件前渲染前置内容；仅在提供插槽内容时创建前置区域。 |
详情声明类型{}来源packages/ui/src/components/input/Input.vue | ||
#append | {} | 在输入控件后渲染后置内容；仅在提供插槽内容时创建后置区域。 |
详情声明类型{}来源packages/ui/src/components/input/Input.vue | ||
| 名称 | 签名或类型 | 说明 |
|---|---|---|
focus | () => void | undefined | 将焦点移到原生输入控件。 |
详情声明类型() => void | undefined 来源packages/ui/src/components/input/Input.vue | ||
blur | () => void | undefined | 从原生输入控件移除焦点。 |
详情声明类型() => void | undefined 来源packages/ui/src/components/input/Input.vue | ||
select | () => void | undefined | 选中原生输入控件中的文本。 |
详情声明类型() => void | undefined 来源packages/ui/src/components/input/Input.vue | ||
ref | Ref<HTMLInputElement | null, HTMLInputElement | null> | 暴露内部输入元素引用；Vue 在公开组件实例上解包顶层 Ref，因此读取实例的 ref 可取得原生 HTMLInputElement。 |
详情声明类型Ref<HTMLInputElement | null, HTMLInputElement | null> 字面量
来源packages/ui/src/components/input/Input.vue | ||
数据类型
HTMLInputType 与 HTMLInputElement.type 支持的原生类型一致：button、checkbox、color、date、datetime-local、email、file、hidden、image、month、number、password、radio、range、reset、search、submit、tel、text、time、url 和 week。
程序化控制
通过组件 ref 可调用下列原生输入操作，完整成员语义见 API 参考。
<script setup>
import { ref } from 'vue'
import { Input } from 'brutx-ui-vue'
const inputRef = ref(null)
function handleFocus() {
inputRef.value?.focus()
}
</script>
<template>
<Input ref="inputRef" placeholder="Click button to focus" />
<button @click="handleFocus">Focus Input</button>
</template>可访问性
通过 ARIA 属性增强输入框的无障碍可访问性，便于辅助技术（如屏幕阅读器）正确朗读：
<script setup>
import { ref } from 'vue'
import { Input } from 'brutx-ui-vue'
const email = ref('')
</script>
<template>
<Input
v-model="email"
type="email"
aria-label="邮箱地址"
aria-required="true"
aria-invalid="false"
placeholder="you@example.com"
/>
</template>