Components / Input Group

Input Group

Native inputs and textareas composed with text, icons and actions in one focus surface.

Website

https://

example.component.html

html

<label for="website">
  Website
</label>
<aevko-input-group>
  <input aevkoInputGroupControl id="website" placeholder="example.com" />
  <aevko-input-group-addon>
    https://
  </aevko-input-group-addon>
  <button aevkoInputGroupButton type="button">
    Copy
  </button>
</aevko-input-group>

Installation

npx aevko-ui@latest add input-group --yes

Source ownership

Customization

Compose native inputs, textareas, text, SVG and buttons in one surface. Keep the control first in source and move addons visually with logical alignment.

Edit locallyThe installed template and stylesheet are application code, not a black box.

Theme semanticallyOverride --aevko-* tokens or ordinary classes without !important.

API reference

Property or slot	Type	Default	Description
`aevkoInputGroupControl`	`native input or textarea`	`required`	The focusable form control.
`addon align`	`'inline-start' \| 'inline-end' \| 'block-start' \| 'block-end'`	`'inline-start'`	Positions projected text, icons or controls without changing DOM focus order.
`aevkoInputGroupButton`	`native button`	`type='button'`	Optional embedded action.

Accessibility contract

Accessibility

Included behavior

The projected control remains native and first in DOM focus order even when an addon is positioned visually before it.

Your responsibility

Associate a visible label with the native control and give every embedded icon-only button an accessible name.

Back to all components