Input Group 1.2.2

Extend form controls by prepending or appending text, icons, or buttons using .velin-input-group. Deutsch: Eingabegruppe

Maturity: Documented as stable in VelinStyle 1.2.0. Design Intelligence (plan / review / agent meta) is separate and beta / foundation where noted.

When to use

Compose prefixes/suffixes with .velin-input-group (text, icons, or buttons) around .velin-input / .velin-select.

When not

Do not replace a real label with addon text alone — keep <label> (or sr-only).
Avoid nesting multiple interactive addons that confuse tab order.

Text add-ons

Place a .velin-input-group__text before or after the input.

.00

$ .00

<div class="velin-input-group">
  <span class="velin-input-group__text">@</span>
  <input type="text" class="velin-input" placeholder="Username">
</div>

<div class="velin-input-group">
  <input type="text" class="velin-input" placeholder="Amount">
  <span class="velin-input-group__text">.00</span>
</div>

<div class="velin-input-group">
  <span class="velin-input-group__text">$</span>
  <input type="text" class="velin-input" placeholder="Price">
  <span class="velin-input-group__text">.00</span>
</div>

Icon add-ons

Use <velin-icon> inside the text span for icon prepend/append.

<div class="velin-input-group">
  <span class="velin-input-group__text">
    <velin-icon name="mail" size="16"></velin-icon>
  </span>
  <input type="email" class="velin-input" placeholder="Email address">
</div>

Button add-ons

Append or prepend buttons to an input group.

<div class="velin-input-group">
  <input type="text" class="velin-input" placeholder="Search…">
  <button class="velin-btn velin-btn--primary" type="button">Go</button>
</div>

<div class="velin-input-group">
  <button class="velin-btn velin-btn--outline" type="button">Options</button>
  <input type="text" class="velin-input" placeholder="Input with button">
</div>

Sizing

Add .velin-input-group--sm or .velin-input-group--lg to the wrapper.

<div class="velin-input-group velin-input-group--sm">…</div>
<div class="velin-input-group">…</div>
<div class="velin-input-group velin-input-group--lg">…</div>