Eingabegruppe 1.2.0

Erweitere Formular-Controls, indem du mit .velin-input-group Text, Icons oder Buttons voranstellst oder anhängst. English: Input Group

Reifegrad: Als stabil in VelinStyle 1.2.0 dokumentiert. Design Intelligence (Plan / Review / Agent Meta) ist separat und dort beta / foundation, wo es so gekennzeichnet ist.

Wann verwenden

Kombiniere Präfixe/Suffixe mit .velin-input-group (Text, Icons oder Buttons) rund um .velin-input / .velin-select.

Wann nicht

Ersetze ein echtes Label nicht nur durch Add-on-Text - behalte <label> (oder sr-only) bei.
Vermeide verschachtelte interaktive Add-ons, die die Tab-Reihenfolge unklar machen.

Text-Add-ons

Platziere .velin-input-group__text vor oder nach der Eingabe.

.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

Nutze <velin-icon> innerhalb des Text-Spans für Icon-Präfixe oder -Suffixe.

<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

Hänge Buttons an eine Eingabegruppe an oder stelle sie voran.

<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>

Größen

Füge dem Wrapper .velin-input-group--sm oder .velin-input-group--lg hinzu.

<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>