Input group

A text input with a fixed part before or after it: a currency symbol, a unit, a dialling code.

Amount In local currency

Show HTML

<div class="ag-field ag-mb-0">
  <label class="ag-label" for="ig-amount">Amount</label>
  <span class="ag-hint" id="ig-amount-hint" data-docs-string="currency-hint">In local currency</span>
  <div class="ag-input-group">
    <span class="ag-input-group__affix" aria-hidden="true" data-docs-string="currency-symbol" hidden></span>
    <input
      class="ag-input ag-input--width-10"
      id="ig-amount"
      name="amount"
      type="text"
      inputmode="decimal"
      aria-describedby="ig-amount-hint"
    />
  </div>
</div>

Select a country at the top to see its currency symbol. Senegal puts it after the amount.

Suffix

Weight

Show HTML

<div class="ag-field ag-mb-0">
  <label class="ag-label" for="ig-weight">Weight</label>
  <div class="ag-input-group">
    <input class="ag-input ag-input--width-4" id="ig-weight" name="weight" type="text" inputmode="decimal" />
    <span class="ag-input-group__affix" aria-hidden="true">kg</span>
  </div>
</div>

Accessibility

The affix is aria-hidden because the unit is already in the label or hint. Say "Amount in naira", not just "Amount".
Use inputmode="decimal" for money so the phone keyboard has a decimal point.
Do not put the symbol inside the input as a value. It breaks validation and autofill.

Pack fields

currency.symbol, currency.position, currency.hint.