docs(Input): add controlled Input example (#8280)

Author: Lukas742

packages/main/src/webComponents/Input/Input.mdx

@@ -22,11 +22,30 @@ import { excludePropsForAbstract } from '@sb/utils';
 
 <br />
 
-# More Examples
+## More Examples
 
 <br />
 
-## Input with customizable SuggestionItem
+### Fully Controlled Input
+
+Different from the native `input` element, the `Input` (`ui5-input`) web component is uncontrolled even if the `value` prop is provided (see [React docs](https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable)).
+To make it fully controlled, call `event.preventDefault()` in the `onInput` handler.
+
+In the example below, only letters are allowed to be entered into the `Input` component.
+
+<Canvas of={ComponentStories.FullyControlled} />
+
+```ts
+const handleInput: InputPropTypes['onInput'] = (event) => {
+  event.preventDefault();
+  const { value } = event.target;
+  if (/^[a-zA-Z]*$/.test(value)) {
+    setValue(value);
+  }
+};
+```
+
+### Input with customizable SuggestionItem
 
 The `SuggestionItem` represents the suggestion item of the `Input`
 

packages/main/src/webComponents/Input/Input.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import InputType from '@ui5/webcomponents/dist/types/InputType.js';
 import ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js';
 import employeeIcon from '@ui5/webcomponents-icons/dist/employee.js';
+import { useState } from 'react';
 import { Icon } from '../Icon/index.js';
 import { SuggestionItem } from '../SuggestionItem/index.js';
 import { SuggestionItemGroup } from '../SuggestionItemGroup/index.js';
@@ -28,6 +29,27 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
 
+export const FullyControlled: Story = {
+  render(args) {
+    const [value, setValue] = useState('');
+    return (
+      <>
+        <Input
+          {...args}
+          value={value}
+          onInput={(e) => {
+            e.preventDefault();
+            args.onInput(e);
+            if (/^[a-zA-Z]*$/.test(e.target.value)) {
+              setValue(e.target.value);
+            }
+          }}
+        />
+      </>
+    );
+  },
+};
+
 export const WithSuggestionItem: Story = {
   name: 'with SuggestionItem',
   args: {