diff --git a/web/src/admin/admin-settings/AdminSettingsForm.ts b/web/src/admin/admin-settings/AdminSettingsForm.ts
index 42cd8bc250..3aeaae4114 100644
--- a/web/src/admin/admin-settings/AdminSettingsForm.ts
+++ b/web/src/admin/admin-settings/AdminSettingsForm.ts
@@ -72,7 +72,7 @@ export class AdminSettingsForm extends Form<SettingsRequest> {
                 name="avatars"
                 label=${msg("Avatars")}
                 value="${ifDefined(this._settings?.avatars)}"
-                inputHint="code"
+                input-hint="code"
                 .bighelp=${html`
                     <p class="pf-c-form__helper-text">
                         ${msg(
@@ -159,7 +159,7 @@ export class AdminSettingsForm extends Form<SettingsRequest> {
             <ak-text-input
                 name="eventRetention"
                 label=${msg("Event retention")}
-                inputHint="code"
+                input-hint="code"
                 required
                 value="${ifDefined(this._settings?.eventRetention)}"
                 .bighelp=${html`<p class="pf-c-form__helper-text">
@@ -237,7 +237,7 @@ export class AdminSettingsForm extends Form<SettingsRequest> {
             <ak-text-input
                 name="defaultTokenDuration"
                 label=${msg("Default token duration")}
-                inputHint="code"
+                input-hint="code"
                 required
                 value="${ifDefined(this._settings?.defaultTokenDuration)}"
                 .bighelp=${html`<p class="pf-c-form__helper-text">
diff --git a/web/src/admin/applications/ApplicationForm.ts b/web/src/admin/applications/ApplicationForm.ts
index 00d77fcf58..f3ae84ff91 100644
--- a/web/src/admin/applications/ApplicationForm.ts
+++ b/web/src/admin/applications/ApplicationForm.ts
@@ -136,7 +136,7 @@ export class ApplicationForm extends WithCapabilitiesConfig(ModelForm<Applicatio
                 label=${msg("Slug")}
                 required
                 help=${msg("Internal application name used in URLs.")}
-                inputHint="code"
+                input-hint="code"
             ></ak-text-input>
             <ak-text-input
                 name="group"
@@ -145,7 +145,7 @@ export class ApplicationForm extends WithCapabilitiesConfig(ModelForm<Applicatio
                 help=${msg(
                     "Optionally enter a group name. Applications with identical groups are shown grouped together.",
                 )}
-                inputHint="code"
+                input-hint="code"
             ></ak-text-input>
             <ak-provider-search-input
                 name="provider"
@@ -186,7 +186,7 @@ export class ApplicationForm extends WithCapabilitiesConfig(ModelForm<Applicatio
                         help=${msg(
                             "If left empty, authentik will try to extract the launch URL based on the selected provider.",
                         )}
-                        inputHint="code"
+                        input-hint="code"
                     ></ak-text-input>
                     <ak-switch-input
                         name="openInNewTab"
diff --git a/web/src/admin/applications/wizard/steps/ak-application-wizard-application-step.ts b/web/src/admin/applications/wizard/steps/ak-application-wizard-application-step.ts
index d4d10a9aac..5c727ce4a2 100644
--- a/web/src/admin/applications/wizard/steps/ak-application-wizard-application-step.ts
+++ b/web/src/admin/applications/wizard/steps/ak-application-wizard-application-step.ts
@@ -128,7 +128,7 @@ export class ApplicationWizardApplicationStep extends ApplicationWizardStep {
                     ?invalid=${errors.slug ?? this.errors.has("slug")}
                     .errorMessages=${this.errorMessages("slug")}
                     help=${msg("Internal application name used in URLs.")}
-                    inputHint="code"
+                    input-hint="code"
                 ></ak-slug-input>
                 <ak-text-input
                     name="group"
@@ -138,7 +138,7 @@ export class ApplicationWizardApplicationStep extends ApplicationWizardStep {
                     help=${msg(
                         "Optionally enter a group name. Applications with identical groups are shown grouped together.",
                     )}
-                    inputHint="code"
+                    input-hint="code"
                 ></ak-text-input>
                 <ak-radio-input
                     label=${msg("Policy engine mode")}
@@ -161,7 +161,7 @@ export class ApplicationWizardApplicationStep extends ApplicationWizardStep {
                             help=${msg(
                                 "If left empty, authentik will try to extract the launch URL based on the selected provider.",
                             )}
-                            inputHint="code"
+                            input-hint="code"
                         ></ak-text-input>
                         <ak-switch-input
                             name="openInNewTab"
diff --git a/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-rac.ts b/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-rac.ts
index ec67edba86..f9f3fa50d4 100644
--- a/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-rac.ts
+++ b/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-rac.ts
@@ -57,7 +57,7 @@ export class ApplicationWizardRACProviderForm extends ApplicationWizardProviderF
                     help=${msg(
                         "Determines how long a session lasts before being disconnected and requiring re-authorization.",
                     )}
-                    inputHint="code"
+                    input-hint="code"
                 ></ak-text-input>
 
                 <ak-form-group .expanded=${true}>
diff --git a/web/src/admin/providers/ldap/LDAPProviderFormForm.ts b/web/src/admin/providers/ldap/LDAPProviderFormForm.ts
index 666c42fb62..41d8765110 100644
--- a/web/src/admin/providers/ldap/LDAPProviderFormForm.ts
+++ b/web/src/admin/providers/ldap/LDAPProviderFormForm.ts
@@ -127,7 +127,7 @@ export function renderForm(
                     label=${msg("Base DN")}
                     required
                     value="${provider?.baseDn ?? "DC=ldap,DC=goauthentik,DC=io"}"
-                    inputHint="code"
+                    input-hint="code"
                     .errorMessages=${errors?.baseDn ?? []}
                     help=${msg(
                         "LDAP DN under which bind requests and search requests can be made.",
@@ -154,7 +154,7 @@ export function renderForm(
                     value="${provider?.tlsServerName ?? ""}"
                     .errorMessages=${errors?.tlsServerName ?? []}
                     help=${tlsServerNameHelp}
-                    inputHint="code"
+                    input-hint="code"
                 ></ak-text-input>
 
                 <ak-number-input
diff --git a/web/src/admin/providers/oauth2/OAuth2ProviderFormForm.ts b/web/src/admin/providers/oauth2/OAuth2ProviderFormForm.ts
index d3ce878210..dda7a5bbee 100644
--- a/web/src/admin/providers/oauth2/OAuth2ProviderFormForm.ts
+++ b/web/src/admin/providers/oauth2/OAuth2ProviderFormForm.ts
@@ -163,14 +163,14 @@ export function renderForm(
                     label=${msg("Client ID")}
                     value="${provider?.clientId ?? randomString(40, ascii_letters + digits)}"
                     required
-                    inputHint="code"
+                    input-hint="code"
                 >
                 </ak-text-input>
                 <ak-text-input
                     name="clientSecret"
                     label=${msg("Client Secret")}
                     value="${provider?.clientSecret ?? randomString(128, ascii_letters + digits)}"
-                    inputHint="code"
+                    input-hint="code"
                     ?hidden=${!showClientSecret}
                 >
                 </ak-text-input>
@@ -252,7 +252,7 @@ export function renderForm(
                 <ak-text-input
                     name="accessCodeValidity"
                     label=${msg("Access code validity")}
-                    inputHint="code"
+                    input-hint="code"
                     required
                     value="${provider?.accessCodeValidity ?? "minutes=1"}"
                     .bighelp=${html`<p class="pf-c-form__helper-text">
@@ -265,7 +265,7 @@ export function renderForm(
                     name="accessTokenValidity"
                     label=${msg("Access Token validity")}
                     value="${provider?.accessTokenValidity ?? "minutes=5"}"
-                    inputHint="code"
+                    input-hint="code"
                     required
                     .bighelp=${html` <p class="pf-c-form__helper-text">
                             ${msg("Configure how long access tokens are valid for.")}
@@ -278,7 +278,7 @@ export function renderForm(
                     name="refreshTokenValidity"
                     label=${msg("Refresh Token validity")}
                     value="${provider?.refreshTokenValidity ?? "days=30"}"
-                    inputHint="code"
+                    input-hint="code"
                     ?required=${true}
                     .bighelp=${html` <p class="pf-c-form__helper-text">
                             ${msg("Configure how long refresh tokens are valid for.")}
diff --git a/web/src/admin/providers/proxy/ProxyProviderFormForm.ts b/web/src/admin/providers/proxy/ProxyProviderFormForm.ts
index 2bfa8794d1..df31de7509 100644
--- a/web/src/admin/providers/proxy/ProxyProviderFormForm.ts
+++ b/web/src/admin/providers/proxy/ProxyProviderFormForm.ts
@@ -48,7 +48,7 @@ function renderHttpBasic(provider: Partial<ProxyProvider>) {
             help=${msg(
                 "User/Group Attribute used for the user part of the HTTP-Basic Header. If not set, the user's Email address is used.",
             )}
-            inputHint="code"
+            input-hint="code"
         >
         </ak-text-input>
 
@@ -57,7 +57,7 @@ function renderHttpBasic(provider: Partial<ProxyProvider>) {
             label=${msg("HTTP-Basic Password Key")}
             value="${ifDefined(provider?.basicAuthPasswordAttribute)}"
             help=${msg("User/Group Attribute used for the password part of the HTTP-Basic Header.")}
-            inputHint="code"
+            input-hint="code"
         >
         </ak-text-input>`;
 }
@@ -90,7 +90,7 @@ function renderProxySettings(provider: Partial<ProxyProvider>, errors?: Validati
             help=${msg(
                 "The external URL you'll access the application at. Include any non-standard port.",
             )}
-            inputHint="code"
+            input-hint="code"
         ></ak-text-input>
         <ak-text-input
             name="internalHost"
@@ -99,7 +99,7 @@ function renderProxySettings(provider: Partial<ProxyProvider>, errors?: Validati
             required
             .errorMessages=${errors?.internalHost ?? []}
             help=${msg("Upstream host that the requests are forwarded to.")}
-            inputHint="code"
+            input-hint="code"
         ></ak-text-input>
 
         <ak-switch-input
@@ -126,7 +126,7 @@ function renderForwardSingleSettings(provider: Partial<ProxyProvider>, errors?:
             help=${msg(
                 "The external URL you'll access the application at. Include any non-standard port.",
             )}
-            inputHint="code"
+            input-hint="code"
         ></ak-text-input>`;
 }
 
@@ -225,7 +225,7 @@ export function renderForm(
             .errorMessages=${errors?.accessTokenValidity ?? []}
             required
             .help=${msg("Configure how long tokens are valid for.")}
-            inputHint="code"
+            input-hint="code"
         ></ak-text-input>
 
         <ak-form-group>
diff --git a/web/src/admin/providers/radius/RadiusProviderFormForm.ts b/web/src/admin/providers/radius/RadiusProviderFormForm.ts
index cd2a6168a5..ba6f9f17bc 100644
--- a/web/src/admin/providers/radius/RadiusProviderFormForm.ts
+++ b/web/src/admin/providers/radius/RadiusProviderFormForm.ts
@@ -80,7 +80,7 @@ export function renderForm(
                     .errorMessages=${errors?.sharedSecret ?? []}
                     value=${provider?.sharedSecret ?? randomString(128, ascii_letters + digits)}
                     required
-                    inputHint="code"
+                    input-hint="code"
                 ></ak-text-input>
                 <ak-text-input
                     name="clientNetworks"
@@ -89,7 +89,7 @@ export function renderForm(
                     .errorMessages=${errors?.clientNetworks ?? []}
                     required
                     help=${clientNetworksHelp}
-                    inputHint="code"
+                    input-hint="code"
                 ></ak-text-input>
                 <ak-form-element-horizontal
                     label=${msg("Property mappings")}
diff --git a/web/src/admin/providers/scim/SCIMProviderFormForm.ts b/web/src/admin/providers/scim/SCIMProviderFormForm.ts
index bd1648f758..6320576ef7 100644
--- a/web/src/admin/providers/scim/SCIMProviderFormForm.ts
+++ b/web/src/admin/providers/scim/SCIMProviderFormForm.ts
@@ -40,7 +40,7 @@ export function renderForm(provider?: Partial<SCIMProvider>, errors: ValidationE
                     .errorMessages=${errors?.url ?? []}
                     required
                     help=${msg("SCIM base url, usually ends in /v2.")}
-                    inputHint="code"
+                    input-hint="code"
                 ></ak-text-input>
 
                 <ak-switch-input
@@ -59,7 +59,7 @@ export function renderForm(provider?: Partial<SCIMProvider>, errors: ValidationE
                     help=${msg(
                         "Token to authenticate with. Currently only bearer authentication is supported.",
                     )}
-                    inputHint="code"
+                    input-hint="code"
                 ></ak-text-input>
                 <ak-radio-input
                     name="compatibilityMode"
diff --git a/web/src/components/HorizontalLightComponent.ts b/web/src/components/HorizontalLightComponent.ts
index 61f9995a41..2758380997 100644
--- a/web/src/components/HorizontalLightComponent.ts
+++ b/web/src/components/HorizontalLightComponent.ts
@@ -18,13 +18,13 @@ export class HorizontalLightComponent<T> extends AKElement {
         return this;
     }
 
-    @property({ type: String })
+    @property({ type: String, reflect: true })
     name!: string;
 
     @property({ type: String })
     label = "";
 
-    @property({ type: Boolean })
+    @property({ type: Boolean, reflect: true })
     required = false;
 
     @property({ type: String })
@@ -33,10 +33,10 @@ export class HorizontalLightComponent<T> extends AKElement {
     @property({ type: Object })
     bighelp?: TemplateResult | TemplateResult[];
 
-    @property({ type: Boolean })
+    @property({ type: Boolean, reflect: true })
     hidden = false;
 
-    @property({ type: Boolean })
+    @property({ type: Boolean, reflect: true })
     invalid = false;
 
     @property({ attribute: false })
@@ -45,7 +45,7 @@ export class HorizontalLightComponent<T> extends AKElement {
     @property({ attribute: false })
     value?: T;
 
-    @property({ type: String })
+    @property({ type: String, attribute: "input-hint" })
     inputHint = "";
 
     renderControl() {