Input Group

Add icons, text or buttons to an input. The group draws the border and shows the focus ring while its input is focused; tapping an addon focuses the input.

Usage

SInputGroup() {
  SInputGroupAddon() { SIcon({ name: 'search' }) }
  SInputGroupInput({ placeholder: 'Search…' })
  SInputGroupAddon({ alignment: 'inline-end' }) {
    SInputGroupText({ text: '12 results' })
  }
}

Approximate web preview — the HarmonyOS rendering is the reference.

Text

Prefixes and suffixes with SInputGroupText.

SInputGroup() {
  SInputGroupAddon() { SInputGroupText({ text: 'https://' }) }
  SInputGroupInput({ placeholder: 'example.com' })
  SInputGroupAddon({ alignment: 'inline-end' }) { SInputGroupText({ text: '.com' }) }
}
SInputGroup() {
  SInputGroupAddon() { SInputGroupText({ text: '$' }) }
  SInputGroupInput({ placeholder: '0.00', inputType: 'number' })
  SInputGroupAddon({ alignment: 'inline-end' }) { SInputGroupText({ text: 'USD' }) }
}

Approximate web preview — the HarmonyOS rendering is the reference.

Button

Compact buttons inside the field (xs, sm, icon-xs, icon-sm).

@Local url: string = 'https://sparkui.dev';

SInputGroup() {
  SInputGroupInput({ value: this.url!! })
  SInputGroupAddon({ alignment: 'inline-end' }) {
    SInputGroupButton({ icon: 'copy', sizing: 'icon-xs', label: 'Copy' })
      .onClick(() => this.copied = true)
  }
}
SInputGroup() {
  SInputGroupInput({ placeholder: 'Type to search…' })
  SInputGroupAddon({ alignment: 'inline-end' }) {
    SInputGroupButton({ text: 'Search', variant: 'secondary' })
  }
}

Approximate web preview — the HarmonyOS rendering is the reference.

Block addons & invalid

block-start / block-end span the full width.

SInputGroup() {
  SInputGroupAddon({ alignment: 'block-start' }) {
    SInputGroupText({ icon: 'file-text', text: 'script.ts' })
  }
  SInputGroupInput({ placeholder: 'console.log("Hello")' })
  SInputGroupAddon({ alignment: 'block-end' }) {
    SInputGroupText({ text: 'Line 1, Column 1' })
  }
}
SInputGroup({ invalid: true }) {
  SInputGroupAddon() { SIcon({ name: 'mail' }) }
  SInputGroupInput({ placeholder: 'Email' })
}

Approximate web preview — the HarmonyOS rendering is the reference.

API

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

SInputGroup

shadcn-vue InputGroup (v4): one bordered field holding an input plus addons (icons, text, buttons). The group draws the border and the focus ring (has-[:focus]:border-ring ring-ring/50 ring-[3px]) while its inner SInputGroupInput is focused.

Write the parts in visual order: ArkUI cannot reorder slot children (order-first / order-last). Block addons (block-start / block-end) span the full width and sit on their own line above / below the input. Tapping an addon focuses the input.

Prop	Type	Default	Description
invalid	boolean	false
disabled	boolean	false
modifier	AttributeModifier<FlexAttribute>	new SparkNoopModifier<FlexAttribute>()

Slots: children (trailing closure)

SInputGroupAddon

Addon area: text-muted-foreground flex items-center gap-2 py-1.5 text-sm font-medium, with pl-3 (inline-start), pr-3 (inline-end), or full width px-3 pt-3 / px-3 pb-3 (block-start / block-end). Tapping it focuses the group's input.

Prop	Type	Default	Description
alignment	InputGroupAddonAlignment InputGroupAddonAlignment = 'inline-start' | 'inline-end' | 'block-start' | 'block-end'	'inline-start'

Slots: children (trailing closure)

SInputGroupText

Muted text / icon inside an addon: text-muted-foreground flex items-center gap-2 text-sm.

Prop	Type	Default	Description
text	ResourceStr | undefined	undefined
icon	string | undefined	undefined	Leading lucide icon (16vp).

Slots: children (trailing closure)

SInputGroupButton

Compact button for addons: shadcn InputGroupButton (shadow-none, sizes xs h-6 px-2, sm h-8 px-2.5, icon-xs size-6, icon-sm size-8; default variant ghost). Clicks: native .onClick() on the component.

Prop	Type	Default	Description
text	ResourceStr | undefined	undefined
icon	string | undefined	undefined	Leading lucide icon name.
variant	ButtonVariant ButtonVariant = 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'	'ghost'
sizing	InputGroupButtonSize InputGroupButtonSize = 'xs' | 'sm' | 'icon-xs' | 'icon-sm'	'xs'
disabled	boolean	false
label	string | undefined	undefined	Accessible name; required for icon-only buttons.

SInputGroupInput

The group's text control: an SInput-styled TextInput without its own border / ring (flex-1 rounded-none border-0 bg-transparent shadow-none). Same value API as SInput.

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'
maxLength	number | undefined	undefined
label	string | undefined	undefined	Accessible name when there is no visible label.
modifier	AttributeModifier<TextInputAttribute>	new SparkNoopModifier<TextInputAttribute>()

Event	Type	Default	Description
onValueChange	(v: string) => void	() => { }
onSubmit	(v: string) => void	() => { }