diff --git a/web/src/admin/applications/wizard/oauth/TypeOAuthCodeApplicationWizardPage.ts b/web/src/admin/applications/wizard/oauth/TypeOAuthCodeApplicationWizardPage.ts
index 15ded0e83..9ba7bcf8b 100644
--- a/web/src/admin/applications/wizard/oauth/TypeOAuthCodeApplicationWizardPage.ts
+++ b/web/src/admin/applications/wizard/oauth/TypeOAuthCodeApplicationWizardPage.ts
@@ -62,8 +62,8 @@ export class TypeOAuthCodeApplicationWizardPage extends WizardFormPage {
                     .renderElement=${(flow: Flow): string => {
                         return flow.name;
                     }}
-                    .renderDescription=${(flow: Flow): string => {
-                        return flow.slug;
+                    .renderDescription=${(flow: Flow): TemplateResult => {
+                        return html`${flow.slug}`;
                     }}
                     .value=${(flow: Flow | undefined): string | undefined => {
                         return flow?.pk;
diff --git a/web/src/admin/blueprints/BlueprintForm.ts b/web/src/admin/blueprints/BlueprintForm.ts
index 3c9520cdb..867458631 100644
--- a/web/src/admin/blueprints/BlueprintForm.ts
+++ b/web/src/admin/blueprints/BlueprintForm.ts
@@ -2,6 +2,7 @@ import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { docLink } from "@goauthentik/common/global";
 import { first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/CodeMirror";
+import "@goauthentik/elements/SearchSelect";
 import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
@@ -12,12 +13,11 @@ import { t } from "@lingui/macro";
 import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
-import { until } from "lit/directives/until.js";
 
 import PFContent from "@patternfly/patternfly/components/Content/content.css";
 import PFToggleGroup from "@patternfly/patternfly/components/ToggleGroup/toggle-group.css";
 
-import { BlueprintInstance, ManagedApi } from "@goauthentik/api";
+import { BlueprintFile, BlueprintInstance, ManagedApi } from "@goauthentik/api";
 
 enum blueprintSource {
     local,
@@ -133,30 +133,36 @@ export class BlueprintForm extends ModelForm<BlueprintInstance, string> {
                 <div class="pf-c-card__footer">
                     ${this.source === blueprintSource.local
                         ? html`<ak-form-element-horizontal label=${t`Path`} name="path">
-                              <select class="pf-c-form-control">
-                                  ${until(
-                                      new ManagedApi(DEFAULT_CONFIG)
-                                          .managedBlueprintsAvailableList()
-                                          .then((files) => {
-                                              return files.map((file) => {
-                                                  let name = file.path;
-                                                  if (file.meta && file.meta.name) {
-                                                      name = `${name} (${file.meta.name})`;
-                                                  }
-                                                  const selected =
-                                                      file.path === this.instance?.path;
-                                                  return html`<option
-                                                      ?selected=${selected}
-                                                      value=${file.path}
-                                                  >
-                                                      ${name}
-                                                  </option>`;
-                                              });
-                                          }),
-                                      html`<option>${t`Loading...`}</option>`,
-                                  )}
-                              </select></ak-form-element-horizontal
-                          >`
+                              <ak-search-select
+                                  .fetchObjects=${async (
+                                      query?: string,
+                                  ): Promise<BlueprintFile[]> => {
+                                      const items = await new ManagedApi(
+                                          DEFAULT_CONFIG,
+                                      ).managedBlueprintsAvailableList();
+                                      return items.filter((item) =>
+                                          query ? item.path.includes(query) : true,
+                                      );
+                                  }}
+                                  .renderElement=${(item: BlueprintFile): string => {
+                                      const name = item.path;
+                                      if (item.meta && item.meta.name) {
+                                          return `${name} (${item.meta.name})`;
+                                      }
+                                      return name;
+                                  }}
+                                  .value=${(
+                                      item: BlueprintFile | undefined,
+                                  ): string | undefined => {
+                                      return item?.path;
+                                  }}
+                                  .selected=${(item: BlueprintFile): boolean => {
+                                      return this.instance?.path === item.path;
+                                  }}
+                                  ?blankable=${true}
+                              >
+                              </ak-search-select>
+                          </ak-form-element-horizontal>`
                         : html``}
                     ${this.source === blueprintSource.oci
                         ? html`<ak-form-element-horizontal label=${t`URL`} name="path">
diff --git a/web/src/admin/policies/event_matcher/EventMatcherPolicyForm.ts b/web/src/admin/policies/event_matcher/EventMatcherPolicyForm.ts
index 120a2a8b2..83f883a02 100644
--- a/web/src/admin/policies/event_matcher/EventMatcherPolicyForm.ts
+++ b/web/src/admin/policies/event_matcher/EventMatcherPolicyForm.ts
@@ -1,5 +1,6 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { first } from "@goauthentik/common/utils";
+import "@goauthentik/elements/SearchSelect";
 import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
@@ -11,7 +12,7 @@ import { customElement } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { until } from "lit/directives/until.js";
 
-import { AdminApi, EventMatcherPolicy, EventsApi, PoliciesApi } from "@goauthentik/api";
+import { AdminApi, EventMatcherPolicy, EventsApi, PoliciesApi, TypeCreate } from "@goauthentik/api";
 
 @customElement("ak-policy-event-matcher-form")
 export class EventMatcherPolicyForm extends ModelForm<EventMatcherPolicy, string> {
@@ -72,27 +73,27 @@ export class EventMatcherPolicyForm extends ModelForm<EventMatcherPolicy, string
                 <span slot="header"> ${t`Policy-specific settings`} </span>
                 <div slot="body" class="pf-c-form">
                     <ak-form-element-horizontal label=${t`Action`} name="action">
-                        <select class="pf-c-form-control">
-                            <option value="" ?selected=${this.instance?.action === undefined}>
-                                ---------
-                            </option>
-                            ${until(
-                                new EventsApi(DEFAULT_CONFIG)
-                                    .eventsEventsActionsList()
-                                    .then((actions) => {
-                                        return actions.map((action) => {
-                                            return html`<option
-                                                value=${action.component}
-                                                ?selected=${this.instance?.action ===
-                                                action.component}
-                                            >
-                                                ${action.name}
-                                            </option>`;
-                                        });
-                                    }),
-                                html`<option>${t`Loading...`}</option>`,
-                            )}
-                        </select>
+                        <ak-search-select
+                            .fetchObjects=${async (query?: string): Promise<TypeCreate[]> => {
+                                const items = await new EventsApi(
+                                    DEFAULT_CONFIG,
+                                ).eventsEventsActionsList();
+                                return items.filter((item) =>
+                                    query ? item.name.includes(query) : true,
+                                );
+                            }}
+                            .renderElement=${(item: TypeCreate): string => {
+                                return item.name;
+                            }}
+                            .value=${(item: TypeCreate | undefined): string | undefined => {
+                                return item?.component;
+                            }}
+                            .selected=${(item: TypeCreate): boolean => {
+                                return this.instance?.action === item.component;
+                            }}
+                            ?blankable=${true}
+                        >
+                        </ak-search-select>
                         <p class="pf-c-form__helper-text">
                             ${t`Match created events with this action type. When left empty, all action types will be matched.`}
                         </p>
diff --git a/web/src/admin/providers/ldap/LDAPProviderForm.ts b/web/src/admin/providers/ldap/LDAPProviderForm.ts
index 945eb9dec..da9c7fd6b 100644
--- a/web/src/admin/providers/ldap/LDAPProviderForm.ts
+++ b/web/src/admin/providers/ldap/LDAPProviderForm.ts
@@ -18,8 +18,10 @@ import {
     CoreGroupsListRequest,
     CryptoApi,
     CryptoCertificatekeypairsListRequest,
+    Flow,
     FlowsApi,
     FlowsInstancesListDesignationEnum,
+    FlowsInstancesListRequest,
     Group,
     LDAPAPIAccessMode,
     LDAPProvider,
@@ -71,32 +73,47 @@ export class LDAPProviderFormPage extends ModelForm<LDAPProvider, number> {
                 ?required=${true}
                 name="authorizationFlow"
             >
-                <select class="pf-c-form-control">
-                    ${until(
-                        tenant().then((t) => {
-                            return new FlowsApi(DEFAULT_CONFIG)
-                                .flowsInstancesList({
-                                    ordering: "slug",
-                                    designation: FlowsInstancesListDesignationEnum.Authentication,
-                                })
-                                .then((flows) => {
-                                    return flows.results.map((flow) => {
-                                        let selected = flow.pk === t.flowAuthentication;
-                                        if (this.instance?.authorizationFlow === flow.pk) {
-                                            selected = true;
-                                        }
-                                        return html`<option
-                                            value=${ifDefined(flow.pk)}
-                                            ?selected=${selected}
-                                        >
-                                            ${flow.name} (${flow.slug})
-                                        </option>`;
-                                    });
-                                });
-                        }),
-                        html`<option>${t`Loading...`}</option>`,
-                    )}
-                </select>
+                ${until(
+                    tenant().then((t) => {
+                        return html`
+                            <ak-search-select
+                                .fetchObjects=${async (query?: string): Promise<Flow[]> => {
+                                    const args: FlowsInstancesListRequest = {
+                                        ordering: "slug",
+                                        designation:
+                                            FlowsInstancesListDesignationEnum.Authentication,
+                                    };
+                                    if (query !== undefined) {
+                                        args.search = query;
+                                    }
+                                    const flows = await new FlowsApi(
+                                        DEFAULT_CONFIG,
+                                    ).flowsInstancesList(args);
+                                    return flows.results;
+                                }}
+                                .renderElement=${(flow: Flow): string => {
+                                    return flow.name;
+                                }}
+                                .renderDescription=${(flow: Flow): TemplateResult => {
+                                    return html`${flow.slug}`;
+                                }}
+                                .value=${(flow: Flow | undefined): string | undefined => {
+                                    return flow?.pk;
+                                }}
+                                .selected=${(flow: Flow): boolean => {
+                                    let selected = flow.pk === t.flowAuthentication;
+                                    if (this.instance?.authorizationFlow === flow.pk) {
+                                        selected = true;
+                                    }
+                                    return selected;
+                                }}
+                                ?blankable=${true}
+                            >
+                            </ak-search-select>
+                        `;
+                    }),
+                    html`<option>${t`Loading...`}</option>`,
+                )}
                 <p class="pf-c-form__helper-text">
                     ${t`Flow used for users to authenticate. Currently only identification and password stages are supported.`}
                 </p>
diff --git a/web/src/admin/providers/oauth2/OAuth2ProviderForm.ts b/web/src/admin/providers/oauth2/OAuth2ProviderForm.ts
index 0d565067e..af2e790c8 100644
--- a/web/src/admin/providers/oauth2/OAuth2ProviderForm.ts
+++ b/web/src/admin/providers/oauth2/OAuth2ProviderForm.ts
@@ -97,8 +97,8 @@ export class OAuth2ProviderFormPage extends ModelForm<OAuth2Provider, number> {
                     .renderElement=${(flow: Flow): string => {
                         return flow.name;
                     }}
-                    .renderDescription=${(flow: Flow): string => {
-                        return flow.slug;
+                    .renderDescription=${(flow: Flow): TemplateResult => {
+                        return html`${flow.slug}`;
                     }}
                     .value=${(flow: Flow | undefined): string | undefined => {
                         return flow?.pk;
diff --git a/web/src/admin/providers/proxy/ProxyProviderForm.ts b/web/src/admin/providers/proxy/ProxyProviderForm.ts
index 830b60cc8..ab584cd09 100644
--- a/web/src/admin/providers/proxy/ProxyProviderForm.ts
+++ b/web/src/admin/providers/proxy/ProxyProviderForm.ts
@@ -313,8 +313,8 @@ export class ProxyProviderFormPage extends ModelForm<ProxyProvider, number> {
                     .renderElement=${(flow: Flow): string => {
                         return flow.name;
                     }}
-                    .renderDescription=${(flow: Flow): string => {
-                        return flow.slug;
+                    .renderDescription=${(flow: Flow): TemplateResult => {
+                        return html`${flow.slug}`;
                     }}
                     .value=${(flow: Flow | undefined): string | undefined => {
                         return flow?.pk;
diff --git a/web/src/admin/providers/saml/SAMLProviderForm.ts b/web/src/admin/providers/saml/SAMLProviderForm.ts
index 05b75e83c..b4c9aa81c 100644
--- a/web/src/admin/providers/saml/SAMLProviderForm.ts
+++ b/web/src/admin/providers/saml/SAMLProviderForm.ts
@@ -22,7 +22,9 @@ import {
     FlowsInstancesListDesignationEnum,
     FlowsInstancesListRequest,
     PropertymappingsApi,
+    PropertymappingsSamlListRequest,
     ProvidersApi,
+    SAMLPropertyMapping,
     SAMLProvider,
     SignatureAlgorithmEnum,
     SpBindingEnum,
@@ -87,8 +89,8 @@ export class SAMLProviderFormPage extends ModelForm<SAMLProvider, number> {
                     .renderElement=${(flow: Flow): string => {
                         return flow.name;
                     }}
-                    .renderDescription=${(flow: Flow): string => {
-                        return flow.slug;
+                    .renderDescription=${(flow: Flow): TemplateResult => {
+                        return html`${flow.slug}`;
                     }}
                     .value=${(flow: Flow | undefined): string | undefined => {
                         return flow?.pk;
@@ -276,32 +278,35 @@ export class SAMLProviderFormPage extends ModelForm<SAMLProvider, number> {
                         label=${t`NameID Property Mapping`}
                         name="nameIdMapping"
                     >
-                        <select class="pf-c-form-control">
-                            <option
-                                value=""
-                                ?selected=${this.instance?.nameIdMapping === undefined}
-                            >
-                                ---------
-                            </option>
-                            ${until(
-                                new PropertymappingsApi(DEFAULT_CONFIG)
-                                    .propertymappingsSamlList({
-                                        ordering: "saml_name",
-                                    })
-                                    .then((mappings) => {
-                                        return mappings.results.map((mapping) => {
-                                            return html`<option
-                                                value=${ifDefined(mapping.pk)}
-                                                ?selected=${this.instance?.nameIdMapping ===
-                                                mapping.pk}
-                                            >
-                                                ${mapping.name}
-                                            </option>`;
-                                        });
-                                    }),
-                                html`<option>${t`Loading...`}</option>`,
-                            )}
-                        </select>
+                        <ak-search-select
+                            .fetchObjects=${async (
+                                query?: string,
+                            ): Promise<SAMLPropertyMapping[]> => {
+                                const args: PropertymappingsSamlListRequest = {
+                                    ordering: "saml_name",
+                                };
+                                if (query !== undefined) {
+                                    args.search = query;
+                                }
+                                const items = await new PropertymappingsApi(
+                                    DEFAULT_CONFIG,
+                                ).propertymappingsSamlList(args);
+                                return items.results;
+                            }}
+                            .renderElement=${(item: SAMLPropertyMapping): string => {
+                                return item.name;
+                            }}
+                            .value=${(
+                                item: SAMLPropertyMapping | undefined,
+                            ): string | undefined => {
+                                return item?.pk;
+                            }}
+                            .selected=${(item: SAMLPropertyMapping): boolean => {
+                                return this.instance?.nameIdMapping === item.pk;
+                            }}
+                            ?blankable=${true}
+                        >
+                        </ak-search-select>
                         <p class="pf-c-form__helper-text">
                             ${t`Configure how the NameID value will be created. When left empty, the NameIDPolicy of the incoming request will be respected.`}
                         </p>
diff --git a/web/src/admin/providers/saml/SAMLProviderImportForm.ts b/web/src/admin/providers/saml/SAMLProviderImportForm.ts
index d8a948d43..4996d3e2b 100644
--- a/web/src/admin/providers/saml/SAMLProviderImportForm.ts
+++ b/web/src/admin/providers/saml/SAMLProviderImportForm.ts
@@ -62,8 +62,8 @@ export class SAMLProviderImportForm extends Form<SAMLProvider> {
                     .renderElement=${(flow: Flow): string => {
                         return flow.name;
                     }}
-                    .renderDescription=${(flow: Flow): string => {
-                        return flow.slug;
+                    .renderDescription=${(flow: Flow): TemplateResult => {
+                        return html`${flow.slug}`;
                     }}
                     .value=${(flow: Flow | undefined): string | undefined => {
                         return flow?.pk;
diff --git a/web/src/admin/sources/oauth/OAuthSourceForm.ts b/web/src/admin/sources/oauth/OAuthSourceForm.ts
index ae12a151b..b18cfcb72 100644
--- a/web/src/admin/sources/oauth/OAuthSourceForm.ts
+++ b/web/src/admin/sources/oauth/OAuthSourceForm.ts
@@ -2,6 +2,7 @@ import { UserMatchingModeToLabel } from "@goauthentik/admin/sources/oauth/utils"
 import { DEFAULT_CONFIG, config } from "@goauthentik/common/api/config";
 import { first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/CodeMirror";
+import "@goauthentik/elements/SearchSelect";
 import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
@@ -15,8 +16,10 @@ import { until } from "lit/directives/until.js";
 
 import {
     CapabilitiesEnum,
+    Flow,
     FlowsApi,
     FlowsInstancesListDesignationEnum,
+    FlowsInstancesListRequest,
     OAuthSource,
     OAuthSourceRequest,
     ProviderTypeEnum,
@@ -399,42 +402,43 @@ export class OAuthSourceForm extends ModelForm<OAuthSource, string> {
                         ?required=${true}
                         name="authenticationFlow"
                     >
-                        <select class="pf-c-form-control">
-                            <option
-                                value=""
-                                ?selected=${this.instance?.authenticationFlow === undefined}
-                            >
-                                ---------
-                            </option>
-                            ${until(
-                                new FlowsApi(DEFAULT_CONFIG)
-                                    .flowsInstancesList({
-                                        ordering: "slug",
-                                        designation:
-                                            FlowsInstancesListDesignationEnum.Authentication,
-                                    })
-                                    .then((flows) => {
-                                        return flows.results.map((flow) => {
-                                            let selected =
-                                                this.instance?.authenticationFlow === flow.pk;
-                                            if (
-                                                !this.instance?.pk &&
-                                                !this.instance?.authenticationFlow &&
-                                                flow.slug === "default-source-authentication"
-                                            ) {
-                                                selected = true;
-                                            }
-                                            return html`<option
-                                                value=${ifDefined(flow.pk)}
-                                                ?selected=${selected}
-                                            >
-                                                ${flow.name} (${flow.slug})
-                                            </option>`;
-                                        });
-                                    }),
-                                html`<option>${t`Loading...`}</option>`,
-                            )}
-                        </select>
+                        <ak-search-select
+                            .fetchObjects=${async (query?: string): Promise<Flow[]> => {
+                                const args: FlowsInstancesListRequest = {
+                                    ordering: "slug",
+                                    designation: FlowsInstancesListDesignationEnum.Authentication,
+                                };
+                                if (query !== undefined) {
+                                    args.search = query;
+                                }
+                                const flows = await new FlowsApi(DEFAULT_CONFIG).flowsInstancesList(
+                                    args,
+                                );
+                                return flows.results;
+                            }}
+                            .renderElement=${(flow: Flow): string => {
+                                return flow.name;
+                            }}
+                            .renderDescription=${(flow: Flow): TemplateResult => {
+                                return html`${flow.slug}`;
+                            }}
+                            .value=${(flow: Flow | undefined): string | undefined => {
+                                return flow?.pk;
+                            }}
+                            .selected=${(flow: Flow): boolean => {
+                                let selected = this.instance?.authenticationFlow === flow.pk;
+                                if (
+                                    !this.instance?.pk &&
+                                    !this.instance?.authenticationFlow &&
+                                    flow.slug === "default-source-authentication"
+                                ) {
+                                    selected = true;
+                                }
+                                return selected;
+                            }}
+                            ?blankable=${true}
+                        >
+                        </ak-search-select>
                         <p class="pf-c-form__helper-text">
                             ${t`Flow to use when authenticating existing users.`}
                         </p>
@@ -444,41 +448,43 @@ export class OAuthSourceForm extends ModelForm<OAuthSource, string> {
                         ?required=${true}
                         name="enrollmentFlow"
                     >
-                        <select class="pf-c-form-control">
-                            <option
-                                value=""
-                                ?selected=${this.instance?.enrollmentFlow === undefined}
-                            >
-                                ---------
-                            </option>
-                            ${until(
-                                new FlowsApi(DEFAULT_CONFIG)
-                                    .flowsInstancesList({
-                                        ordering: "slug",
-                                        designation: FlowsInstancesListDesignationEnum.Enrollment,
-                                    })
-                                    .then((flows) => {
-                                        return flows.results.map((flow) => {
-                                            let selected =
-                                                this.instance?.enrollmentFlow === flow.pk;
-                                            if (
-                                                !this.instance?.pk &&
-                                                !this.instance?.enrollmentFlow &&
-                                                flow.slug === "default-source-enrollment"
-                                            ) {
-                                                selected = true;
-                                            }
-                                            return html`<option
-                                                value=${ifDefined(flow.pk)}
-                                                ?selected=${selected}
-                                            >
-                                                ${flow.name} (${flow.slug})
-                                            </option>`;
-                                        });
-                                    }),
-                                html`<option>${t`Loading...`}</option>`,
-                            )}
-                        </select>
+                        <ak-search-select
+                            .fetchObjects=${async (query?: string): Promise<Flow[]> => {
+                                const args: FlowsInstancesListRequest = {
+                                    ordering: "slug",
+                                    designation: FlowsInstancesListDesignationEnum.Enrollment,
+                                };
+                                if (query !== undefined) {
+                                    args.search = query;
+                                }
+                                const flows = await new FlowsApi(DEFAULT_CONFIG).flowsInstancesList(
+                                    args,
+                                );
+                                return flows.results;
+                            }}
+                            .renderElement=${(flow: Flow): string => {
+                                return flow.name;
+                            }}
+                            .renderDescription=${(flow: Flow): TemplateResult => {
+                                return html`${flow.slug}`;
+                            }}
+                            .value=${(flow: Flow | undefined): string | undefined => {
+                                return flow?.pk;
+                            }}
+                            .selected=${(flow: Flow): boolean => {
+                                let selected = this.instance?.enrollmentFlow === flow.pk;
+                                if (
+                                    !this.instance?.pk &&
+                                    !this.instance?.enrollmentFlow &&
+                                    flow.slug === "default-source-enrollment"
+                                ) {
+                                    selected = true;
+                                }
+                                return selected;
+                            }}
+                            ?blankable=${true}
+                        >
+                        </ak-search-select>
                         <p class="pf-c-form__helper-text">
                             ${t`Flow to use when enrolling new users.`}
                         </p>
diff --git a/web/src/admin/sources/plex/PlexSourceForm.ts b/web/src/admin/sources/plex/PlexSourceForm.ts
index 6a04ea262..5b83aeb9a 100644
--- a/web/src/admin/sources/plex/PlexSourceForm.ts
+++ b/web/src/admin/sources/plex/PlexSourceForm.ts
@@ -2,6 +2,7 @@ import { UserMatchingModeToLabel } from "@goauthentik/admin/sources/oauth/utils"
 import { DEFAULT_CONFIG, config } from "@goauthentik/common/api/config";
 import { PlexAPIClient, PlexResource, popupCenterScreen } from "@goauthentik/common/helpers/plex";
 import { first, randomString } from "@goauthentik/common/utils";
+import "@goauthentik/elements/SearchSelect";
 import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
@@ -15,8 +16,10 @@ import { until } from "lit/directives/until.js";
 
 import {
     CapabilitiesEnum,
+    Flow,
     FlowsApi,
     FlowsInstancesListDesignationEnum,
+    FlowsInstancesListRequest,
     PlexSource,
     SourcesApi,
     UserMatchingModeEnum,
@@ -328,42 +331,43 @@ export class PlexSourceForm extends ModelForm<PlexSource, string> {
                         ?required=${true}
                         name="authenticationFlow"
                     >
-                        <select class="pf-c-form-control">
-                            <option
-                                value=""
-                                ?selected=${this.instance?.authenticationFlow === undefined}
-                            >
-                                ---------
-                            </option>
-                            ${until(
-                                new FlowsApi(DEFAULT_CONFIG)
-                                    .flowsInstancesList({
-                                        ordering: "slug",
-                                        designation:
-                                            FlowsInstancesListDesignationEnum.Authentication,
-                                    })
-                                    .then((flows) => {
-                                        return flows.results.map((flow) => {
-                                            let selected =
-                                                this.instance?.authenticationFlow === flow.pk;
-                                            if (
-                                                !this.instance?.pk &&
-                                                !this.instance?.authenticationFlow &&
-                                                flow.slug === "default-source-authentication"
-                                            ) {
-                                                selected = true;
-                                            }
-                                            return html`<option
-                                                value=${ifDefined(flow.pk)}
-                                                ?selected=${selected}
-                                            >
-                                                ${flow.name} (${flow.slug})
-                                            </option>`;
-                                        });
-                                    }),
-                                html`<option>${t`Loading...`}</option>`,
-                            )}
-                        </select>
+                        <ak-search-select
+                            .fetchObjects=${async (query?: string): Promise<Flow[]> => {
+                                const args: FlowsInstancesListRequest = {
+                                    ordering: "slug",
+                                    designation: FlowsInstancesListDesignationEnum.Authentication,
+                                };
+                                if (query !== undefined) {
+                                    args.search = query;
+                                }
+                                const flows = await new FlowsApi(DEFAULT_CONFIG).flowsInstancesList(
+                                    args,
+                                );
+                                return flows.results;
+                            }}
+                            .renderElement=${(flow: Flow): string => {
+                                return flow.name;
+                            }}
+                            .renderDescription=${(flow: Flow): TemplateResult => {
+                                return html`${flow.slug}`;
+                            }}
+                            .value=${(flow: Flow | undefined): string | undefined => {
+                                return flow?.pk;
+                            }}
+                            .selected=${(flow: Flow): boolean => {
+                                let selected = this.instance?.enrollmentFlow === flow.pk;
+                                if (
+                                    !this.instance?.pk &&
+                                    !this.instance?.enrollmentFlow &&
+                                    flow.slug === "default-source-authentication"
+                                ) {
+                                    selected = true;
+                                }
+                                return selected;
+                            }}
+                            ?blankable=${true}
+                        >
+                        </ak-search-select>
                         <p class="pf-c-form__helper-text">
                             ${t`Flow to use when authenticating existing users.`}
                         </p>
@@ -373,41 +377,43 @@ export class PlexSourceForm extends ModelForm<PlexSource, string> {
                         ?required=${true}
                         name="enrollmentFlow"
                     >
-                        <select class="pf-c-form-control">
-                            <option
-                                value=""
-                                ?selected=${this.instance?.enrollmentFlow === undefined}
-                            >
-                                ---------
-                            </option>
-                            ${until(
-                                new FlowsApi(DEFAULT_CONFIG)
-                                    .flowsInstancesList({
-                                        ordering: "slug",
-                                        designation: FlowsInstancesListDesignationEnum.Enrollment,
-                                    })
-                                    .then((flows) => {
-                                        return flows.results.map((flow) => {
-                                            let selected =
-                                                this.instance?.enrollmentFlow === flow.pk;
-                                            if (
-                                                !this.instance?.pk &&
-                                                !this.instance?.enrollmentFlow &&
-                                                flow.slug === "default-source-enrollment"
-                                            ) {
-                                                selected = true;
-                                            }
-                                            return html`<option
-                                                value=${ifDefined(flow.pk)}
-                                                ?selected=${selected}
-                                            >
-                                                ${flow.name} (${flow.slug})
-                                            </option>`;
-                                        });
-                                    }),
-                                html`<option>${t`Loading...`}</option>`,
-                            )}
-                        </select>
+                        <ak-search-select
+                            .fetchObjects=${async (query?: string): Promise<Flow[]> => {
+                                const args: FlowsInstancesListRequest = {
+                                    ordering: "slug",
+                                    designation: FlowsInstancesListDesignationEnum.Enrollment,
+                                };
+                                if (query !== undefined) {
+                                    args.search = query;
+                                }
+                                const flows = await new FlowsApi(DEFAULT_CONFIG).flowsInstancesList(
+                                    args,
+                                );
+                                return flows.results;
+                            }}
+                            .renderElement=${(flow: Flow): string => {
+                                return flow.name;
+                            }}
+                            .renderDescription=${(flow: Flow): TemplateResult => {
+                                return html`${flow.slug}`;
+                            }}
+                            .value=${(flow: Flow | undefined): string | undefined => {
+                                return flow?.pk;
+                            }}
+                            .selected=${(flow: Flow): boolean => {
+                                let selected = this.instance?.enrollmentFlow === flow.pk;
+                                if (
+                                    !this.instance?.pk &&
+                                    !this.instance?.enrollmentFlow &&
+                                    flow.slug === "default-source-enrollment"
+                                ) {
+                                    selected = true;
+                                }
+                                return selected;
+                            }}
+                            ?blankable=${true}
+                        >
+                        </ak-search-select>
                         <p class="pf-c-form__helper-text">
                             ${t`Flow to use when enrolling new users.`}
                         </p>
diff --git a/web/src/admin/sources/saml/SAMLSourceForm.ts b/web/src/admin/sources/saml/SAMLSourceForm.ts
index cf41a1313..3447f3e46 100644
--- a/web/src/admin/sources/saml/SAMLSourceForm.ts
+++ b/web/src/admin/sources/saml/SAMLSourceForm.ts
@@ -498,8 +498,8 @@ export class SAMLSourceForm extends ModelForm<SAMLSource, string> {
                             .renderElement=${(flow: Flow): string => {
                                 return flow.name;
                             }}
-                            .renderDescription=${(flow: Flow): string => {
-                                return flow.slug;
+                            .renderDescription=${(flow: Flow): TemplateResult => {
+                                return html`${flow.slug}`;
                             }}
                             .value=${(flow: Flow | undefined): string | undefined => {
                                 return flow?.pk;
@@ -542,8 +542,8 @@ export class SAMLSourceForm extends ModelForm<SAMLSource, string> {
                             .renderElement=${(flow: Flow): string => {
                                 return flow.name;
                             }}
-                            .renderDescription=${(flow: Flow): string => {
-                                return flow.slug;
+                            .renderDescription=${(flow: Flow): TemplateResult => {
+                                return html`${flow.slug}`;
                             }}
                             .value=${(flow: Flow | undefined): string | undefined => {
                                 return flow?.pk;
@@ -588,8 +588,8 @@ export class SAMLSourceForm extends ModelForm<SAMLSource, string> {
                             .renderElement=${(flow: Flow): string => {
                                 return flow.name;
                             }}
-                            .renderDescription=${(flow: Flow): string => {
-                                return flow.slug;
+                            .renderDescription=${(flow: Flow): TemplateResult => {
+                                return html`${flow.slug}`;
                             }}
                             .value=${(flow: Flow | undefined): string | undefined => {
                                 return flow?.pk;
diff --git a/web/src/admin/stages/authenticator_duo/AuthenticatorDuoStageForm.ts b/web/src/admin/stages/authenticator_duo/AuthenticatorDuoStageForm.ts
index 9f2d76919..114e4256e 100644
--- a/web/src/admin/stages/authenticator_duo/AuthenticatorDuoStageForm.ts
+++ b/web/src/admin/stages/authenticator_duo/AuthenticatorDuoStageForm.ts
@@ -148,8 +148,8 @@ export class AuthenticatorDuoStageForm extends ModelForm<AuthenticatorDuoStage,
                             .renderElement=${(flow: Flow): string => {
                                 return flow.name;
                             }}
-                            .renderDescription=${(flow: Flow): string => {
-                                return flow.slug;
+                            .renderDescription=${(flow: Flow): TemplateResult => {
+                                return html`${flow.slug}`;
                             }}
                             .value=${(flow: Flow | undefined): string | undefined => {
                                 return flow?.pk;
diff --git a/web/src/admin/stages/authenticator_sms/AuthenticatorSMSStageForm.ts b/web/src/admin/stages/authenticator_sms/AuthenticatorSMSStageForm.ts
index 7c2b86b80..c43741018 100644
--- a/web/src/admin/stages/authenticator_sms/AuthenticatorSMSStageForm.ts
+++ b/web/src/admin/stages/authenticator_sms/AuthenticatorSMSStageForm.ts
@@ -19,7 +19,9 @@ import {
     FlowsApi,
     FlowsInstancesListDesignationEnum,
     FlowsInstancesListRequest,
+    NotificationWebhookMapping,
     PropertymappingsApi,
+    PropertymappingsNotificationListRequest,
     ProviderEnum,
     StagesApi,
 } from "@goauthentik/api";
@@ -160,26 +162,33 @@ export class AuthenticatorSMSStageForm extends ModelForm<AuthenticatorSMSStage,
                 </p>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal label=${t`Mapping`} name="mapping">
-                <select class="pf-c-form-control">
-                    <option value="" ?selected=${this.instance?.mapping === undefined}>
-                        ---------
-                    </option>
-                    ${until(
-                        new PropertymappingsApi(DEFAULT_CONFIG)
-                            .propertymappingsNotificationList({})
-                            .then((mappings) => {
-                                return mappings.results.map((mapping) => {
-                                    return html`<option
-                                        value=${ifDefined(mapping.pk)}
-                                        ?selected=${this.instance?.mapping === mapping.pk}
-                                    >
-                                        ${mapping.name}
-                                    </option>`;
-                                });
-                            }),
-                        html`<option>${t`Loading...`}</option>`,
-                    )}
-                </select>
+                <ak-search-select
+                    .fetchObjects=${async (
+                        query?: string,
+                    ): Promise<NotificationWebhookMapping[]> => {
+                        const args: PropertymappingsNotificationListRequest = {
+                            ordering: "saml_name",
+                        };
+                        if (query !== undefined) {
+                            args.search = query;
+                        }
+                        const items = await new PropertymappingsApi(
+                            DEFAULT_CONFIG,
+                        ).propertymappingsNotificationList(args);
+                        return items.results;
+                    }}
+                    .renderElement=${(item: NotificationWebhookMapping): string => {
+                        return item.name;
+                    }}
+                    .value=${(item: NotificationWebhookMapping | undefined): string | undefined => {
+                        return item?.pk;
+                    }}
+                    .selected=${(item: NotificationWebhookMapping): boolean => {
+                        return this.instance?.mapping === item.pk;
+                    }}
+                    ?blankable=${true}
+                >
+                </ak-search-select>
                 <p class="pf-c-form__helper-text">
                     ${t`Modify the payload sent to the custom provider.`}
                 </p>
@@ -279,8 +288,8 @@ export class AuthenticatorSMSStageForm extends ModelForm<AuthenticatorSMSStage,
                             .renderElement=${(flow: Flow): string => {
                                 return flow.name;
                             }}
-                            .renderDescription=${(flow: Flow): string => {
-                                return flow.slug;
+                            .renderDescription=${(flow: Flow): TemplateResult => {
+                                return html`${flow.slug}`;
                             }}
                             .value=${(flow: Flow | undefined): string | undefined => {
                                 return flow?.pk;
diff --git a/web/src/admin/stages/authenticator_static/AuthenticatorStaticStageForm.ts b/web/src/admin/stages/authenticator_static/AuthenticatorStaticStageForm.ts
index b766f5362..271825585 100644
--- a/web/src/admin/stages/authenticator_static/AuthenticatorStaticStageForm.ts
+++ b/web/src/admin/stages/authenticator_static/AuthenticatorStaticStageForm.ts
@@ -95,8 +95,8 @@ export class AuthenticatorStaticStageForm extends ModelForm<AuthenticatorStaticS
                             .renderElement=${(flow: Flow): string => {
                                 return flow.name;
                             }}
-                            .renderDescription=${(flow: Flow): string => {
-                                return flow.slug;
+                            .renderDescription=${(flow: Flow): TemplateResult => {
+                                return html`${flow.slug}`;
                             }}
                             .value=${(flow: Flow | undefined): string | undefined => {
                                 return flow?.pk;
diff --git a/web/src/admin/stages/authenticator_totp/AuthenticatorTOTPStageForm.ts b/web/src/admin/stages/authenticator_totp/AuthenticatorTOTPStageForm.ts
index d5ea967fc..0f129fd0e 100644
--- a/web/src/admin/stages/authenticator_totp/AuthenticatorTOTPStageForm.ts
+++ b/web/src/admin/stages/authenticator_totp/AuthenticatorTOTPStageForm.ts
@@ -100,8 +100,8 @@ export class AuthenticatorTOTPStageForm extends ModelForm<AuthenticatorTOTPStage
                             .renderElement=${(flow: Flow): string => {
                                 return flow.name;
                             }}
-                            .renderDescription=${(flow: Flow): string => {
-                                return flow.slug;
+                            .renderDescription=${(flow: Flow): TemplateResult => {
+                                return html`${flow.slug}`;
                             }}
                             .value=${(flow: Flow | undefined): string | undefined => {
                                 return flow?.pk;
diff --git a/web/src/admin/stages/authenticator_webauthn/AuthenticateWebAuthnStageForm.ts b/web/src/admin/stages/authenticator_webauthn/AuthenticateWebAuthnStageForm.ts
index f07dbc849..cc8d9c3cd 100644
--- a/web/src/admin/stages/authenticator_webauthn/AuthenticateWebAuthnStageForm.ts
+++ b/web/src/admin/stages/authenticator_webauthn/AuthenticateWebAuthnStageForm.ts
@@ -174,8 +174,8 @@ export class AuthenticateWebAuthnStageForm extends ModelForm<AuthenticateWebAuth
                             .renderElement=${(flow: Flow): string => {
                                 return flow.name;
                             }}
-                            .renderDescription=${(flow: Flow): string => {
-                                return flow.slug;
+                            .renderDescription=${(flow: Flow): TemplateResult => {
+                                return html`${flow.slug}`;
                             }}
                             .value=${(flow: Flow | undefined): string | undefined => {
                                 return flow?.pk;
diff --git a/web/src/admin/stages/identification/IdentificationStageForm.ts b/web/src/admin/stages/identification/IdentificationStageForm.ts
index cc9748f78..7110dc304 100644
--- a/web/src/admin/stages/identification/IdentificationStageForm.ts
+++ b/web/src/admin/stages/identification/IdentificationStageForm.ts
@@ -1,5 +1,6 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { first } from "@goauthentik/common/utils";
+import { first, groupBy } from "@goauthentik/common/utils";
+import "@goauthentik/elements/SearchSelect";
 import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
@@ -12,11 +13,15 @@ import { ifDefined } from "lit/directives/if-defined.js";
 import { until } from "lit/directives/until.js";
 
 import {
+    Flow,
     FlowsApi,
     FlowsInstancesListDesignationEnum,
+    FlowsInstancesListRequest,
     IdentificationStage,
     SourcesApi,
+    Stage,
     StagesApi,
+    StagesPasswordListRequest,
     UserFieldsEnum,
 } from "@goauthentik/api";
 
@@ -102,33 +107,34 @@ export class IdentificationStageForm extends ModelForm<IdentificationStage, stri
                         </p>
                     </ak-form-element-horizontal>
                     <ak-form-element-horizontal label=${t`Password stage`} name="passwordStage">
-                        <select class="pf-c-form-control">
-                            <option
-                                value=""
-                                ?selected=${this.instance?.passwordStage === undefined}
-                            >
-                                ---------
-                            </option>
-                            ${until(
-                                new StagesApi(DEFAULT_CONFIG)
-                                    .stagesPasswordList({
-                                        ordering: "name",
-                                    })
-                                    .then((stages) => {
-                                        return stages.results.map((stage) => {
-                                            const selected =
-                                                this.instance?.passwordStage === stage.pk;
-                                            return html`<option
-                                                value=${ifDefined(stage.pk)}
-                                                ?selected=${selected}
-                                            >
-                                                ${stage.name}
-                                            </option>`;
-                                        });
-                                    }),
-                                html`<option>${t`Loading...`}</option>`,
-                            )}
-                        </select>
+                        <ak-search-select
+                            .fetchObjects=${async (query?: string): Promise<Stage[]> => {
+                                const args: StagesPasswordListRequest = {
+                                    ordering: "name",
+                                };
+                                if (query !== undefined) {
+                                    args.search = query;
+                                }
+                                const stages = await new StagesApi(
+                                    DEFAULT_CONFIG,
+                                ).stagesPasswordList(args);
+                                return stages.results;
+                            }}
+                            .groupBy=${(items: Stage[]) => {
+                                return groupBy(items, (stage) => stage.verboseNamePlural);
+                            }}
+                            .renderElement=${(stage: Stage): string => {
+                                return stage.name;
+                            }}
+                            .value=${(stage: Stage | undefined): string | undefined => {
+                                return stage?.pk;
+                            }}
+                            .selected=${(stage: Stage): boolean => {
+                                return stage.pk === this.instance?.passwordStage;
+                            }}
+                            ?blankable=${true}
+                        >
+                        </ak-search-select>
                         <p class="pf-c-form__helper-text">
                             ${t`When selected, a password field is shown on the same page instead of a separate page. This prevents username enumeration attacks.`}
                         </p>
@@ -226,98 +232,103 @@ export class IdentificationStageForm extends ModelForm<IdentificationStage, stri
                         label=${t`Passwordless flow`}
                         name="passwordlessFlow"
                     >
-                        <select class="pf-c-form-control">
-                            <option
-                                value=""
-                                ?selected=${this.instance?.passwordlessFlow === undefined}
-                            >
-                                ---------
-                            </option>
-                            ${until(
-                                new FlowsApi(DEFAULT_CONFIG)
-                                    .flowsInstancesList({
-                                        ordering: "slug",
-                                        designation:
-                                            FlowsInstancesListDesignationEnum.Authentication,
-                                    })
-                                    .then((flows) => {
-                                        return flows.results.map((flow) => {
-                                            const selected =
-                                                this.instance?.passwordlessFlow === flow.pk;
-                                            return html`<option
-                                                value=${ifDefined(flow.pk)}
-                                                ?selected=${selected}
-                                            >
-                                                ${flow.name} (${flow.slug})
-                                            </option>`;
-                                        });
-                                    }),
-                                html`<option>${t`Loading...`}</option>`,
-                            )}
-                        </select>
+                        <ak-search-select
+                            .fetchObjects=${async (query?: string): Promise<Flow[]> => {
+                                const args: FlowsInstancesListRequest = {
+                                    ordering: "slug",
+                                    designation: FlowsInstancesListDesignationEnum.Authentication,
+                                };
+                                if (query !== undefined) {
+                                    args.search = query;
+                                }
+                                const flows = await new FlowsApi(DEFAULT_CONFIG).flowsInstancesList(
+                                    args,
+                                );
+                                return flows.results;
+                            }}
+                            .renderElement=${(flow: Flow): string => {
+                                return flow.name;
+                            }}
+                            .renderDescription=${(flow: Flow): TemplateResult => {
+                                return html`${flow.slug}`;
+                            }}
+                            .value=${(flow: Flow | undefined): string | undefined => {
+                                return flow?.pk;
+                            }}
+                            .selected=${(flow: Flow): boolean => {
+                                return this.instance?.passwordlessFlow == flow.pk;
+                            }}
+                            ?blankable=${true}
+                        >
+                        </ak-search-select>
                         <p class="pf-c-form__helper-text">
                             ${t`Optional passwordless flow, which is linked at the bottom of the page. When configured, users can use this flow to authenticate with a WebAuthn authenticator, without entering any details.`}
                         </p>
                     </ak-form-element-horizontal>
                     <ak-form-element-horizontal label=${t`Enrollment flow`} name="enrollmentFlow">
-                        <select class="pf-c-form-control">
-                            <option
-                                value=""
-                                ?selected=${this.instance?.enrollmentFlow === undefined}
-                            >
-                                ---------
-                            </option>
-                            ${until(
-                                new FlowsApi(DEFAULT_CONFIG)
-                                    .flowsInstancesList({
-                                        ordering: "slug",
-                                        designation: FlowsInstancesListDesignationEnum.Enrollment,
-                                    })
-                                    .then((flows) => {
-                                        return flows.results.map((flow) => {
-                                            const selected =
-                                                this.instance?.enrollmentFlow === flow.pk;
-                                            return html`<option
-                                                value=${ifDefined(flow.pk)}
-                                                ?selected=${selected}
-                                            >
-                                                ${flow.name} (${flow.slug})
-                                            </option>`;
-                                        });
-                                    }),
-                                html`<option>${t`Loading...`}</option>`,
-                            )}
-                        </select>
+                        <ak-search-select
+                            .fetchObjects=${async (query?: string): Promise<Flow[]> => {
+                                const args: FlowsInstancesListRequest = {
+                                    ordering: "slug",
+                                    designation: FlowsInstancesListDesignationEnum.Enrollment,
+                                };
+                                if (query !== undefined) {
+                                    args.search = query;
+                                }
+                                const flows = await new FlowsApi(DEFAULT_CONFIG).flowsInstancesList(
+                                    args,
+                                );
+                                return flows.results;
+                            }}
+                            .renderElement=${(flow: Flow): string => {
+                                return flow.name;
+                            }}
+                            .renderDescription=${(flow: Flow): TemplateResult => {
+                                return html`${flow.slug}`;
+                            }}
+                            .value=${(flow: Flow | undefined): string | undefined => {
+                                return flow?.pk;
+                            }}
+                            .selected=${(flow: Flow): boolean => {
+                                return this.instance?.enrollmentFlow == flow.pk;
+                            }}
+                            ?blankable=${true}
+                        >
+                        </ak-search-select>
                         <p class="pf-c-form__helper-text">
                             ${t`Optional enrollment flow, which is linked at the bottom of the page.`}
                         </p>
                     </ak-form-element-horizontal>
                     <ak-form-element-horizontal label=${t`Recovery flow`} name="recoveryFlow">
-                        <select class="pf-c-form-control">
-                            <option value="" ?selected=${this.instance?.recoveryFlow === undefined}>
-                                ---------
-                            </option>
-                            ${until(
-                                new FlowsApi(DEFAULT_CONFIG)
-                                    .flowsInstancesList({
-                                        ordering: "slug",
-                                        designation: FlowsInstancesListDesignationEnum.Recovery,
-                                    })
-                                    .then((flows) => {
-                                        return flows.results.map((flow) => {
-                                            const selected =
-                                                this.instance?.recoveryFlow === flow.pk;
-                                            return html`<option
-                                                value=${ifDefined(flow.pk)}
-                                                ?selected=${selected}
-                                            >
-                                                ${flow.name} (${flow.slug})
-                                            </option>`;
-                                        });
-                                    }),
-                                html`<option>${t`Loading...`}</option>`,
-                            )}
-                        </select>
+                        <ak-search-select
+                            .fetchObjects=${async (query?: string): Promise<Flow[]> => {
+                                const args: FlowsInstancesListRequest = {
+                                    ordering: "slug",
+                                    designation: FlowsInstancesListDesignationEnum.Recovery,
+                                };
+                                if (query !== undefined) {
+                                    args.search = query;
+                                }
+                                const flows = await new FlowsApi(DEFAULT_CONFIG).flowsInstancesList(
+                                    args,
+                                );
+                                return flows.results;
+                            }}
+                            .renderElement=${(flow: Flow): string => {
+                                return flow.name;
+                            }}
+                            .renderDescription=${(flow: Flow): TemplateResult => {
+                                return html`${flow.slug}`;
+                            }}
+                            .value=${(flow: Flow | undefined): string | undefined => {
+                                return flow?.pk;
+                            }}
+                            .selected=${(flow: Flow): boolean => {
+                                return this.instance?.recoveryFlow == flow.pk;
+                            }}
+                            ?blankable=${true}
+                        >
+                        </ak-search-select>
                         <p class="pf-c-form__helper-text">
                             ${t`Optional recovery flow, which is linked at the bottom of the page.`}
                         </p>
diff --git a/web/src/admin/stages/invitation/InvitationForm.ts b/web/src/admin/stages/invitation/InvitationForm.ts
index 045ecf12c..b594cc233 100644
--- a/web/src/admin/stages/invitation/InvitationForm.ts
+++ b/web/src/admin/stages/invitation/InvitationForm.ts
@@ -90,8 +90,8 @@ export class InvitationForm extends ModelForm<Invitation, string> {
                     .renderElement=${(flow: Flow): string => {
                         return flow.name;
                     }}
-                    .renderDescription=${(flow: Flow): string => {
-                        return flow.slug;
+                    .renderDescription=${(flow: Flow): TemplateResult => {
+                        return html`${flow.slug}`;
                     }}
                     .value=${(flow: Flow | undefined): string | undefined => {
                         return flow?.pk;
diff --git a/web/src/admin/stages/password/PasswordStageForm.ts b/web/src/admin/stages/password/PasswordStageForm.ts
index d9a1f5917..b248f75dd 100644
--- a/web/src/admin/stages/password/PasswordStageForm.ts
+++ b/web/src/admin/stages/password/PasswordStageForm.ts
@@ -138,8 +138,8 @@ export class PasswordStageForm extends ModelForm<PasswordStage, string> {
                             .renderElement=${(flow: Flow): string => {
                                 return flow.name;
                             }}
-                            .renderDescription=${(flow: Flow): string => {
-                                return flow.slug;
+                            .renderDescription=${(flow: Flow): TemplateResult => {
+                                return html`${flow.slug}`;
                             }}
                             .value=${(flow: Flow | undefined): string | undefined => {
                                 return flow?.pk;
diff --git a/web/src/admin/tenants/TenantForm.ts b/web/src/admin/tenants/TenantForm.ts
index 905b5eae5..9677cc5a4 100644
--- a/web/src/admin/tenants/TenantForm.ts
+++ b/web/src/admin/tenants/TenantForm.ts
@@ -162,8 +162,8 @@ export class TenantForm extends ModelForm<Tenant, string> {
                             .renderElement=${(flow: Flow): string => {
                                 return flow.name;
                             }}
-                            .renderDescription=${(flow: Flow): string => {
-                                return flow.slug;
+                            .renderDescription=${(flow: Flow): TemplateResult => {
+                                return html`${flow.slug}`;
                             }}
                             .value=${(flow: Flow | undefined): string | undefined => {
                                 return flow?.pk;
@@ -199,8 +199,8 @@ export class TenantForm extends ModelForm<Tenant, string> {
                             .renderElement=${(flow: Flow): string => {
                                 return flow.name;
                             }}
-                            .renderDescription=${(flow: Flow): string => {
-                                return flow.slug;
+                            .renderDescription=${(flow: Flow): TemplateResult => {
+                                return html`${flow.slug}`;
                             }}
                             .value=${(flow: Flow | undefined): string | undefined => {
                                 return flow?.pk;
@@ -234,8 +234,8 @@ export class TenantForm extends ModelForm<Tenant, string> {
                             .renderElement=${(flow: Flow): string => {
                                 return flow.name;
                             }}
-                            .renderDescription=${(flow: Flow): string => {
-                                return flow.slug;
+                            .renderDescription=${(flow: Flow): TemplateResult => {
+                                return html`${flow.slug}`;
                             }}
                             .value=${(flow: Flow | undefined): string | undefined => {
                                 return flow?.pk;
@@ -271,8 +271,8 @@ export class TenantForm extends ModelForm<Tenant, string> {
                             .renderElement=${(flow: Flow): string => {
                                 return flow.name;
                             }}
-                            .renderDescription=${(flow: Flow): string => {
-                                return flow.slug;
+                            .renderDescription=${(flow: Flow): TemplateResult => {
+                                return html`${flow.slug}`;
                             }}
                             .value=${(flow: Flow | undefined): string | undefined => {
                                 return flow?.pk;
@@ -309,8 +309,8 @@ export class TenantForm extends ModelForm<Tenant, string> {
                             .renderElement=${(flow: Flow): string => {
                                 return flow.name;
                             }}
-                            .renderDescription=${(flow: Flow): string => {
-                                return flow.slug;
+                            .renderDescription=${(flow: Flow): TemplateResult => {
+                                return html`${flow.slug}`;
                             }}
                             .value=${(flow: Flow | undefined): string | undefined => {
                                 return flow?.pk;
@@ -344,8 +344,8 @@ export class TenantForm extends ModelForm<Tenant, string> {
                             .renderElement=${(flow: Flow): string => {
                                 return flow.name;
                             }}
-                            .renderDescription=${(flow: Flow): string => {
-                                return flow.slug;
+                            .renderDescription=${(flow: Flow): TemplateResult => {
+                                return html`${flow.slug}`;
                             }}
                             .value=${(flow: Flow | undefined): string | undefined => {
                                 return flow?.pk;