diff --git a/src/apps/dashboard/routes/users/add.tsx b/src/apps/dashboard/routes/users/add.tsx
index ffb8d3dc0..c2ad8df5e 100644
--- a/src/apps/dashboard/routes/users/add.tsx
+++ b/src/apps/dashboard/routes/users/add.tsx
@@ -6,7 +6,7 @@ import globalize from '../../../../lib/globalize';
 import loading from '../../../../components/loading/loading';
 import toast from '../../../../components/toast/toast';
 import SectionTitleContainer from '../../../../elements/SectionTitleContainer';
-import InputElement from '../../../../elements/InputElement';
+import Input from '../../../../elements/emby-input/Input';
 import ButtonElement from '../../../../elements/ButtonElement';
 import AccessContainer from '../../../../components/dashboard/users/AccessContainer';
 import CheckBoxElement from '../../../../elements/CheckBoxElement';
@@ -194,18 +194,18 @@ const UserNew = () => {
 
                 <form className='newUserProfileForm'>
                     <div className='inputContainer'>
-                        <InputElement
+                        <Input
                             type='text'
                             id='txtUsername'
-                            label='LabelName'
-                            options={'required'}
+                            label={globalize.translate('LabelName')}
+                            required
                         />
                     </div>
                     <div className='inputContainer'>
-                        <InputElement
+                        <Input
                             type='password'
                             id='txtPassword'
-                            label='LabelPassword'
+                            label={globalize.translate('LabelPassword')}
                         />
                     </div>
                     <AccessContainer
diff --git a/src/apps/dashboard/routes/users/profile.tsx b/src/apps/dashboard/routes/users/profile.tsx
index 36afb9ca9..984f4b858 100644
--- a/src/apps/dashboard/routes/users/profile.tsx
+++ b/src/apps/dashboard/routes/users/profile.tsx
@@ -7,8 +7,8 @@ import Dashboard from '../../../../utils/dashboard';
 import globalize from '../../../../lib/globalize';
 import ButtonElement from '../../../../elements/ButtonElement';
 import CheckBoxElement from '../../../../elements/CheckBoxElement';
-import InputElement from '../../../../elements/InputElement';
 import LinkButton from '../../../../elements/emby-button/LinkButton';
+import Input from '../../../../elements/emby-input/Input';
 import SectionTitleContainer from '../../../../elements/SectionTitleContainer';
 import SectionTabs from '../../../../components/dashboard/users/SectionTabs';
 import loading from '../../../../components/loading/loading';
@@ -314,11 +314,11 @@ const UserEdit = () => {
                         </div>
                     </div>
                     <div id='fldUserName' className='inputContainer'>
-                        <InputElement
+                        <Input
                             type='text'
                             id='txtUserName'
-                            label='LabelName'
-                            options={'required'}
+                            label={globalize.translate('LabelName')}
+                            required
                         />
                     </div>
                     <div className='selectContainer fldSelectLoginProvider hide'>
@@ -416,11 +416,14 @@ const UserEdit = () => {
                     <br />
                     <div className='verticalSection'>
                         <div className='inputContainer'>
-                            <InputElement
+                            <Input
                                 type='number'
                                 id='txtRemoteClientBitrateLimit'
-                                label='LabelRemoteClientBitrateLimit'
-                                options={'inputMode="decimal" pattern="[0-9]*(.[0-9]+)?" min="{0}" step=".25"'}
+                                label={globalize.translate('LabelRemoteClientBitrateLimit')}
+                                inputMode='decimal'
+                                pattern='[0-9]*(.[0-9]+)?'
+                                min='0'
+                                step='.25'
                             />
                             <div className='fieldDescription'>
                                 {globalize.translate('LabelRemoteClientBitrateLimitHelp')}
@@ -517,11 +520,11 @@ const UserEdit = () => {
                     <br />
                     <div className='verticalSection'>
                         <div className='inputContainer' id='fldLoginAttemptsBeforeLockout'>
-                            <InputElement
+                            <Input
                                 type='number'
                                 id='txtLoginAttemptsBeforeLockout'
-                                label='LabelUserLoginAttemptsBeforeLockout'
-                                options={'min={-1} step={1}'}
+                                label={globalize.translate('LabelUserLoginAttemptsBeforeLockout')}
+                                min={-1} step={1}
                             />
                             <div className='fieldDescription'>
                                 {globalize.translate('OptionLoginAttemptsBeforeLockout')}
@@ -534,11 +537,11 @@ const UserEdit = () => {
                     <br />
                     <div className='verticalSection'>
                         <div className='inputContainer' id='fldMaxActiveSessions'>
-                            <InputElement
+                            <Input
                                 type='number'
                                 id='txtMaxActiveSessions'
-                                label='LabelUserMaxActiveSessions'
-                                options={'min={0} step={1}'}
+                                label={globalize.translate('LabelUserMaxActiveSessions')}
+                                min={0} step={1}
                             />
                             <div className='fieldDescription'>
                                 {globalize.translate('OptionMaxActiveSessions')}
diff --git a/src/apps/stable/routes/quickConnect/index.tsx b/src/apps/stable/routes/quickConnect/index.tsx
index a76488d21..5429be9c8 100644
--- a/src/apps/stable/routes/quickConnect/index.tsx
+++ b/src/apps/stable/routes/quickConnect/index.tsx
@@ -1,10 +1,10 @@
 import { getQuickConnectApi } from '@jellyfin/sdk/lib/utils/api/quick-connect-api';
-import React, { FC, FormEvent, useCallback, useMemo, useState } from 'react';
+import React, { FC, FormEvent, useCallback, useState } from 'react';
 import { Link, useSearchParams } from 'react-router-dom';
 
 import Page from 'components/Page';
 import globalize from 'lib/globalize';
-import InputElement from 'elements/InputElement';
+import Input from 'elements/emby-input/Input';
 import ButtonElement from 'elements/ButtonElement';
 import { useApi } from 'hooks/useApi';
 
@@ -13,14 +13,12 @@ import './quickConnect.scss';
 const QuickConnectPage: FC = () => {
     const { api, user } = useApi();
     const [ searchParams ] = useSearchParams();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const initialValue = useMemo(() => searchParams.get('code') ?? '', []);
-    const [ code, setCode ] = useState(initialValue);
+    const [ code, setCode ] = useState(searchParams.get('code') ?? '');
     const [ error, setError ] = useState<string>();
     const [ success, setSuccess ] = useState(false);
 
-    const onCodeChange = useCallback((value: string) => {
-        setCode(value);
+    const onCodeChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+        setCode(event.currentTarget.value);
     }, []);
 
     const onSubmitCode = useCallback((e: FormEvent<HTMLFormElement>) => {
@@ -90,15 +88,20 @@ const QuickConnectPage: FC = () => {
                             </div>
                         ) : (
                             <>
-                                <InputElement
-                                    containerClassName='inputContainer'
-                                    initialValue={initialValue}
-                                    onChange={onCodeChange}
-                                    id='txtQuickConnectCode'
-                                    label='LabelQuickConnectCode'
-                                    type='text'
-                                    options="inputmode='numeric' pattern='[0-9\s]*' minlength='6' required autocomplete='off'"
-                                />
+                                <div className='inputContainer'>
+                                    <Input
+                                        value={code}
+                                        onChange={onCodeChange}
+                                        id='txtQuickConnectCode'
+                                        label={globalize.translate('LabelQuickConnectCode')}
+                                        type='text'
+                                        inputMode='numeric'
+                                        pattern='[0-9\s]*'
+                                        minLength={6}
+                                        required
+                                        autoComplete='off'
+                                    />
+                                </div>
                                 <ButtonElement
                                     type='submit'
                                     className='raised button-submit block'
diff --git a/src/components/dashboard/users/UserPasswordForm.tsx b/src/components/dashboard/users/UserPasswordForm.tsx
index dd3eec0c5..4202e84b4 100644
--- a/src/components/dashboard/users/UserPasswordForm.tsx
+++ b/src/components/dashboard/users/UserPasswordForm.tsx
@@ -6,7 +6,7 @@ import confirm from '../../confirm/confirm';
 import loading from '../../loading/loading';
 import toast from '../../toast/toast';
 import ButtonElement from '../../../elements/ButtonElement';
-import InputElement from '../../../elements/InputElement';
+import Input from '../../../elements/emby-input/Input';
 
 type IProps = {
     userId: string | null;
@@ -158,27 +158,27 @@ const UserPasswordForm: FunctionComponent<IProps> = ({ userId }: IProps) => {
             >
                 <div className='detailSection'>
                     <div id='fldCurrentPassword' className='inputContainer hide'>
-                        <InputElement
+                        <Input
                             type='password'
                             id='txtCurrentPassword'
-                            label='LabelCurrentPassword'
-                            options={'autoComplete="off"'}
+                            label={globalize.translate('LabelCurrentPassword')}
+                            autoComplete='off'
                         />
                     </div>
                     <div className='inputContainer'>
-                        <InputElement
+                        <Input
                             type='password'
                             id='txtNewPassword'
-                            label='LabelNewPassword'
-                            options={'autoComplete="off"'}
+                            label={globalize.translate('LabelNewPassword')}
+                            autoComplete='off'
                         />
                     </div>
                     <div className='inputContainer'>
-                        <InputElement
+                        <Input
                             type='password'
                             id='txtNewPasswordConfirm'
-                            label='LabelNewPasswordConfirm'
-                            options={'autoComplete="off"'}
+                            label={globalize.translate('LabelNewPasswordConfirm')}
+                            autoComplete='off'
                         />
                     </div>
                     <br />
diff --git a/src/elements/InputElement.tsx b/src/elements/InputElement.tsx
deleted file mode 100644
index ae7e757b6..000000000
--- a/src/elements/InputElement.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import React, { type FC, useCallback, useEffect, useMemo, useRef } from 'react';
-
-import globalize from 'lib/globalize';
-
-interface CreateInputElementParams {
-    type?: string
-    id?: string
-    label?: string
-    initialValue?: string
-    options?: string
-}
-
-const createInputElement = ({ type, id, label, initialValue, options }: CreateInputElementParams) => ({
-    __html: `<input
-        is="emby-input"
-        type="${type}"
-        id="${id}"
-        label="${label}"
-        value="${initialValue}"
-        ${options}
-    />`
-});
-
-type InputElementProps = {
-    containerClassName?: string
-    onChange?: (value: string) => void
-} & CreateInputElementParams;
-
-const InputElement: FC<InputElementProps> = ({
-    containerClassName,
-    initialValue,
-    onChange = () => { /* no-op */ },
-    type,
-    id,
-    label,
-    options = ''
-}) => {
-    const container = useRef<HTMLDivElement>(null);
-
-    // NOTE: We need to memoize the input html because any re-render will break the webcomponent
-    const inputHtml = useMemo(() => (
-        createInputElement({
-            type,
-            id,
-            label: globalize.translate(label),
-            initialValue,
-            options
-        })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    ), []);
-
-    const onInput = useCallback((e: Event) => {
-        onChange((e.target as HTMLInputElement).value);
-    }, [ onChange ]);
-
-    useEffect(() => {
-        const inputElement = container?.current?.querySelector<HTMLInputElement>('input');
-        inputElement?.addEventListener('input', onInput);
-
-        return () => {
-            inputElement?.removeEventListener('input', onInput);
-        };
-    }, [ container, onInput ]);
-
-    return (
-        <div
-            ref={container}
-            className={containerClassName}
-            dangerouslySetInnerHTML={inputHtml}
-        />
-    );
-};
-
-export default InputElement;