Input & Label

Displays a form input field. Pair it with SLabel, or use SField for label, description and error.

Usage

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

Approximate web preview — the HarmonyOS rendering is the reference.

With label

SLabel: text-sm font-medium leading-none.

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

Approximate web preview — the HarmonyOS rendering is the reference.

Types & states

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

Approximate web preview — the HarmonyOS rendering is the reference.

Sizes

sizing: 'sm' (32) | 'default' (36) | 'lg' (40).

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

Approximate web preview — the HarmonyOS rendering is the reference.

Icons, clear button, counter

icon / iconRight, clearable (× while there is text) and showCount (length/maxLength).

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 })

Approximate web preview — the HarmonyOS rendering is the reference.

Controlled

Bind the value with !! like v-model.

@Local email: string = '';

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

Approximate web preview — the HarmonyOS rendering is the reference.

API

Extracted from the @Param / @Event / @BuilderParam declarations in the library sources.

SInput

shadcn-vue Input: h-9 w-full rounded-md border px-3 py-1 text-sm, styled on the native TextInput.

Variants: sizing sm | default | lg, leading icon / trailing iconRight (lucide names), clearable (an × that empties the field while it has text), showCount (12/80 counter, uses maxLength) and the invalid error state.

inputType instead of type (native enum clash). Inside an invalid SField the invalid look is applied automatically; inside a horizontal SField it takes the remaining row width. modifier styles the inner TextInput.

Prop	Type	Default	Description
value!!	string | undefined	undefined	Controlled value (use with !!). Leave undefined for uncontrolled.
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	Leading lucide icon (muted).
iconRight	string | undefined	undefined	Trailing lucide icon (muted).
clearable	boolean	false	Trailing × that clears the text (shown while there is text).
showCount	boolean	false	Trailing character counter (length/maxLength).
label	string | undefined	undefined	Accessible name when there is no visible label.
modifier	AttributeModifier<TextInputAttribute>	new SparkNoopModifier<TextInputAttribute>()	Extra styles applied after the recipe (wins on conflicts).
tokens	InputTokens	{}	Per-instance token overrides (instance → theme --input-* → recipe), see {@link InputTokens}.

Event	Type	Default	Description
onValueChange	(v: string) => void	() => { }
onSubmit	(v: string) => void	() => { }	Enter / IME action pressed; receives the current value.

SLabel

shadcn-vue Label: flex items-center gap-2 text-sm leading-none font-medium select-none, opacity-50 when the associated control is disabled (disabled param here, since ArkUI has no peer-disabled).

Prop	Type	Default	Description
text	ResourceStr | undefined	undefined
required	boolean	false	Appends a destructive *.
disabled	boolean	false	Disabled look (opacity 50%).

Slots: children (trailing closure)