Extending "sap.m.Input" to allow CSS style class binding (https://stackoverflow.com/a/67919830/5846045, https://answers.sap.com/answers/13595161/view.html) and additional inner attributes such as spellcheck (https://answers.sap.com/comments/13786955/view.html, https://answers.sap.com/answers/13786967/view.html)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Demo</title>
    <style>/* Sample custom CSS definitions */
      .myApp .sapMInput.demoInput.myStyle1 input {
        background-color: gold;
      }
      .myApp .sapMInput.demoInput.myStyle2 input {
        background-color: silver;
      }
      .myApp .sapMInput.demoInput.myStyle3 input {
        background-color: fuchsia;
        color: #fff;
      }
      html, body {
        height: 100%;
        margin: 0;
      }
    </style>
    <script defer id="sap-ui-bootstrap"
      src="https://sdk.openui5.org/nightly/resources/sap-ui-core.js"
      data-sap-ui-libs="sap.ui.core,sap.m,sap.ui.unified,sap.ui.layout"
      data-sap-ui-modules="demo/control/Input"
      data-sap-ui-theme="sap_horizon"
      data-sap-ui-onInit="onUI5Init"
      data-sap-ui-async="true"
      data-sap-ui-resourceRoots='{"demo": "./"}'
      data-sap-ui-compatVersion="edge"
      data-sap-ui-excludeJQueryCompat="true"
      data-sap-ui-xx-waitForTheme="init"
    ></script>
    <script>
      globalThis.onUI5Init = () => sap.ui.require([
        "sap/ui/core/mvc/XMLView",
        "sap/ui/model/json/JSONModel",
        "sap/ui/core/mvc/Controller",
      ], async (XMLView, JSONModel, Controller) => {
        "use strict";

        const urlParams = new URLSearchParams(document?.location?.search);
        const MyController = Controller.extend("demo.MyController", {
          onAfterRendering: function() {
            window.setTimeout(() => this.byId("myInput").focus());
          },
          onToggleButtonPress: function () {
            this.byId("myInput").focus();
          },
        });
        const control = await XMLView.create({
          definition: `<mvc:View controllerName="demo.MyController"
            xmlns:mvc="sap.ui.core.mvc"
            xmlns="sap.m"
            xmlns:my="demo.control"
            displayBlock="true"
            height="100%" 
          >
            <App xmlns="sap.m" class="myApp" autoFocus="false">
              <Page
                title="Extended Input Renderer"
                class="sapUiResponsiveContentPadding"
              >
                <headerContent>
                  <SegmentedButton selectedKey="{/selected}" items="{/styles}">
                    <items>
                      <SegmentedButtonItem key="{class}" text="{text}" />
                    </items>
                  </SegmentedButton>
                  <ToggleButton
                    text="Spell Check {= %{/spellChecked} ? 'Enabled' : 'Disabled'}"
                    pressed="{/spellChecked}"
                    press=".onToggleButtonPress"
                  />
                </headerContent>
                <my:Input id="myInput"
                  styleClass="{/selected}"
                  spellCheckEnabled="{/spellChecked}"
                />
              </Page>
            </App>
          </mvc:View>`,
          controller: new MyController(),
          models: new JSONModel({
            selected: "",
            styles: [
              {
                class: "",
                text: "Default"
              },
              {
                class: "myStyle1",
                text: "Style 1",
              },
              {
                class: "myStyle2",
                text: "Style 2",
              },
              {
                class: "myStyle3",
                text: "Style 3",
              },
            ],
            spellChecked: urlParams.get("enable-spell-check") === "true"
          }),
        });

        control.placeAt("content");
      });
    </script>
  </head>
  <body id="content" class="sapUiBody"></body>
</html>

sap.ui.define([
  "sap/m/Input",
  "sap/m/InputRenderer",
], function (Input, InputRenderer) {
  "use strict";

  return Input.extend("demo.control.Input", {
    metadata: {
      properties: {
        "styleClass": {
          type: "string",
          bindable: true,
        },
        "spellCheckEnabled": { // browser spell check
          type: "boolean",
          defaultValue: false,
          bindable: true,
        }
      },
    },

    renderer: { // will be merged with the parent renderer (InputRenderer)
      apiVersion: 2, // enabling semantic rendering (aka. DOM-patching)
      // Implement the hook method(s) from the parent renderer(s)
      addOuterClasses: function (renderManager, thisInput) {
        InputRenderer.addOuterClasses.apply(this, arguments);
        renderManager.class("demoInput").class(thisInput.getStyleClass());
      },
      addInnerStyles: function (renderManager, thisInput) {
        InputRenderer.addInnerStyles.apply(this, arguments);
        renderManager.style("font-weight", "bold");
        // renderManager.attr("inputmode", "numeric"); numeric soft-keyboard 
      },
      writeInnerAttributes: function (renderManager, thisInput) {
        InputRenderer.writeInnerAttributes.apply(this, arguments);
        // Allow enabling spell-check only if type !== Password
        // - Default: https://answers.sap.com/answers/13782891/view.html
        // - https://github.com/SAP/openui5/issues/2843#issuecomment-1368976166
        // - https://answers.sap.com/answers/13786967/view.html
        renderManager.attr("spellcheck", thisInput.getType() !== "Password" && thisInput.getSpellCheckEnabled());
      },
      // Doc: https://ui5.sap.com/#topic/bcee26a4801748f39bf5698d83d903aa
    },

  });
});