Input groups

A field and its button, or its unit, joined

With a button

The action that goes with the field.

Show the code

<div class="input-group w-100">
<label class="input">
<i class="ti ti-barcode">
</i>
<input type="text" aria-label="Barcode, scanned or typed" placeholder="Barcode" inputmode="numeric">
</label>
<button type="button" class="btn" data-toast="Looking up the barcode…">Look up</button>
</div>

With a code

Copy what the field holds.

Show the code

<div class="input-group w-100">
<label class="input">
<input id="ig-c" type="text" readonly value="KX7-42Q" aria-label="Pairing code">
</label>
<button type="button" class="btn" data-copy="ig-c">
<i class="ti ti-copy">
</i>Copy</button>
</div>

Units

Before and after the number.

Cost

Margin

Shelf life

days

Show the code

<div class="form-grid two w-100">
<div class="field">
<label class="label" for="ig-1">Cost</label>
<div class="input">
<span class="affix">$</span>
<input id="ig-1" name="ig-1" type="number" value="1.40" inputmode="decimal" step="0.01">
</div>
</div>
<div class="field">
<label class="label" for="ig-2">Margin</label>
<div class="input">
<input id="ig-2" name="ig-2" type="number" value="60" inputmode="numeric">
<span class="affix">%</span>
</div>
</div>
<div class="field">
<label class="label" for="ig-3">Email</label>
<div class="input">
<span class="affix">@</span>
<input id="ig-3" name="ig-3" type="text" placeholder="cornerstore">
</div>
</div>
<div class="field">
<label class="label" for="ig-4">Shelf life</label>
<div class="input">
<input id="ig-4" name="ig-4" type="number" value="2" inputmode="numeric">
<span class="affix">days</span>
</div>
</div>
</div>