<div class="currency-field cfa-stack-sm">
  <span class="field_with_errors"><label class="label block" for="form_component_preview_test_model_my_number">My Number</label></span>
  <div class="relative max-w-sm">
    <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-cfa-med font-bold text-text-body-secondary">
      $
    </span>
    <span class="field_with_errors"><input class="w-full !pl-cfa-xl" inputmode="decimal" placeholder="0.00" x-data="" x-mask:dynamic="$money" x-init="$el.form?.addEventListener('formdata', (e) => { e.formData.set($el.name, $el.value.replace(/[^0-9.]/g, '')) }); $el.dispatchEvent(new Event('input'))" aria-required="true" aria-invalid="true" aria-describedby="form_component_preview_test_model_my_number_error" type="text" name="form_component_preview_test_model[my_number]" id="form_component_preview_test_model_my_number" /></span>
  </div>
  <p id="form_component_preview_test_model_my_number_error" class="form_errors type-body-label flex items-start gap-cfa-sm text-text-body-secondary">
    <span class="flex h-[1lh] shrink-0 items-center">
      <svg class="cfa-icon text-error" width="24" height="24" aria-hidden="true" focusable="false"><use href="/assets/uswds-sprite-36dd7ae2.svg#error"></use></svg>
    </span>
    <span>
      My number can't be blank
    </span>
  </p>
</div>