Input & Label 输入框与标签

显示一个表单输入框。可与 SLabel 搭配，或使用 SField 提供标签、描述与错误信息。

基础用法

SInput({ placeholder: 'Email', inputType: 'email' })

网页近似预览，真机效果以 HarmonyOS 渲染为准。

带标签

SLabel：text-sm font-medium leading-none。

Column({ space: 8 }) {
  SLabel({ text: 'Email', required: true })
  SInput({ placeholder: 'm@example.com', inputType: 'email' })
}

网页近似预览，真机效果以 HarmonyOS 渲染为准。

类型与状态

SInput({ placeholder: 'Password', inputType: 'password' })
SInput({ placeholder: 'Amount', inputType: 'number' })
SInput({ placeholder: 'Disabled', disabled: true })
SInput({ defaultValue: 'not-an-email', invalid: true })

网页近似预览，真机效果以 HarmonyOS 渲染为准。

尺寸

sizing：'sm'（32）| 'default'（36）| 'lg'（40）。

SInput({ placeholder: 'Small', sizing: 'sm' })
SInput({ placeholder: 'Default' })
SInput({ placeholder: 'Large', sizing: 'lg' })

网页近似预览，真机效果以 HarmonyOS 渲染为准。

图标、清除按钮与计数

icon / iconRight、clearable（有内容时显示 ×）与 showCount（长度/最大长度）。

SInput({ placeholder: 'Search…', icon: 'search', clearable: true })
SInput({ placeholder: 'Website', icon: 'globe', iconRight: 'external-link' })
SInput({ placeholder: 'Username', maxLength: 20, showCount: true, clearable: true })
SInput({ defaultValue: 'taken', icon: 'user', iconRight: 'circle-alert', invalid: true })

网页近似预览，真机效果以 HarmonyOS 渲染为准。

受控

像 v-model 一样用 !! 绑定 value。

@Local email: string = '';

SInput({ placeholder: 'Type something…', value: this.email!!,
  onSubmit: (v: string) => this.submitted = v })
Text(`value = ${this.email}`)

网页近似预览，真机效果以 HarmonyOS 渲染为准。

API

从组件库源码中的 @Param / @Event / @BuilderParam 声明自动提取。

SInput

shadcn-vue 的 Input：h-9 w-full rounded-md border px-3 py-1 text-sm，应用于原生 TextInput。

变体：sizing 取 sm | default | lg；前导 icon / 尾部 iconRight（lucide 名称）；clearable（有文字时显示的 ×，点击即清空）；showCount（12/80 计数，使用 maxLength）以及 invalid 错误状态。

请使用 inputType 代替 type（与原生枚举冲突）。位于无效的 SField 内时会自动应用无效外观；位于横向的 SField 内时会占据剩余的行宽。modifier 用于设置内部 TextInput 的样式。

属性	类型	默认值	说明
value!!	string | undefined	undefined	受控值（配合 !! 使用）。留空则为非受控。
defaultValue	string	''
placeholder	ResourceStr	''
inputType	InputKind InputKind = 'text' | 'password' | 'email' | 'number'	'text'
invalid	boolean	false
disabled	boolean	false
maxLength	number | undefined	undefined
sizing	InputSize InputSize = 'sm' | 'default' | 'lg'	'default'
icon	string | undefined	undefined	前导 lucide 图标（弱化）。
iconRight	string | undefined	undefined	尾部 lucide 图标（弱化）。
clearable	boolean	false	尾部的 ×，用于清空文字（有文字时显示）。
showCount	boolean	false	尾部字数统计（length/maxLength）。
label	string | undefined	undefined	没有可见标签时使用的无障碍名称。
modifier	AttributeModifier<TextInputAttribute>	new SparkNoopModifier<TextInputAttribute>()	在配方之后应用的额外样式（冲突时以此为准）。
tokens	InputTokens	{}	实例级令牌覆盖（实例 → 主题 --input-* → 配方），参见 {@link InputTokens}。

事件	类型	默认值	说明
onValueChange	(v: string) => void	() => { }
onSubmit	(v: string) => void	() => { }	按下 Enter / 输入法动作键；接收当前值。

SLabel

shadcn-vue 的 Label：flex items-center gap-2 text-sm leading-none font-medium select-none；所关联的控件被禁用时为 opacity-50（此处通过 disabled 参数实现，因为 ArkUI 没有 peer-disabled）。

属性	类型	默认值	说明
text	ResourceStr | undefined	undefined
required	boolean	false	追加一个 destructive 颜色的 *。
disabled	boolean	false	禁用外观（透明度 50%）。

插槽: 子组件（尾随闭包）