Vitreo
Forms

Input groups

Text and buttons attached to a field

Text before and after

https:// .vitreo.test
$ USD
Code 
<div class="input-group">
  <span class="input-group-text">https://</span>
  <input id="ig-1" name="ig-1" type="text" placeholder="northwind" class="input">
  <span class="input-group-text">.vitreo.test</span>
</div>
<div class="input-group">
  <span class="input-group-text">$</span>
  <input id="ig-2" name="ig-2" type="text" placeholder="0.00" inputmode="decimal" class="input">
  <span class="input-group-text">USD</span>
</div>

With a button

Code 
<div class="input-group">
  <input id="ig-3" name="ig-3" type="text" placeholder="Invite by email" class="input">
  <button type="button" class="btn btn-primary">Invite</button>
</div>
<div class="input-group">
  <span class="input-group-text"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></span>
  <input id="ig-4" name="ig-4" type="text" value="vitreo.test/r/q3" aria-label="Share link" readonly class="input">
  <button type="button" class="btn btn-gray" data-copy="vitreo.test/r/q3"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>Copy</button>
</div>
© Vitreo. All rights reserved.