开发预览更新于 2026-05-10

Input 输入框

单行输入 —— 3 种 variant、3 种尺寸、错误态、可清空、prefix/suffix。

基础用法

v-model / value + onChange 直接绑定字符串。placeholder 跟原生 input 一致。

已输入：（空）

<script setup lang="ts">
import { ref } from 'vue';
import { CfInput } from '@chufix-design/vue';

const name = ref('');
</script>

<template>
<CfInput v-model="name" placeholder="请输入用户名" />
</template>

import { useState } from 'react';
import { CfInput } from '@chufix-design/react';

export default function Demo() {
const [name, setName] = useState('');
return (
  <CfInput
    value={name}
    onChange={(e) => setName(e.target.value)}
    placeholder="请输入用户名"
  />
);
}

视觉变体

3 种 variant 提供不同的边框 / 背景强度。filled 适合表单密集的场景，ghost 在已有容器边框时使用，避免双重边框。

<CfInput variant="outline" placeholder="outline · 默认" />
<CfInput variant="filled" placeholder="filled · 灰色填充" />
<CfInput variant="ghost" placeholder="ghost · 无边框，聚焦才出现" />

<CfInput variant="outline" placeholder="outline · 默认" />
<CfInput variant="filled" placeholder="filled · 灰色填充" />
<CfInput variant="ghost" placeholder="ghost · 无边框，聚焦才出现" />

尺寸

<CfInput size="sm" placeholder="Small" />
<CfInput size="md" placeholder="Medium" />
<CfInput size="lg" placeholder="Large" />

<CfInput size="sm" placeholder="Small" />
<CfInput size="md" placeholder="Medium" />
<CfInput size="lg" placeholder="Large" />

状态

clearable 只在有值时显示清除按钮；error 切换到危险色边框 + ring；disabled / readonly 与原生 input 一致。

<script setup lang="ts">
import { ref } from 'vue';
import { CfInput } from '@chufix-design/vue';

const email = ref('not-an-email');
const valid = (s: string) => /.+@.+\..+/.test(s);
</script>

<template>
<CfInput v-model="search" clearable placeholder="可清空（输入后出现 ×）" />
<CfInput
  v-model="email"
  :error="!valid(email)"
  placeholder="错误状态：邮箱格式不对"
/>
<CfInput placeholder="禁用" disabled />
<CfInput placeholder="只读" readonly model-value="readonly content" />
</template>

import { useState } from 'react';
import { CfInput } from '@chufix-design/react';

export default function Demo() {
const [email, setEmail] = useState('not-an-email');
const valid = /.+@.+\..+/.test(email);

return (
  <>
    <CfInput clearable placeholder="可清空（输入后出现 ×）" />
    <CfInput
      value={email}
      onChange={(e) => setEmail(e.target.value)}
      error={!valid}
      placeholder="错误状态：邮箱格式不对"
    />
    <CfInput placeholder="禁用" disabled />
    <CfInput placeholder="只读" readOnly defaultValue="readonly content" />
  </>
);
}

前后缀

通过具名插槽（Vue）/ prefix & suffix props（React）放置图标或固定文本。clearable 和 suffix 互斥（有内容时显示清除按钮）。

https://.com

<CfInput v-model="url" placeholder="example">
<template #prefix>https://</template>
<template #suffix>.com</template>
</CfInput>

<CfInput v-model="search" clearable placeholder="搜索…">
<template #prefix>
  <SearchIcon />
</template>
</CfInput>

<CfInput
value={url}
onChange={(e) => setUrl(e.target.value)}
placeholder="example"
prefix={<>https://</>}
suffix={<>.com</>}
/>

<CfInput
value={search}
onChange={(e) => setSearch(e.target.value)}
clearable
placeholder="搜索…"
prefix={<SearchIcon />}
/>

API

Prop	类型	默认值	说明
`modelValue`	`string \| number`	—	Vue v-model 绑定值
`value`	`string`	—	React 受控值
`type`	`'text' \| 'password' \| 'email' \| 'number' \| 'tel' \| 'url' \| 'search'`	`'text'`	输入类型
`variant`	`'outline' \| 'filled' \| 'ghost'`	`'outline'`	视觉变体
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	高度与字号
`clearable`	`boolean`	`false`	有值时显示清除按钮
`error`	`boolean`	`false`	错误态边框 / ring
`disabled`	`boolean`	`false`	禁用
`readonly`	`boolean`	`false`	只读
`placeholder`	`string`	—	占位文本