fix(Input): Added htmlSize prop to set native size attribute

.changeset/shaggy-hornets-enjoy.md

@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': minor
+---
+
+Added `htmlSize` prop to the `Input` component which handles the native `size` attribute in `<input>`.

apps/website/src/pages/docs/input.mdx

@@ -30,6 +30,8 @@ There are three different sizes, which can be specified using the `size` prop.
   <AllExamples.InputSizesExample client:load />
 </LiveExample>
 
+Use the `htmlSize` prop for setting the native `size` attribute of the `<input>` element
+
 ### Status
 
 Status messages are sometimes required for bringing warnings or errors to the user’s attention. For example, required fields that are left empty, spelling mistakes, or to notify a user the username they have entered is available. Note that the status is conveyed differently when [inline](#inline) styling is applied.

packages/itwinui-react/src/core/Input/Input.test.tsx

@@ -24,6 +24,12 @@ it('should render disabled component', () => {
   );
 });
 
+it('should render with size prop using htmlSize', () => {
+  const { container } = render(<Input htmlSize='10' />);
+  assertBaseElement(container);
+  expect((container.querySelector('input') as HTMLInputElement).size).toBe(10);
+});
+
 it('should take class and style', () => {
   const { container } = render(
     <Input className='my-class' style={{ width: 50 }} />,

packages/itwinui-react/src/core/Input/Input.tsx

@@ -12,6 +12,11 @@ export type InputProps = {
    * Modify size of the input.
    */
   size?: 'small' | 'large';
+  /**
+   * Modify the native `size` attribute of the `<input>` element.
+   * The `width` or `inline-size` property must be unset in order to use this prop.
+   */
+  htmlSize?: number;
 };
 
 /**
@@ -22,7 +27,7 @@ export type InputProps = {
  * <Input size='small' />
  */
 export const Input = React.forwardRef((props, ref) => {
-  const { size, className, ...rest } = props;
+  const { size, htmlSize, className, ...rest } = props;
   const inputRef = React.useRef<HTMLInputElement>(null);
   const refs = useMergedRefs<HTMLInputElement>(inputRef, ref);
 
@@ -31,6 +36,7 @@ export const Input = React.forwardRef((props, ref) => {
       as='input'
       className={cx('iui-input', className)}
       data-iui-size={size}
+      size={htmlSize}
       ref={refs}
       {...rest}
     />