Input Group

InputGroup composes a field control with prefix/suffix addons (icons, text, or buttons). Put the control first in the DOM, then addons — use align to place them visually.

For a single leading/trailing glyph inside a field border, prefer Input slots instead. Use an input group when the adornment is a separate addon or a control.

Icon Addons

Default addon alignment is start; use align="inline-end" for a trailing icon.

Text Addons

Prefix and suffix copy via InputGroupText inside aligned addons.

Button Addon

Combine a text prefix with an inline InputGroupButton.

API

InputGroup

Slots

Name	Description
(default)	Input controls and addons

CSS Parts

Name	Description	CSS selector
base	Group shell	::part(base)

InputGroupAddon

Slots

Name	Description
(default)	Addon content

Props

Name	Description
align	Type PkInputGroupAddonAlign Default inline-start

CSS Parts

Name	Description	CSS selector
base	Addon container	::part(base)

InputGroupButton

Slots

Name	Description
(default)	Button label or icon

Props

Name	Description
disabled	Type boolean Default false
size	Type PkInputGroupButtonSize Default xs
variant	Type string Default none

CSS Parts

Name	Description	CSS selector
base	Button element	::part(base)

InputGroupInput

Props

Name	Description
autocomplete	Type string | undefined
disabled	Type boolean Default false
invalid	Type boolean Default false
isInvalid	Alias for invalid.
placeholder	Type string
readonly	Type boolean Default false
readOnly	Alias for readonly.
size	Type PkInputGroupInputSize Default default
type	Type string Default text
value	Type string

Events

Name	Description
@change	—
@input	—

CSS Parts

Name	Description	CSS selector
input	Native input element	::part(input)

InputGroupText

Slots

Name	Description
(default)	Text content

CSS Parts

Name	Description	CSS selector
base	Text container	::part(base)