Number + Currency Input

Live Preview

Composition

This pattern keeps the amount controls inside one .dsx-field so the label, helper copy, and error message stay attached to the same decision. Inside .dsx-field__control, a small local layout wrapper places a .dsx-input with type="number" next to a .dsx-select for currency.

The compact summary row is plain semantic markup (<dl>) with page-local layout styles, while actions use the standard .dsx-btn button variants.

Primitives used

Primitive	Role in the pattern
`.dsx-field`	Shared wrapper for label, control, helper copy, and validation
`.dsx-input`	Numeric amount entry
`.dsx-select`	Currency choice and follow-up selection
`.dsx-field__hint` / `.dsx-field__error`	Helper and error copy tied to the amount field
`.dsx-btn`	Secondary and primary actions

Usage

<div class="dsx-field dsx-field--error">
  <div class="dsx-field__label-row">
    <label class="dsx-field__label dsx-field__label--required" for="payout-amount">Payout amount</label>
    <span class="dsx-field__meta">
      <span class="dsx-field__info-text">Remaining budget €7,520.00</span>
    </span>
  </div>

  <div class="dsx-field__control">
    <div class="amount-entry">
      <input
        class="dsx-input"
        id="payout-amount"
        type="number"
        min="0"
        step="0.01"
        aria-invalid="true"
        aria-describedby="payout-amount-hint payout-amount-error"
      >
      <select class="dsx-select" aria-label="Currency">
        <option selected>EUR</option>
        <option>USD</option>
      </select>
    </div>
  </div>

  <p class="dsx-field__hint" id="payout-amount-hint">
    Enter the gross payment before fees; the export keeps two decimal places.
  </p>
  <div class="dsx-field__error" id="payout-amount-error">
    Requests above €10,000.00 need an approval note before submission.
  </div>
</div>

Notes

Keep the visible label attached to the numeric input and give the currency select an aria-label when both controls share one field label.
Use .dsx-field--error when the amount and currency should be validated as one unit.
Keep the summary row outside the field wrapper so validation copy stays directly connected to the controls.