Input Group

pk-input-group 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 pk-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 pk-input-group-text inside aligned addons.

Button Addon

Combine a text prefix with an inline pk-input-group-button.

API

pk-input-group

Slots

Name	Description
(default)	Input controls and addons

CSS Parts

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

pk-input-group-addon

Slots

Name	Description
(default)	Addon content

Attributes & Properties

Name	Description
align	Type PkInputGroupAddonAlign Default inline-start

CSS Parts

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

pk-input-group-button

Slots

Name	Description
(default)	Button label or icon

Attributes & Properties

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)

pk-input-group-input

Attributes & Properties

Name	Description
autocomplete	Type string | undefined
disabled	Type boolean Default false
invalid	Type boolean Default false
placeholder	Type string
readonly	Type boolean Default false
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)

pk-input-group-text

Slots

Name	Description
(default)	Text content

CSS Parts

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