Input
单行文本录入框，支持前后缀、清除、计数、密码显隐与 IME。
如何引入
import { Input } from '@chenzy-design/svelte';基本用法
通过 bind:value 双向绑定输入值，并支持 placeholder 占位提示。
尺寸
提供 large / default / small 三种尺寸。
状态
支持禁用、warning、error 等状态。
功能
可清除、字数统计 + 长度限制、密码输入等功能。
0/20
输入组合
InputGroup 把多个输入控件拼接为一体（相邻边框合并、首尾圆角），size 经 context 回退统一透传。
价格区间
前后缀
prefix / suffix 在输入框内渲染前后缀内容（图标、单位等）。
🔍
¥ 元
前后置标签
addonBefore / addonAfter 在输入框外拼接前置/后置标签（如协议、域名后缀）。
https:// .com
用户名
受控
value 完全由外部持有，配合 onChange，可编程式设置。
自定义计数
getValueLength 自定义字符计数（emoji 按可见长度计），配合 showCount / maxLength。
0/10
自定义计数 0 · 原生 length 0输入法模式
composition 开启后，输入法未确认期间不触发 onChange，确认后触发一次。
API 参考
Input
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
value | 受控值；提供则为受控 | string | undefined |
defaultValue | 非受控初始值 | string | '' |
size | — | 'small'|'default'|'large' | default |
disabled | — | boolean | false |
readonly | — | boolean | false |
placeholder | — | string | undefined |
clearable | — | boolean | false |
showCount | — | boolean | false |
maxLength | — | number | undefined |
status | — | 'default'|'warning'|'error' | default |
type | — | 'text'|'password' | text |
prefix | — | Snippet | undefined |
suffix | — | Snippet | undefined |
addonBefore | 前置标签（在 input 框外左侧，如 "https://"） | Snippet | string | undefined |
addonAfter | 后置标签（在 input 框外右侧，如 ".com"） | Snippet | string | undefined |
borderless | 无边框模式 | boolean | false |
getValueLength | 自定义字符计数函数，替代默认 value.length（用于 showCount 与 maxLength 校验） | (value: string) => number | undefined |
hideSuffix | 有值时隐藏 suffix | boolean | false |
preventScroll | 调用 focus() 时传入 { preventScroll } | boolean | false |
autoFocus | 组件挂载时自动聚焦 | boolean | false |
name | — | string | undefined |
id | 透传到原生 <input id>，供 <label for> 精确关联 | string | undefined |
ariaLabel | — | string | undefined |
ariaDescribedby | 透传到 aria-describedby，关联说明/错误文本 | string | undefined |
ariaRequired | 必填语义（Form.Field required 透传）：输出 aria-required | boolean | undefined |
onChange | — | (v: string) => void | undefined |
onInput | — | (v: string) => void | undefined |
onClear | — | () => void | undefined |
onEnterPress | 回车按下（spec on:enterPress） | (e: KeyboardEvent) => void | undefined |
onEnter | 已废弃，改用 onEnterPress | (e: KeyboardEvent) => void | undefined |
onFocus | — | (e: FocusEvent) => void | undefined |
onBlur | — | (e: FocusEvent) => void | undefined |
composition | 输入法模式：开启后 IME 未确认期间不触发 onChange，确认后触发一次（对齐 Semi） | boolean | false |
clearIcon | 自定义清除图标（clearable 有值时替换默认图标，对齐 Semi） | Snippet | undefined |
onKeyDown | 透传原生 keydown（对齐 Semi） | (e: KeyboardEvent) => void | undefined |
onKeyUp | — | (e: KeyboardEvent) => void | undefined |
onKeyPress | — | (e: KeyboardEvent) => void | undefined |
onCompositionStart | — | (e: CompositionEvent) => void | undefined |
onCompositionEnd | — | (e: CompositionEvent) => void | undefined |
onCompositionUpdate | — | (e: CompositionEvent) => void | undefined |
Methods
| 属性 | 类型 | 说明 |
|---|---|---|
focus() | — | 命令式聚焦输入框（尊重 preventScroll，对齐 Semi） |
blur() | — | 命令式移除焦点（对齐 Semi） |
Accessibility
| ARIA role | textbox |
- 原生 input
- error 时 aria-invalid
- 密码切换 aria-pressed
- 清除按钮 aria-label
设计变量
| 变量 | 默认值 | 用法 |
|---|---|---|
--cd-transition-delay-input-bg | var(--cd-motion-delay-none) | 输入框-背景色-延迟时间 |
--cd-transition-delay-input-border | var(--cd-motion-delay-none) | 输入框-边框-延迟时间 |
--cd-transition-delay-input-text | var(--cd-motion-delay-none) | 输入框-文字或图标-延迟时间 |
--cd-transition-duration-input-bg | var(--cd-motion-duration-none) | 输入框-背景色-动画持续时间 |
--cd-transition-duration-input-border | var(--cd-motion-duration-none) | 输入框-边框-动画持续时间 |
--cd-transition-duration-input-text | var(--cd-motion-duration-none) | 输入框-文字或图标-动画持续时间 |
--cd-transition-function-input-bg | var(--cd-motion-ease-in) | 输入框-背景色-过渡曲线 |
--cd-transition-function-input-border | var(--cd-motion-ease-in) | 输入框-边框-过渡曲线 |
--cd-transition-function-input-text | var(--cd-motion-ease-in) | 输入框-文字或图标-过渡曲线 |