InputGroup breaks Form Field validation

[ng-hai]

mui/base-ui#1844

I tried this sample code to see why the FieldError did not show up. And surprisingly, it’s because of the InputGroup wrapper. If I bring the FieldControl (Input, NumberField) out of the InputGroup, everything is fine.

<Form validationMode="onChange">
  <Field
    validate={(value) => {
      if (value === undefined || value == null || value === 0) {
        return "Amount is required";
      }
      if (typeof value === "number" && Number.isFinite(value)) {
        if (value > 50) {
          return "Insufficient balance, your remaining balance is 50.00";
        }
        if (value < 20) {
          return "The minimum amount is 20.00";
        }
      }
      return null;
    }}
  >
    <FieldLabel>Withdrawal amount</FieldLabel>

    <InputGroup>
      <NumberField required>
        <NumberFieldInput placeholder="Maximum [x] per day" />
      </NumberField>
    </InputGroup>

    <FieldError match="customError" />
  </Field.Root>
</Form.Root>

[ng-hai]

I think I could narrow down the issue scope as below.

// ❌ This will not work
<Form>
  <Field>
    <FieldLabel>Withdrawal amount</FieldLabel>

    <InputGroup>
      <NumberField required>
        <NumberFieldInput placeholder="Maximum [x] per day" />
      </NumberField>
    </InputGroup>

    <FieldError />
  </Field>

  <Button type="submit">Submit</Button>
</Form>

// ✅ This works
<Form>
  <Field>
    <FieldLabel>Withdrawal amount</FieldLabel>

    <NumberField required>
      <NumberFieldInput placeholder="Maximum [x] per day" />
    </NumberField>

    <FieldError />
  </Field>

  <Button type="submit">Submit</Button>
</Form>

// ✅ Also works
<Form>
  <Field validate={...}>
    <FieldLabel>Withdrawal amount</FieldLabel>

    <InputGroup>
      <NumberField>
        <NumberFieldInput placeholder="Maximum [x] per day" />
      </NumberField>
    </InputGroup>

    <FieldError />
  </Field>

  <Button type="submit">Withdraw</Button>
</Form>

[pasqualevitiello]

Not sure to understand what the issue is. You are supposed to pass a validate prop to make it work. Then, if you want to validate on blur, you're supposed to add the validationMode="onBlur" prop, just like on this example: https://codesandbox.io/p/sandbox/vibrant-sanderson-m78kcl

Seems to be working consistently, with and without the InputGroup.

Screen.Recording.2025-11-27.at.14.06.49.mov