Ask a user for dollar amounts

const [tuitionAmount, setTuitionAmount] = useState("");
  const [suppliesAmount, setSuppliesAmount] = useState("");
  const [othersAmount, setOthersAmount] = useState("");

<GoabxFormItem label="Tuition">
        <GoabxInput
          onChange={(e) => setTuitionAmount(e.value)}
          value={tuitionAmount}
          name="tuitionAmount"
          leadingContent="$"
        />
      </GoabxFormItem>
      <GoabxFormItem label="Books/Supplies/Instruments" mt="l">
        <GoabxInput
          onChange={(e) => setSuppliesAmount(e.value)}
          value={suppliesAmount}
          name="suppliesAmount"
          leadingContent="$"
        />
      </GoabxFormItem>
      <GoabxFormItem label="Other costs" mt="l">
        <GoabxInput
          onChange={(e) => setOthersAmount(e.value)}
          value={othersAmount}
          name="othersAmount"
          leadingContent="$"
        />
      </GoabxFormItem>

costFormGroup = new FormGroup({
    tuitionFeeAmount: new FormControl(""),
    suppliesAmount: new FormControl(""),
    othersAmount: new FormControl(""),
  });

<form [formGroup]="costFormGroup">
  <goabx-form-item label="Tuition">
    <goabx-input name="tuition" formControlName="tuitionFeeAmount">
      <div slot="leadingContent">$</div>
    </goabx-input>
  </goabx-form-item>
  <goabx-form-item label="Books/Supplies/Instruments" mt="l">
    <goabx-input name="book" formControlName="suppliesAmount">
      <div slot="leadingContent">$</div>
    </goabx-input>
  </goabx-form-item>
  <goabx-form-item label="Other costs" mt="l">
    <goabx-input name="others" formControlName="othersAmount">
      <div slot="leadingContent">$</div>
    </goabx-input>
  </goabx-form-item>
</form>

["tuition-input", "supplies-input", "others-input"].forEach((id) => {
  document.getElementById(id)?.addEventListener("_change", (e) => {
    console.log(`${id}:`, e.detail.value);
  });
});

<form>
  <goa-form-item version="2" label="Tuition">
    <goa-input version="2" name="tuition" id="tuition-input">
      <div slot="leadingContent">$</div>
    </goa-input>
  </goa-form-item>
  <goa-form-item version="2" label="Books/Supplies/Instruments" mt="l">
    <goa-input version="2" name="book" id="supplies-input">
      <div slot="leadingContent">$</div>
    </goa-input>
  </goa-form-item>
  <goa-form-item version="2" label="Other costs" mt="l">
    <goa-input version="2" name="others" id="others-input">
      <div slot="leadingContent">$</div>
    </goa-input>
  </goa-form-item>
</form>