Components

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.

Edit this page
Last updated: Jul 19, 2026, 4:42 PM