From ba5cd6e719a8bb6ec470adda9314da5a62dd5813 Mon Sep 17 00:00:00 2001
From: Jens L <jens.langhammer@beryju.org>
Date: Mon, 2 Jan 2023 14:51:44 +0100
Subject: [PATCH] web/admin: add Radio control, search-select fixes (#4333)

* move search select to forms folder

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

* add radio, migrate smaller lists

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

* move dropdown when scrolling, hide when container out of frame

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 .../ApplicationCheckAccessForm.ts             |   2 +-
 web/src/admin/applications/ApplicationForm.ts |  34 +-
 .../TypeOAuthCodeApplicationWizardPage.ts     |   2 +-
 web/src/admin/blueprints/BlueprintForm.ts     |   2 +-
 web/src/admin/events/RuleForm.ts              |  54 +-
 web/src/admin/events/TransportForm.ts         |   2 +-
 web/src/admin/flows/FlowForm.ts               | 479 +++++++++---------
 web/src/admin/flows/StageBindingForm.ts       |  83 +--
 web/src/admin/groups/GroupForm.ts             |   2 +-
 web/src/admin/outposts/OutpostForm.ts         |   2 +-
 .../outposts/ServiceConnectionDockerForm.ts   |   2 +-
 web/src/admin/policies/PolicyBindingForm.ts   |   2 +-
 web/src/admin/policies/PolicyTestForm.ts      |   2 +-
 .../event_matcher/EventMatcherPolicyForm.ts   |   2 +-
 .../PropertyMappingTestForm.ts                |   2 +-
 .../admin/providers/ldap/LDAPProviderForm.ts  |  66 +--
 .../providers/oauth2/OAuth2ProviderForm.ts    |  33 +-
 .../providers/proxy/ProxyProviderForm.ts      |   2 +-
 .../admin/providers/saml/SAMLProviderForm.ts  | 151 +++---
 .../providers/saml/SAMLProviderImportForm.ts  |   2 +-
 web/src/admin/sources/ldap/LDAPSourceForm.ts  |   2 +-
 .../admin/sources/oauth/OAuthSourceForm.ts    |   2 +-
 web/src/admin/sources/plex/PlexSourceForm.ts  |   2 +-
 web/src/admin/sources/saml/SAMLSourceForm.ts  | 160 +++---
 .../AuthenticatorDuoStageForm.ts              |   2 +-
 .../authenticator_duo/DuoDeviceImportForm.ts  |   2 +-
 .../AuthenticatorSMSStageForm.ts              |  32 +-
 .../AuthenticatorStaticStageForm.ts           |   2 +-
 .../AuthenticatorTOTPStageForm.ts             |   2 +-
 .../AuthenticateWebAuthnStageForm.ts          |   2 +-
 .../identification/IdentificationStageForm.ts |   2 +-
 .../admin/stages/invitation/InvitationForm.ts |   2 +-
 .../stages/password/PasswordStageForm.ts      |   2 +-
 .../stages/user_write/UserWriteStageForm.ts   |   2 +-
 web/src/admin/tenants/TenantForm.ts           |   2 +-
 web/src/admin/tokens/TokenForm.ts             |  34 +-
 web/src/admin/users/UserResetEmailForm.ts     |   2 +-
 web/src/elements/forms/Form.ts                |   2 +-
 .../elements/forms/HorizontalFormElement.ts   |   1 +
 web/src/elements/forms/ModalForm.ts           |  11 +-
 web/src/elements/forms/Radio.ts               |  81 +++
 web/src/elements/{ => forms}/SearchSelect.ts  |  24 +-
 42 files changed, 697 insertions(+), 602 deletions(-)
 create mode 100644 web/src/elements/forms/Radio.ts
 rename web/src/elements/{ => forms}/SearchSelect.ts (92%)

diff --git a/web/src/admin/applications/ApplicationCheckAccessForm.ts b/web/src/admin/applications/ApplicationCheckAccessForm.ts
index 9bd5bac2f..b2c7e8ab9 100644
--- a/web/src/admin/applications/ApplicationCheckAccessForm.ts
+++ b/web/src/admin/applications/ApplicationCheckAccessForm.ts
@@ -1,8 +1,8 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { PFColor } from "@goauthentik/elements/Label";
-import "@goauthentik/elements/SearchSelect";
 import { Form } from "@goauthentik/elements/forms/Form";
 import "@goauthentik/elements/forms/HorizontalFormElement";
+import "@goauthentik/elements/forms/SearchSelect";
 
 import { t } from "@lingui/macro";
 
diff --git a/web/src/admin/applications/ApplicationForm.ts b/web/src/admin/applications/ApplicationForm.ts
index b3064e27b..44b735ee2 100644
--- a/web/src/admin/applications/ApplicationForm.ts
+++ b/web/src/admin/applications/ApplicationForm.ts
@@ -1,12 +1,13 @@
 import "@goauthentik/admin/providers/ProviderWizard";
 import { DEFAULT_CONFIG, config } from "@goauthentik/common/api/config";
 import { first, groupBy } from "@goauthentik/common/utils";
-import "@goauthentik/elements/SearchSelect";
 import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import "@goauthentik/elements/forms/ModalForm";
 import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
 import "@goauthentik/elements/forms/ProxyForm";
+import "@goauthentik/elements/forms/Radio";
+import "@goauthentik/elements/forms/SearchSelect";
 
 import { t } from "@lingui/macro";
 
@@ -153,20 +154,23 @@ export class ApplicationForm extends ModelForm<Application, string> {
                 ?required=${true}
                 name="policyEngineMode"
             >
-                <select class="pf-c-form-control">
-                    <option
-                        value=${PolicyEngineMode.Any}
-                        ?selected=${this.instance?.policyEngineMode === PolicyEngineMode.Any}
-                    >
-                        ${t`ANY, any policy must match to grant access.`}
-                    </option>
-                    <option
-                        value=${PolicyEngineMode.All}
-                        ?selected=${this.instance?.policyEngineMode === PolicyEngineMode.All}
-                    >
-                        ${t`ALL, all policies must match to grant access.`}
-                    </option>
-                </select>
+                <ak-radio
+                    .options=${[
+                        {
+                            label: "ANY",
+                            value: PolicyEngineMode.Any,
+                            default: true,
+                            description: html`${t`Any policy must match to grant access`}`,
+                        },
+                        {
+                            label: "ALL",
+                            value: PolicyEngineMode.All,
+                            description: html`${t`All policies must match to grant access`}`,
+                        },
+                    ]}
+                    .value=${this.instance?.policyEngineMode}
+                >
+                </ak-radio>
             </ak-form-element-horizontal>
             <ak-form-group .expanded=${true}>
                 <span slot="header"> ${t`UI settings`} </span>
diff --git a/web/src/admin/applications/wizard/oauth/TypeOAuthCodeApplicationWizardPage.ts b/web/src/admin/applications/wizard/oauth/TypeOAuthCodeApplicationWizardPage.ts
index 0d40be61e..54adfd5f1 100644
--- a/web/src/admin/applications/wizard/oauth/TypeOAuthCodeApplicationWizardPage.ts
+++ b/web/src/admin/applications/wizard/oauth/TypeOAuthCodeApplicationWizardPage.ts
@@ -1,7 +1,7 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import "@goauthentik/elements/SearchSelect";
 import { KeyUnknown } from "@goauthentik/elements/forms/Form";
 import "@goauthentik/elements/forms/HorizontalFormElement";
+import "@goauthentik/elements/forms/SearchSelect";
 import { WizardFormPage } from "@goauthentik/elements/wizard/WizardFormPage";
 import "@goauthentik/elements/wizard/WizardFormPage";
 
diff --git a/web/src/admin/blueprints/BlueprintForm.ts b/web/src/admin/blueprints/BlueprintForm.ts
index 867458631..8aa8ae793 100644
--- a/web/src/admin/blueprints/BlueprintForm.ts
+++ b/web/src/admin/blueprints/BlueprintForm.ts
@@ -2,10 +2,10 @@ 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";
+import "@goauthentik/elements/forms/SearchSelect";
 import YAML from "yaml";
 
 import { t } from "@lingui/macro";
diff --git a/web/src/admin/events/RuleForm.ts b/web/src/admin/events/RuleForm.ts
index c7e2e6e2e..763358ee2 100644
--- a/web/src/admin/events/RuleForm.ts
+++ b/web/src/admin/events/RuleForm.ts
@@ -1,7 +1,8 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import "@goauthentik/elements/SearchSelect";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
+import "@goauthentik/elements/forms/Radio";
+import "@goauthentik/elements/forms/SearchSelect";
 
 import { t } from "@lingui/macro";
 
@@ -48,29 +49,6 @@ export class RuleForm extends ModelForm<NotificationRule, string> {
         }
     };
 
-    renderSeverity(): TemplateResult {
-        return html`
-            <option
-                value=${SeverityEnum.Alert}
-                ?selected=${this.instance?.severity === SeverityEnum.Alert}
-            >
-                ${t`Alert`}
-            </option>
-            <option
-                value=${SeverityEnum.Warning}
-                ?selected=${this.instance?.severity === SeverityEnum.Warning}
-            >
-                ${t`Warning`}
-            </option>
-            <option
-                value=${SeverityEnum.Notice}
-                ?selected=${this.instance?.severity === SeverityEnum.Notice}
-            >
-                ${t`Notice`}
-            </option>
-        `;
-    }
-
     renderForm(): TemplateResult {
         return html`<form class="pf-c-form pf-m-horizontal">
             <ak-form-element-horizontal label=${t`Name`} ?required=${true} name="name">
@@ -107,10 +85,12 @@ export class RuleForm extends ModelForm<NotificationRule, string> {
                 </ak-search-select>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal label=${t`Transports`} ?required=${true} name="transports">
-                <select name="users" class="pf-c-form-control" multiple>
+                <select class="pf-c-form-control" multiple>
                     ${until(
                         new EventsApi(DEFAULT_CONFIG)
-                            .eventsTransportsList({})
+                            .eventsTransportsList({
+                                ordering: "name",
+                            })
                             .then((transports) => {
                                 return transports.results.map((transport) => {
                                     const selected = Array.from(
@@ -137,9 +117,25 @@ export class RuleForm extends ModelForm<NotificationRule, string> {
                 </p>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal label=${t`Severity`} ?required=${true} name="severity">
-                <select class="pf-c-form-control">
-                    ${this.renderSeverity()}
-                </select>
+                <ak-radio
+                    .options=${[
+                        {
+                            label: "Alert",
+                            value: SeverityEnum.Alert,
+                            default: true,
+                        },
+                        {
+                            label: t`Warning`,
+                            value: SeverityEnum.Warning,
+                        },
+                        {
+                            label: t`Notice`,
+                            value: SeverityEnum.Notice,
+                        },
+                    ]}
+                    .value=${this.instance?.severity}
+                >
+                </ak-radio>
             </ak-form-element-horizontal>
         </form>`;
     }
diff --git a/web/src/admin/events/TransportForm.ts b/web/src/admin/events/TransportForm.ts
index bfc0fcb76..60a925974 100644
--- a/web/src/admin/events/TransportForm.ts
+++ b/web/src/admin/events/TransportForm.ts
@@ -1,8 +1,8 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { first } from "@goauthentik/common/utils";
-import "@goauthentik/elements/SearchSelect";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
+import "@goauthentik/elements/forms/SearchSelect";
 
 import { t } from "@lingui/macro";
 
diff --git a/web/src/admin/flows/FlowForm.ts b/web/src/admin/flows/FlowForm.ts
index 3db763b8f..59ac8619f 100644
--- a/web/src/admin/flows/FlowForm.ts
+++ b/web/src/admin/flows/FlowForm.ts
@@ -2,8 +2,10 @@ import { DesignationToLabel, LayoutToLabel } from "@goauthentik/admin/flows/util
 import { AuthenticationEnum } from "@goauthentik/api/dist/models/AuthenticationEnum";
 import { DEFAULT_CONFIG, config } from "@goauthentik/common/api/config";
 import { first } from "@goauthentik/common/utils";
+import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
+import "@goauthentik/elements/forms/Radio";
 
 import { t } from "@lingui/macro";
 
@@ -74,140 +76,6 @@ export class FlowForm extends ModelForm<Flow, string> {
         return flow;
     };
 
-    renderDesignations(): TemplateResult {
-        return html`
-            <option
-                value=${FlowDesignationEnum.Authentication}
-                ?selected=${this.instance?.designation === FlowDesignationEnum.Authentication}
-            >
-                ${DesignationToLabel(FlowDesignationEnum.Authentication)}
-            </option>
-            <option
-                value=${FlowDesignationEnum.Authorization}
-                ?selected=${this.instance?.designation === FlowDesignationEnum.Authorization}
-            >
-                ${DesignationToLabel(FlowDesignationEnum.Authorization)}
-            </option>
-            <option
-                value=${FlowDesignationEnum.Enrollment}
-                ?selected=${this.instance?.designation === FlowDesignationEnum.Enrollment}
-            >
-                ${DesignationToLabel(FlowDesignationEnum.Enrollment)}
-            </option>
-            <option
-                value=${FlowDesignationEnum.Invalidation}
-                ?selected=${this.instance?.designation === FlowDesignationEnum.Invalidation}
-            >
-                ${DesignationToLabel(FlowDesignationEnum.Invalidation)}
-            </option>
-            <option
-                value=${FlowDesignationEnum.Recovery}
-                ?selected=${this.instance?.designation === FlowDesignationEnum.Recovery}
-            >
-                ${DesignationToLabel(FlowDesignationEnum.Recovery)}
-            </option>
-            <option
-                value=${FlowDesignationEnum.StageConfiguration}
-                ?selected=${this.instance?.designation === FlowDesignationEnum.StageConfiguration}
-            >
-                ${DesignationToLabel(FlowDesignationEnum.StageConfiguration)}
-            </option>
-            <option
-                value=${FlowDesignationEnum.Unenrollment}
-                ?selected=${this.instance?.designation === FlowDesignationEnum.Unenrollment}
-            >
-                ${DesignationToLabel(FlowDesignationEnum.Unenrollment)}
-            </option>
-        `;
-    }
-
-    renderDeniedAction(): TemplateResult {
-        return html` <option
-                value=${DeniedActionEnum.MessageContinue}
-                ?selected=${this.instance?.deniedAction === DeniedActionEnum.MessageContinue}
-            >
-                ${t`MESSAGE_CONTINUE will follow the ?next parameter if set, otherwise show a message.`}
-            </option>
-            <option
-                value=${DeniedActionEnum.Continue}
-                ?selected=${this.instance?.deniedAction === DeniedActionEnum.Continue}
-            >
-                ${t`CONTINUE will either follow the ?next parameter or redirect to the default interface.`}
-            </option>
-            <option
-                value=${DeniedActionEnum.Message}
-                ?selected=${this.instance?.deniedAction === DeniedActionEnum.Message}
-            >
-                ${t`MESSAGE will notify the user the flow isn't applicable.`}
-            </option>`;
-    }
-
-    renderAuthentication(): TemplateResult {
-        return html`
-            <option
-                value=${AuthenticationEnum.None}
-                ?selected=${this.instance?.authentication === AuthenticationEnum.None}
-            >
-                ${t`No requirement`}
-            </option>
-            <option
-                value=${AuthenticationEnum.RequireAuthenticated}
-                ?selected=${this.instance?.authentication ===
-                AuthenticationEnum.RequireAuthenticated}
-            >
-                ${t`Require authentication`}
-            </option>
-            <option
-                value=${AuthenticationEnum.RequireUnauthenticated}
-                ?selected=${this.instance?.authentication ===
-                AuthenticationEnum.RequireUnauthenticated}
-            >
-                ${t`Require no authentication.`}
-            </option>
-            <option
-                value=${AuthenticationEnum.RequireSuperuser}
-                ?selected=${this.instance?.authentication === AuthenticationEnum.RequireSuperuser}
-            >
-                ${t`Require superuser.`}
-            </option>
-        `;
-    }
-
-    renderLayout(): TemplateResult {
-        return html`
-            <option
-                value=${LayoutEnum.Stacked}
-                ?selected=${this.instance?.layout === LayoutEnum.Stacked}
-            >
-                ${LayoutToLabel(LayoutEnum.Stacked)}
-            </option>
-            <option
-                value=${LayoutEnum.ContentLeft}
-                ?selected=${this.instance?.layout === LayoutEnum.ContentLeft}
-            >
-                ${LayoutToLabel(LayoutEnum.ContentLeft)}
-            </option>
-            <option
-                value=${LayoutEnum.ContentRight}
-                ?selected=${this.instance?.layout === LayoutEnum.ContentRight}
-            >
-                ${LayoutToLabel(LayoutEnum.ContentRight)}
-            </option>
-            <option
-                value=${LayoutEnum.SidebarLeft}
-                ?selected=${this.instance?.layout === LayoutEnum.SidebarLeft}
-            >
-                ${LayoutToLabel(LayoutEnum.SidebarLeft)}
-            </option>
-            <option
-                value=${LayoutEnum.SidebarRight}
-                ?selected=${this.instance?.layout === LayoutEnum.SidebarRight}
-            >
-                ${LayoutToLabel(LayoutEnum.SidebarRight)}
-            </option>
-        `;
-    }
-
     renderForm(): TemplateResult {
         return html`<form class="pf-c-form pf-m-horizontal">
             <ak-form-element-horizontal label=${t`Name`} ?required=${true} name="name">
@@ -236,38 +104,6 @@ export class FlowForm extends ModelForm<Flow, string> {
                 />
                 <p class="pf-c-form__helper-text">${t`Visible in the URL.`}</p>
             </ak-form-element-horizontal>
-            <ak-form-element-horizontal
-                label=${t`Policy engine mode`}
-                ?required=${true}
-                name="policyEngineMode"
-            >
-                <select class="pf-c-form-control">
-                    <option
-                        value=${PolicyEngineMode.Any}
-                        ?selected=${this.instance?.policyEngineMode === PolicyEngineMode.Any}
-                    >
-                        ${t`ANY, any policy must match to grant access.`}
-                    </option>
-                    <option
-                        value=${PolicyEngineMode.All}
-                        ?selected=${this.instance?.policyEngineMode === PolicyEngineMode.All}
-                    >
-                        ${t`ALL, all policies must match to grant access.`}
-                    </option>
-                </select>
-            </ak-form-element-horizontal>
-            <ak-form-element-horizontal
-                label=${t`Authentication`}
-                ?required=${true}
-                name="authentication"
-            >
-                <select class="pf-c-form-control">
-                    ${this.renderAuthentication()}
-                </select>
-                <p class="pf-c-form__helper-text">
-                    ${t`Required authentication level for this flow.`}
-                </p>
-            </ak-form-element-horizontal>
             <ak-form-element-horizontal
                 label=${t`Designation`}
                 ?required=${true}
@@ -277,99 +113,264 @@ export class FlowForm extends ModelForm<Flow, string> {
                     <option value="" ?selected=${this.instance?.designation === undefined}>
                         ---------
                     </option>
-                    ${this.renderDesignations()}
+                    <option
+                        value=${FlowDesignationEnum.Authentication}
+                        ?selected=${this.instance?.designation ===
+                        FlowDesignationEnum.Authentication}
+                    >
+                        ${DesignationToLabel(FlowDesignationEnum.Authentication)}
+                    </option>
+                    <option
+                        value=${FlowDesignationEnum.Authorization}
+                        ?selected=${this.instance?.designation ===
+                        FlowDesignationEnum.Authorization}
+                    >
+                        ${DesignationToLabel(FlowDesignationEnum.Authorization)}
+                    </option>
+                    <option
+                        value=${FlowDesignationEnum.Enrollment}
+                        ?selected=${this.instance?.designation === FlowDesignationEnum.Enrollment}
+                    >
+                        ${DesignationToLabel(FlowDesignationEnum.Enrollment)}
+                    </option>
+                    <option
+                        value=${FlowDesignationEnum.Invalidation}
+                        ?selected=${this.instance?.designation === FlowDesignationEnum.Invalidation}
+                    >
+                        ${DesignationToLabel(FlowDesignationEnum.Invalidation)}
+                    </option>
+                    <option
+                        value=${FlowDesignationEnum.Recovery}
+                        ?selected=${this.instance?.designation === FlowDesignationEnum.Recovery}
+                    >
+                        ${DesignationToLabel(FlowDesignationEnum.Recovery)}
+                    </option>
+                    <option
+                        value=${FlowDesignationEnum.StageConfiguration}
+                        ?selected=${this.instance?.designation ===
+                        FlowDesignationEnum.StageConfiguration}
+                    >
+                        ${DesignationToLabel(FlowDesignationEnum.StageConfiguration)}
+                    </option>
+                    <option
+                        value=${FlowDesignationEnum.Unenrollment}
+                        ?selected=${this.instance?.designation === FlowDesignationEnum.Unenrollment}
+                    >
+                        ${DesignationToLabel(FlowDesignationEnum.Unenrollment)}
+                    </option>
                 </select>
                 <p class="pf-c-form__helper-text">
                     ${t`Decides what this Flow is used for. For example, the Authentication flow is redirect to when an un-authenticated user visits authentik.`}
                 </p>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal
-                label=${t`Denied action`}
+                label=${t`Authentication`}
                 ?required=${true}
-                name="deniedAction"
+                name="authentication"
             >
                 <select class="pf-c-form-control">
-                    ${this.renderDeniedAction()}
+                    <option
+                        value=${AuthenticationEnum.None}
+                        ?selected=${this.instance?.authentication === AuthenticationEnum.None}
+                    >
+                        ${t`No requirement`}
+                    </option>
+                    <option
+                        value=${AuthenticationEnum.RequireAuthenticated}
+                        ?selected=${this.instance?.authentication ===
+                        AuthenticationEnum.RequireAuthenticated}
+                    >
+                        ${t`Require authentication`}
+                    </option>
+                    <option
+                        value=${AuthenticationEnum.RequireUnauthenticated}
+                        ?selected=${this.instance?.authentication ===
+                        AuthenticationEnum.RequireUnauthenticated}
+                    >
+                        ${t`Require no authentication.`}
+                    </option>
+                    <option
+                        value=${AuthenticationEnum.RequireSuperuser}
+                        ?selected=${this.instance?.authentication ===
+                        AuthenticationEnum.RequireSuperuser}
+                    >
+                        ${t`Require superuser.`}
+                    </option>
                 </select>
                 <p class="pf-c-form__helper-text">
-                    ${t`Decides the response when a policy denies access to this flow for a user.`}
+                    ${t`Required authentication level for this flow.`}
                 </p>
             </ak-form-element-horizontal>
-            <ak-form-element-horizontal label=${t`Layout`} ?required=${true} name="layout">
-                <select class="pf-c-form-control">
-                    ${this.renderLayout()}
-                </select>
-            </ak-form-element-horizontal>
-            ${until(
-                config().then((c) => {
-                    if (c.capabilities.includes(CapabilitiesEnum.SaveMedia)) {
-                        return html`<ak-form-element-horizontal
+            <ak-form-group>
+                <span slot="header"> ${t`Behavior settings`} </span>
+                <div slot="body" class="pf-c-form">
+                    <ak-form-element-horizontal name="compatibilityMode">
+                        <div class="pf-c-check">
+                            <input
+                                type="checkbox"
+                                class="pf-c-check__input"
+                                ?checked=${first(this.instance?.compatibilityMode, false)}
+                            />
+                            <label class="pf-c-check__label"> ${t`Compatibility mode`} </label>
+                        </div>
+                        <p class="pf-c-form__helper-text">
+                            ${t`Increases compatibility with password managers and mobile devices.`}
+                        </p>
+                    </ak-form-element-horizontal>
+                    <ak-form-element-horizontal
+                        label=${t`Denied action`}
+                        ?required=${true}
+                        name="deniedAction"
+                    >
+                        <ak-radio
+                            .options=${[
+                                {
+                                    label: "MESSAGE_CONTINUE",
+                                    value: DeniedActionEnum.MessageContinue,
+                                    default: true,
+                                    description: html`${t`Will follow the ?next parameter if set, otherwise show a message`}`,
+                                },
+                                {
+                                    label: "CONTINUE",
+                                    value: DeniedActionEnum.Continue,
+                                    description: html`${t`Will either follow the ?next parameter or redirect to the default interface`}`,
+                                },
+                                {
+                                    label: "MESSAGE",
+                                    value: DeniedActionEnum.Message,
+                                    description: html`${t`Will notify the user the flow isn't applicable`}`,
+                                },
+                            ]}
+                            .value=${this.instance?.deniedAction}
+                        >
+                        </ak-radio>
+                        <p class="pf-c-form__helper-text">
+                            ${t`Decides the response when a policy denies access to this flow for a user.`}
+                        </p>
+                    </ak-form-element-horizontal>
+                    <ak-form-element-horizontal
+                        label=${t`Policy engine mode`}
+                        ?required=${true}
+                        name="policyEngineMode"
+                    >
+                        <ak-radio
+                            .options=${[
+                                {
+                                    label: "ANY",
+                                    value: PolicyEngineMode.Any,
+                                    default: true,
+                                    description: html`${t`Any policy must match to grant access`}`,
+                                },
+                                {
+                                    label: "ALL",
+                                    value: PolicyEngineMode.All,
+                                    description: html`${t`All policies must match to grant access`}`,
+                                },
+                            ]}
+                            .value=${this.instance?.policyEngineMode}
+                        >
+                        </ak-radio>
+                    </ak-form-element-horizontal>
+                </div>
+            </ak-form-group>
+            <ak-form-group>
+                <span slot="header"> ${t`Appearance settings`} </span>
+                <div slot="body" class="pf-c-form">
+                    <ak-form-element-horizontal label=${t`Layout`} ?required=${true} name="layout">
+                        <select class="pf-c-form-control">
+                            <option
+                                value=${LayoutEnum.Stacked}
+                                ?selected=${this.instance?.layout === LayoutEnum.Stacked}
+                            >
+                                ${LayoutToLabel(LayoutEnum.Stacked)}
+                            </option>
+                            <option
+                                value=${LayoutEnum.ContentLeft}
+                                ?selected=${this.instance?.layout === LayoutEnum.ContentLeft}
+                            >
+                                ${LayoutToLabel(LayoutEnum.ContentLeft)}
+                            </option>
+                            <option
+                                value=${LayoutEnum.ContentRight}
+                                ?selected=${this.instance?.layout === LayoutEnum.ContentRight}
+                            >
+                                ${LayoutToLabel(LayoutEnum.ContentRight)}
+                            </option>
+                            <option
+                                value=${LayoutEnum.SidebarLeft}
+                                ?selected=${this.instance?.layout === LayoutEnum.SidebarLeft}
+                            >
+                                ${LayoutToLabel(LayoutEnum.SidebarLeft)}
+                            </option>
+                            <option
+                                value=${LayoutEnum.SidebarRight}
+                                ?selected=${this.instance?.layout === LayoutEnum.SidebarRight}
+                            >
+                                ${LayoutToLabel(LayoutEnum.SidebarRight)}
+                            </option>
+                        </select>
+                    </ak-form-element-horizontal>
+                    ${until(
+                        config().then((c) => {
+                            if (c.capabilities.includes(CapabilitiesEnum.SaveMedia)) {
+                                return html`<ak-form-element-horizontal
+                                        label=${t`Background`}
+                                        name="background"
+                                    >
+                                        <input type="file" value="" class="pf-c-form-control" />
+                                        ${this.instance?.background
+                                            ? html`
+                                                  <p class="pf-c-form__helper-text">
+                                                      ${t`Currently set to:`}
+                                                      ${this.instance?.background}
+                                                  </p>
+                                              `
+                                            : html``}
+                                        <p class="pf-c-form__helper-text">
+                                            ${t`Background shown during execution.`}
+                                        </p>
+                                    </ak-form-element-horizontal>
+                                    ${this.instance?.background
+                                        ? html`
+                                              <ak-form-element-horizontal>
+                                                  <div class="pf-c-check">
+                                                      <input
+                                                          type="checkbox"
+                                                          class="pf-c-check__input"
+                                                          @change=${(ev: Event) => {
+                                                              const target =
+                                                                  ev.target as HTMLInputElement;
+                                                              this.clearBackground = target.checked;
+                                                          }}
+                                                      />
+                                                      <label class="pf-c-check__label">
+                                                          ${t`Clear background image`}
+                                                      </label>
+                                                  </div>
+                                                  <p class="pf-c-form__helper-text">
+                                                      ${t`Delete currently set background image.`}
+                                                  </p>
+                                              </ak-form-element-horizontal>
+                                          `
+                                        : html``}`;
+                            }
+                            return html`<ak-form-element-horizontal
                                 label=${t`Background`}
                                 name="background"
                             >
-                                <input type="file" value="" class="pf-c-form-control" />
-                                ${this.instance?.background
-                                    ? html`
-                                          <p class="pf-c-form__helper-text">
-                                              ${t`Currently set to:`} ${this.instance?.background}
-                                          </p>
-                                      `
-                                    : html``}
+                                <input
+                                    type="text"
+                                    value="${first(this.instance?.background, "")}"
+                                    class="pf-c-form-control"
+                                />
                                 <p class="pf-c-form__helper-text">
                                     ${t`Background shown during execution.`}
                                 </p>
-                            </ak-form-element-horizontal>
-                            ${this.instance?.background
-                                ? html`
-                                      <ak-form-element-horizontal>
-                                          <div class="pf-c-check">
-                                              <input
-                                                  type="checkbox"
-                                                  class="pf-c-check__input"
-                                                  @change=${(ev: Event) => {
-                                                      const target = ev.target as HTMLInputElement;
-                                                      this.clearBackground = target.checked;
-                                                  }}
-                                              />
-                                              <label class="pf-c-check__label">
-                                                  ${t`Clear background image`}
-                                              </label>
-                                          </div>
-                                          <p class="pf-c-form__helper-text">
-                                              ${t`Delete currently set background image.`}
-                                          </p>
-                                      </ak-form-element-horizontal>
-                                  `
-                                : html``}`;
-                    }
-                    return html`<ak-form-element-horizontal
-                        label=${t`Background`}
-                        name="background"
-                    >
-                        <input
-                            type="text"
-                            value="${first(this.instance?.background, "")}"
-                            class="pf-c-form-control"
-                        />
-                        <p class="pf-c-form__helper-text">
-                            ${t`Background shown during execution.`}
-                        </p>
-                    </ak-form-element-horizontal>`;
-                }),
-            )}
-            <ak-form-element-horizontal name="compatibilityMode">
-                <div class="pf-c-check">
-                    <input
-                        type="checkbox"
-                        class="pf-c-check__input"
-                        ?checked=${first(this.instance?.compatibilityMode, false)}
-                    />
-                    <label class="pf-c-check__label"> ${t`Compatibility mode`} </label>
+                            </ak-form-element-horizontal>`;
+                        }),
+                    )}
                 </div>
-                <p class="pf-c-form__helper-text">
-                    ${t`Enable compatibility mode, increases compatibility with password managers on mobile devices.`}
-                </p>
-            </ak-form-element-horizontal>
+            </ak-form-group>
         </form>`;
     }
 }
diff --git a/web/src/admin/flows/StageBindingForm.ts b/web/src/admin/flows/StageBindingForm.ts
index a56147d63..a41248cb0 100644
--- a/web/src/admin/flows/StageBindingForm.ts
+++ b/web/src/admin/flows/StageBindingForm.ts
@@ -1,8 +1,9 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { first, groupBy } from "@goauthentik/common/utils";
-import "@goauthentik/elements/SearchSelect";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
+import "@goauthentik/elements/forms/Radio";
+import "@goauthentik/elements/forms/SearchSelect";
 
 import { t } from "@lingui/macro";
 
@@ -165,35 +166,34 @@ export class StageBindingForm extends ModelForm<FlowStageBinding, string> {
                 </p>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal
-                label=${t`Invalid response action`}
+                label=${t`Invalid response behavior`}
                 ?required=${true}
                 name="invalidResponseAction"
             >
-                <select class="pf-c-form-control">
-                    <option
-                        value=${InvalidResponseActionEnum.Retry}
-                        ?selected=${this.instance?.invalidResponseAction ===
-                        InvalidResponseActionEnum.Retry}
-                    >
-                        ${t`RETRY returns the error message and a similar challenge to the executor.`}
-                    </option>
-                    <option
-                        value=${InvalidResponseActionEnum.Restart}
-                        ?selected=${this.instance?.invalidResponseAction ===
-                        InvalidResponseActionEnum.Restart}
-                    >
-                        ${t`RESTART restarts the flow from the beginning.`}
-                    </option>
-                    <option
-                        value=${InvalidResponseActionEnum.RestartWithContext}
-                        ?selected=${this.instance?.invalidResponseAction ===
-                        InvalidResponseActionEnum.RestartWithContext}
-                    >
-                        ${t`RESTART_WITH_CONTEXT restarts the flow from the beginning, while keeping the flow context.`}
-                    </option>
-                </select>
+                <ak-radio
+                    .options=${[
+                        {
+                            label: "RETRY",
+                            value: InvalidResponseActionEnum.Retry,
+                            default: true,
+                            description: html`${t`Returns the error message and a similar challenge to the executor`}`,
+                        },
+                        {
+                            label: "RESTART",
+                            value: InvalidResponseActionEnum.Restart,
+                            description: html`${t`Restarts the flow from the beginning`}`,
+                        },
+                        {
+                            label: "RESTART_WITH_CONTEXT",
+                            value: InvalidResponseActionEnum.RestartWithContext,
+                            description: html`${t`Restarts the flow from the beginning, while keeping the flow context`}`,
+                        },
+                    ]}
+                    .value=${this.instance?.invalidResponseAction}
+                >
+                </ak-radio>
                 <p class="pf-c-form__helper-text">
-                    ${t`Configure how the flow executor should handle an invalid response to a challenge.`}
+                    ${t`Configure how the flow executor should handle an invalid response to a challenge given by this bound stage.`}
                 </p>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal
@@ -201,20 +201,23 @@ export class StageBindingForm extends ModelForm<FlowStageBinding, string> {
                 ?required=${true}
                 name="policyEngineMode"
             >
-                <select class="pf-c-form-control">
-                    <option
-                        value=${PolicyEngineMode.Any}
-                        ?selected=${this.instance?.policyEngineMode === PolicyEngineMode.Any}
-                    >
-                        ${t`ANY, any policy must match to include this stage access.`}
-                    </option>
-                    <option
-                        value=${PolicyEngineMode.All}
-                        ?selected=${this.instance?.policyEngineMode === PolicyEngineMode.All}
-                    >
-                        ${t`ALL, all policies must match to include this stage access.`}
-                    </option>
-                </select>
+                <ak-radio
+                    .options=${[
+                        {
+                            label: "ANY",
+                            value: PolicyEngineMode.Any,
+                            default: true,
+                            description: html`${t`Any policy must match to grant access`}`,
+                        },
+                        {
+                            label: "ALL",
+                            value: PolicyEngineMode.All,
+                            description: html`${t`All policies must match to grant access`}`,
+                        },
+                    ]}
+                    .value=${this.instance?.policyEngineMode}
+                >
+                </ak-radio>
             </ak-form-element-horizontal>
         </form>`;
     }
diff --git a/web/src/admin/groups/GroupForm.ts b/web/src/admin/groups/GroupForm.ts
index f6fd1bc39..208042e29 100644
--- a/web/src/admin/groups/GroupForm.ts
+++ b/web/src/admin/groups/GroupForm.ts
@@ -2,11 +2,11 @@ import "@goauthentik/admin/groups/MemberSelectModal";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/CodeMirror";
-import "@goauthentik/elements/SearchSelect";
 import "@goauthentik/elements/chips/Chip";
 import "@goauthentik/elements/chips/ChipGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
+import "@goauthentik/elements/forms/SearchSelect";
 import { UserOption } from "@goauthentik/elements/user/utils";
 import YAML from "yaml";
 
diff --git a/web/src/admin/outposts/OutpostForm.ts b/web/src/admin/outposts/OutpostForm.ts
index 5974a4dd3..3af777f86 100644
--- a/web/src/admin/outposts/OutpostForm.ts
+++ b/web/src/admin/outposts/OutpostForm.ts
@@ -2,9 +2,9 @@ import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { docLink } from "@goauthentik/common/global";
 import { groupBy } from "@goauthentik/common/utils";
 import "@goauthentik/elements/CodeMirror";
-import "@goauthentik/elements/SearchSelect";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
+import "@goauthentik/elements/forms/SearchSelect";
 import YAML from "yaml";
 
 import { t } from "@lingui/macro";
diff --git a/web/src/admin/outposts/ServiceConnectionDockerForm.ts b/web/src/admin/outposts/ServiceConnectionDockerForm.ts
index 8b9c1b3ab..b09c5a5a8 100644
--- a/web/src/admin/outposts/ServiceConnectionDockerForm.ts
+++ b/web/src/admin/outposts/ServiceConnectionDockerForm.ts
@@ -1,8 +1,8 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { first } from "@goauthentik/common/utils";
-import "@goauthentik/elements/SearchSelect";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
+import "@goauthentik/elements/forms/SearchSelect";
 
 import { t } from "@lingui/macro";
 
diff --git a/web/src/admin/policies/PolicyBindingForm.ts b/web/src/admin/policies/PolicyBindingForm.ts
index cc2815b56..d31724535 100644
--- a/web/src/admin/policies/PolicyBindingForm.ts
+++ b/web/src/admin/policies/PolicyBindingForm.ts
@@ -1,8 +1,8 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { first, groupBy } from "@goauthentik/common/utils";
-import "@goauthentik/elements/SearchSelect";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
+import "@goauthentik/elements/forms/SearchSelect";
 
 import { t } from "@lingui/macro";
 
diff --git a/web/src/admin/policies/PolicyTestForm.ts b/web/src/admin/policies/PolicyTestForm.ts
index be0ae106d..157369dfc 100644
--- a/web/src/admin/policies/PolicyTestForm.ts
+++ b/web/src/admin/policies/PolicyTestForm.ts
@@ -2,9 +2,9 @@ import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/CodeMirror";
 import { PFColor } from "@goauthentik/elements/Label";
-import "@goauthentik/elements/SearchSelect";
 import { Form } from "@goauthentik/elements/forms/Form";
 import "@goauthentik/elements/forms/HorizontalFormElement";
+import "@goauthentik/elements/forms/SearchSelect";
 import YAML from "yaml";
 
 import { t } from "@lingui/macro";
diff --git a/web/src/admin/policies/event_matcher/EventMatcherPolicyForm.ts b/web/src/admin/policies/event_matcher/EventMatcherPolicyForm.ts
index 83f883a02..08a1dccab 100644
--- a/web/src/admin/policies/event_matcher/EventMatcherPolicyForm.ts
+++ b/web/src/admin/policies/event_matcher/EventMatcherPolicyForm.ts
@@ -1,9 +1,9 @@
 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";
+import "@goauthentik/elements/forms/SearchSelect";
 
 import { t } from "@lingui/macro";
 
diff --git a/web/src/admin/property-mappings/PropertyMappingTestForm.ts b/web/src/admin/property-mappings/PropertyMappingTestForm.ts
index 46c5544bb..16dfa6b2f 100644
--- a/web/src/admin/property-mappings/PropertyMappingTestForm.ts
+++ b/web/src/admin/property-mappings/PropertyMappingTestForm.ts
@@ -1,9 +1,9 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/CodeMirror";
-import "@goauthentik/elements/SearchSelect";
 import { Form } from "@goauthentik/elements/forms/Form";
 import "@goauthentik/elements/forms/HorizontalFormElement";
+import "@goauthentik/elements/forms/SearchSelect";
 import YAML from "yaml";
 
 import { t } from "@lingui/macro";
diff --git a/web/src/admin/providers/ldap/LDAPProviderForm.ts b/web/src/admin/providers/ldap/LDAPProviderForm.ts
index 2a458cd8d..e9f1f20d8 100644
--- a/web/src/admin/providers/ldap/LDAPProviderForm.ts
+++ b/web/src/admin/providers/ldap/LDAPProviderForm.ts
@@ -1,9 +1,10 @@
 import { DEFAULT_CONFIG, tenant } 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";
+import "@goauthentik/elements/forms/Radio";
+import "@goauthentik/elements/forms/SearchSelect";
 
 import { t } from "@lingui/macro";
 
@@ -146,44 +147,49 @@ export class LDAPProviderFormPage extends ModelForm<LDAPProvider, number> {
                 </p>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal label=${t`Bind mode`} name="bindMode">
-                <select class="pf-c-form-control">
-                    <option
-                        value="${LDAPAPIAccessMode.Cached}"
-                        ?selected=${this.instance?.bindMode === LDAPAPIAccessMode.Cached}
-                    >
-                        ${t`Cached binding, flow is executed and session is cached in memory. Flow is executed when session expires.`}
-                    </option>
-                    <option
-                        value="${LDAPAPIAccessMode.Direct}"
-                        ?selected=${this.instance?.bindMode === LDAPAPIAccessMode.Direct}
-                    >
-                        ${t`Direct binding, always execute the configured bind flow to authenticate the user.`}
-                    </option>
-                </select>
+                <ak-radio
+                    .options=${[
+                        {
+                            label: t`Cached binding`,
+                            value: LDAPAPIAccessMode.Cached,
+                            default: true,
+                            description: html`${t`Flow is executed and session is cached in memory. Flow is executed when session expires`}`,
+                        },
+                        {
+                            label: t`Direct binding`,
+                            value: LDAPAPIAccessMode.Direct,
+                            description: html`${t`Always execute the configured bind flow to authenticate the user`}`,
+                        },
+                    ]}
+                    .value=${this.instance?.bindMode}
+                >
+                </ak-radio>
                 <p class="pf-c-form__helper-text">
                     ${t`Configure how the outpost authenticates requests.`}
                 </p>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal label=${t`Search mode`} name="searchMode">
-                <select class="pf-c-form-control">
-                    <option
-                        value="${LDAPAPIAccessMode.Cached}"
-                        ?selected=${this.instance?.searchMode === LDAPAPIAccessMode.Cached}
-                    >
-                        ${t`Cached querying, the outpost holds all users and groups in-memory and will refresh every 5 Minutes.`}
-                    </option>
-                    <option
-                        value="${LDAPAPIAccessMode.Direct}"
-                        ?selected=${this.instance?.searchMode === LDAPAPIAccessMode.Direct}
-                    >
-                        ${t`Direct querying, always returns the latest data, but slower than cached querying.`}
-                    </option>
-                </select>
+                <ak-radio
+                    .options=${[
+                        {
+                            label: t`Cached querying`,
+                            value: LDAPAPIAccessMode.Cached,
+                            default: true,
+                            description: html`${t`The outpost holds all users and groups in-memory and will refresh every 5 Minutes`}`,
+                        },
+                        {
+                            label: t`Direct querying`,
+                            value: LDAPAPIAccessMode.Direct,
+                            description: html`${t`Always returns the latest data, but slower than cached querying`}`,
+                        },
+                    ]}
+                    .value=${this.instance?.searchMode}
+                >
+                </ak-radio>
                 <p class="pf-c-form__helper-text">
                     ${t`Configure how the outpost queries the core authentik server's users.`}
                 </p>
             </ak-form-element-horizontal>
-
             <ak-form-group .expanded=${true}>
                 <span slot="header"> ${t`Protocol settings`} </span>
                 <div slot="body" class="pf-c-form">
diff --git a/web/src/admin/providers/oauth2/OAuth2ProviderForm.ts b/web/src/admin/providers/oauth2/OAuth2ProviderForm.ts
index 348092197..a3432b9cd 100644
--- a/web/src/admin/providers/oauth2/OAuth2ProviderForm.ts
+++ b/web/src/admin/providers/oauth2/OAuth2ProviderForm.ts
@@ -1,9 +1,10 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 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";
+import "@goauthentik/elements/forms/Radio";
+import "@goauthentik/elements/forms/SearchSelect";
 import "@goauthentik/elements/utils/TimeDeltaHelp";
 
 import { t } from "@lingui/macro";
@@ -365,21 +366,21 @@ ${this.instance?.redirectUris}</textarea
                         ?required=${true}
                         name="issuerMode"
                     >
-                        <select class="pf-c-form-control">
-                            <option
-                                value="${IssuerModeEnum.PerProvider}"
-                                ?selected=${this.instance?.issuerMode ===
-                                IssuerModeEnum.PerProvider}
-                            >
-                                ${t`Each provider has a different issuer, based on the application slug.`}
-                            </option>
-                            <option
-                                value="${IssuerModeEnum.Global}"
-                                ?selected=${this.instance?.issuerMode === IssuerModeEnum.Global}
-                            >
-                                ${t`Same identifier is used for all providers`}
-                            </option>
-                        </select>
+                        <ak-radio
+                            .options=${[
+                                {
+                                    label: t`Each provider has a different issuer, based on the application slug`,
+                                    value: IssuerModeEnum.PerProvider,
+                                    default: true,
+                                },
+                                {
+                                    label: t`Same identifier is used for all providers`,
+                                    value: IssuerModeEnum.Global,
+                                },
+                            ]}
+                            .value=${this.instance?.issuerMode}
+                        >
+                        </ak-radio>
                         <p class="pf-c-form__helper-text">
                             ${t`Configure how the issuer field of the ID Token should be filled.`}
                         </p>
diff --git a/web/src/admin/providers/proxy/ProxyProviderForm.ts b/web/src/admin/providers/proxy/ProxyProviderForm.ts
index 8ccf2724f..250e8dbba 100644
--- a/web/src/admin/providers/proxy/ProxyProviderForm.ts
+++ b/web/src/admin/providers/proxy/ProxyProviderForm.ts
@@ -1,9 +1,9 @@
 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";
+import "@goauthentik/elements/forms/SearchSelect";
 import "@goauthentik/elements/utils/TimeDeltaHelp";
 
 import { t } from "@lingui/macro";
diff --git a/web/src/admin/providers/saml/SAMLProviderForm.ts b/web/src/admin/providers/saml/SAMLProviderForm.ts
index bfad8c32a..f4abddd0a 100644
--- a/web/src/admin/providers/saml/SAMLProviderForm.ts
+++ b/web/src/admin/providers/saml/SAMLProviderForm.ts
@@ -1,8 +1,9 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import "@goauthentik/elements/SearchSelect";
 import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
+import "@goauthentik/elements/forms/Radio";
+import "@goauthentik/elements/forms/SearchSelect";
 import "@goauthentik/elements/utils/TimeDeltaHelp";
 
 import { t } from "@lingui/macro";
@@ -130,20 +131,21 @@ export class SAMLProviderFormPage extends ModelForm<SAMLProvider, number> {
                         ?required=${true}
                         name="spBinding"
                     >
-                        <select class="pf-c-form-control">
-                            <option
-                                value=${SpBindingEnum.Redirect}
-                                ?selected=${this.instance?.spBinding === SpBindingEnum.Redirect}
-                            >
-                                ${t`Redirect`}
-                            </option>
-                            <option
-                                value=${SpBindingEnum.Post}
-                                ?selected=${this.instance?.spBinding === SpBindingEnum.Post}
-                            >
-                                ${t`Post`}
-                            </option>
-                        </select>
+                        <ak-radio
+                            .options=${[
+                                {
+                                    label: t`Redirect`,
+                                    value: SpBindingEnum.Redirect,
+                                    default: true,
+                                },
+                                {
+                                    label: t`Post`,
+                                    value: SpBindingEnum.Post,
+                                },
+                            ]}
+                            .value=${this.instance?.spBinding}
+                        >
+                        </ak-radio>
                         <p class="pf-c-form__helper-text">
                             ${t`Determines how authentik sends the response back to the Service Provider.`}
                         </p>
@@ -366,81 +368,62 @@ export class SAMLProviderFormPage extends ModelForm<SAMLProvider, number> {
                         ?required=${true}
                         name="digestAlgorithm"
                     >
-                        <select class="pf-c-form-control">
-                            <option
-                                value=${DigestAlgorithmEnum._200009Xmldsigsha1}
-                                ?selected=${this.instance?.digestAlgorithm ===
-                                DigestAlgorithmEnum._200009Xmldsigsha1}
-                            >
-                                ${t`SHA1`}
-                            </option>
-                            <option
-                                value=${DigestAlgorithmEnum._200104Xmlencsha256}
-                                ?selected=${this.instance?.digestAlgorithm ===
-                                    DigestAlgorithmEnum._200104Xmlencsha256 ||
-                                this.instance?.digestAlgorithm === undefined}
-                            >
-                                ${t`SHA256`}
-                            </option>
-                            <option
-                                value=${DigestAlgorithmEnum._200104XmldsigMoresha384}
-                                ?selected=${this.instance?.digestAlgorithm ===
-                                DigestAlgorithmEnum._200104XmldsigMoresha384}
-                            >
-                                ${t`SHA384`}
-                            </option>
-                            <option
-                                value=${DigestAlgorithmEnum._200104Xmlencsha512}
-                                ?selected=${this.instance?.digestAlgorithm ===
-                                DigestAlgorithmEnum._200104Xmlencsha512}
-                            >
-                                ${t`SHA512`}
-                            </option>
-                        </select>
+                        <ak-radio
+                            .options=${[
+                                {
+                                    label: "SHA1",
+                                    value: DigestAlgorithmEnum._200009Xmldsigsha1,
+                                },
+                                {
+                                    label: "SHA256",
+                                    value: DigestAlgorithmEnum._200104Xmlencsha256,
+                                    default: true,
+                                },
+                                {
+                                    label: "SHA384",
+                                    value: DigestAlgorithmEnum._200104XmldsigMoresha384,
+                                },
+                                {
+                                    label: "SHA512",
+                                    value: DigestAlgorithmEnum._200104Xmlencsha512,
+                                },
+                            ]}
+                            .value=${this.instance?.digestAlgorithm}
+                        >
+                        </ak-radio>
                     </ak-form-element-horizontal>
                     <ak-form-element-horizontal
                         label=${t`Signature algorithm`}
                         ?required=${true}
                         name="signatureAlgorithm"
                     >
-                        <select class="pf-c-form-control">
-                            <option
-                                value=${SignatureAlgorithmEnum._200009XmldsigrsaSha1}
-                                ?selected=${this.instance?.signatureAlgorithm ===
-                                SignatureAlgorithmEnum._200009XmldsigrsaSha1}
-                            >
-                                ${t`RSA-SHA1`}
-                            </option>
-                            <option
-                                value=${SignatureAlgorithmEnum._200104XmldsigMorersaSha256}
-                                ?selected=${this.instance?.signatureAlgorithm ===
-                                    SignatureAlgorithmEnum._200104XmldsigMorersaSha256 ||
-                                this.instance?.signatureAlgorithm === undefined}
-                            >
-                                ${t`RSA-SHA256`}
-                            </option>
-                            <option
-                                value=${SignatureAlgorithmEnum._200104XmldsigMorersaSha384}
-                                ?selected=${this.instance?.signatureAlgorithm ===
-                                SignatureAlgorithmEnum._200104XmldsigMorersaSha384}
-                            >
-                                ${t`RSA-SHA384`}
-                            </option>
-                            <option
-                                value=${SignatureAlgorithmEnum._200104XmldsigMorersaSha512}
-                                ?selected=${this.instance?.signatureAlgorithm ===
-                                SignatureAlgorithmEnum._200104XmldsigMorersaSha512}
-                            >
-                                ${t`RSA-SHA512`}
-                            </option>
-                            <option
-                                value=${SignatureAlgorithmEnum._200009XmldsigdsaSha1}
-                                ?selected=${this.instance?.signatureAlgorithm ===
-                                SignatureAlgorithmEnum._200009XmldsigdsaSha1}
-                            >
-                                ${t`DSA-SHA1`}
-                            </option>
-                        </select>
+                        <ak-radio
+                            .options=${[
+                                {
+                                    label: "RSA-SHA1",
+                                    value: SignatureAlgorithmEnum._200009XmldsigrsaSha1,
+                                },
+                                {
+                                    label: "RSA-SHA256",
+                                    value: SignatureAlgorithmEnum._200104XmldsigMorersaSha256,
+                                    default: true,
+                                },
+                                {
+                                    label: "RSA-SHA384",
+                                    value: SignatureAlgorithmEnum._200104XmldsigMorersaSha384,
+                                },
+                                {
+                                    label: "RSA-SHA512",
+                                    value: SignatureAlgorithmEnum._200104XmldsigMorersaSha512,
+                                },
+                                {
+                                    label: "DSA-SHA1",
+                                    value: SignatureAlgorithmEnum._200009XmldsigdsaSha1,
+                                },
+                            ]}
+                            .value=${this.instance?.signatureAlgorithm}
+                        >
+                        </ak-radio>
                     </ak-form-element-horizontal>
                 </div>
             </ak-form-group>
diff --git a/web/src/admin/providers/saml/SAMLProviderImportForm.ts b/web/src/admin/providers/saml/SAMLProviderImportForm.ts
index e7e70429c..a18e97d76 100644
--- a/web/src/admin/providers/saml/SAMLProviderImportForm.ts
+++ b/web/src/admin/providers/saml/SAMLProviderImportForm.ts
@@ -1,8 +1,8 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { SentryIgnoredError } from "@goauthentik/common/errors";
-import "@goauthentik/elements/SearchSelect";
 import { Form } from "@goauthentik/elements/forms/Form";
 import "@goauthentik/elements/forms/HorizontalFormElement";
+import "@goauthentik/elements/forms/SearchSelect";
 
 import { t } from "@lingui/macro";
 
diff --git a/web/src/admin/sources/ldap/LDAPSourceForm.ts b/web/src/admin/sources/ldap/LDAPSourceForm.ts
index a3b3520df..4ff02b2cf 100644
--- a/web/src/admin/sources/ldap/LDAPSourceForm.ts
+++ b/web/src/admin/sources/ldap/LDAPSourceForm.ts
@@ -1,9 +1,9 @@
 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";
+import "@goauthentik/elements/forms/SearchSelect";
 
 import { t } from "@lingui/macro";
 
diff --git a/web/src/admin/sources/oauth/OAuthSourceForm.ts b/web/src/admin/sources/oauth/OAuthSourceForm.ts
index 6003c1b13..03a601850 100644
--- a/web/src/admin/sources/oauth/OAuthSourceForm.ts
+++ b/web/src/admin/sources/oauth/OAuthSourceForm.ts
@@ -2,10 +2,10 @@ 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";
+import "@goauthentik/elements/forms/SearchSelect";
 
 import { t } from "@lingui/macro";
 
diff --git a/web/src/admin/sources/plex/PlexSourceForm.ts b/web/src/admin/sources/plex/PlexSourceForm.ts
index 45c1a8d36..cc393aa22 100644
--- a/web/src/admin/sources/plex/PlexSourceForm.ts
+++ b/web/src/admin/sources/plex/PlexSourceForm.ts
@@ -2,10 +2,10 @@ 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";
+import "@goauthentik/elements/forms/SearchSelect";
 
 import { t } from "@lingui/macro";
 
diff --git a/web/src/admin/sources/saml/SAMLSourceForm.ts b/web/src/admin/sources/saml/SAMLSourceForm.ts
index feccca1e9..37126f062 100644
--- a/web/src/admin/sources/saml/SAMLSourceForm.ts
+++ b/web/src/admin/sources/saml/SAMLSourceForm.ts
@@ -4,6 +4,7 @@ import { first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
+import "@goauthentik/elements/forms/Radio";
 import "@goauthentik/elements/utils/TimeDeltaHelp";
 
 import { t } from "@lingui/macro";
@@ -242,26 +243,26 @@ export class SAMLSourceForm extends ModelForm<SAMLSource, string> {
                         ?required=${true}
                         name="bindingType"
                     >
-                        <select class="pf-c-form-control">
-                            <option
-                                value=${BindingTypeEnum.Redirect}
-                                ?selected=${this.instance?.bindingType === BindingTypeEnum.Redirect}
-                            >
-                                ${t`Redirect binding`}
-                            </option>
-                            <option
-                                value=${BindingTypeEnum.PostAuto}
-                                ?selected=${this.instance?.bindingType === BindingTypeEnum.PostAuto}
-                            >
-                                ${t`Post binding (auto-submit)`}
-                            </option>
-                            <option
-                                value=${BindingTypeEnum.Post}
-                                ?selected=${this.instance?.bindingType === BindingTypeEnum.Post}
-                            >
-                                ${t`Post binding`}
-                            </option>
-                        </select>
+                        <ak-radio
+                            .options=${[
+                                {
+                                    label: t`Redirect binding`,
+                                    value: BindingTypeEnum.Redirect,
+                                    default: true,
+                                },
+                                {
+                                    label: t`Post-auto binding`,
+                                    value: BindingTypeEnum.PostAuto,
+                                    description: html`${t`Post binding but the request is automatically sent and the user doesn't have to confirm.`}`,
+                                },
+                                {
+                                    label: t`Post binding`,
+                                    value: BindingTypeEnum.Post,
+                                },
+                            ]}
+                            .value=${this.instance?.bindingType}
+                        >
+                        </ak-radio>
                     </ak-form-element-horizontal>
                     <ak-form-element-horizontal label=${t`Signing keypair`} name="signingKp">
                         <ak-search-select
@@ -394,81 +395,62 @@ export class SAMLSourceForm extends ModelForm<SAMLSource, string> {
                         ?required=${true}
                         name="digestAlgorithm"
                     >
-                        <select class="pf-c-form-control">
-                            <option
-                                value=${DigestAlgorithmEnum._200009Xmldsigsha1}
-                                ?selected=${this.instance?.digestAlgorithm ===
-                                DigestAlgorithmEnum._200009Xmldsigsha1}
-                            >
-                                ${t`SHA1`}
-                            </option>
-                            <option
-                                value=${DigestAlgorithmEnum._200104Xmlencsha256}
-                                ?selected=${this.instance?.digestAlgorithm ===
-                                    DigestAlgorithmEnum._200104Xmlencsha256 ||
-                                this.instance?.digestAlgorithm === undefined}
-                            >
-                                ${t`SHA256`}
-                            </option>
-                            <option
-                                value=${DigestAlgorithmEnum._200104XmldsigMoresha384}
-                                ?selected=${this.instance?.digestAlgorithm ===
-                                DigestAlgorithmEnum._200104XmldsigMoresha384}
-                            >
-                                ${t`SHA384`}
-                            </option>
-                            <option
-                                value=${DigestAlgorithmEnum._200104Xmlencsha512}
-                                ?selected=${this.instance?.digestAlgorithm ===
-                                DigestAlgorithmEnum._200104Xmlencsha512}
-                            >
-                                ${t`SHA512`}
-                            </option>
-                        </select>
+                        <ak-radio
+                            .options=${[
+                                {
+                                    label: "SHA1",
+                                    value: DigestAlgorithmEnum._200009Xmldsigsha1,
+                                },
+                                {
+                                    label: "SHA256",
+                                    value: DigestAlgorithmEnum._200104Xmlencsha256,
+                                    default: true,
+                                },
+                                {
+                                    label: "SHA384",
+                                    value: DigestAlgorithmEnum._200104XmldsigMoresha384,
+                                },
+                                {
+                                    label: "SHA512",
+                                    value: DigestAlgorithmEnum._200104Xmlencsha512,
+                                },
+                            ]}
+                            .value=${this.instance?.digestAlgorithm}
+                        >
+                        </ak-radio>
                     </ak-form-element-horizontal>
                     <ak-form-element-horizontal
                         label=${t`Signature algorithm`}
                         ?required=${true}
                         name="signatureAlgorithm"
                     >
-                        <select class="pf-c-form-control">
-                            <option
-                                value=${SignatureAlgorithmEnum._200009XmldsigrsaSha1}
-                                ?selected=${this.instance?.signatureAlgorithm ===
-                                SignatureAlgorithmEnum._200009XmldsigrsaSha1}
-                            >
-                                ${t`RSA-SHA1`}
-                            </option>
-                            <option
-                                value=${SignatureAlgorithmEnum._200104XmldsigMorersaSha256}
-                                ?selected=${this.instance?.signatureAlgorithm ===
-                                    SignatureAlgorithmEnum._200104XmldsigMorersaSha256 ||
-                                this.instance?.signatureAlgorithm === undefined}
-                            >
-                                ${t`RSA-SHA256`}
-                            </option>
-                            <option
-                                value=${SignatureAlgorithmEnum._200104XmldsigMorersaSha384}
-                                ?selected=${this.instance?.signatureAlgorithm ===
-                                SignatureAlgorithmEnum._200104XmldsigMorersaSha384}
-                            >
-                                ${t`RSA-SHA384`}
-                            </option>
-                            <option
-                                value=${SignatureAlgorithmEnum._200104XmldsigMorersaSha512}
-                                ?selected=${this.instance?.signatureAlgorithm ===
-                                SignatureAlgorithmEnum._200104XmldsigMorersaSha512}
-                            >
-                                ${t`RSA-SHA512`}
-                            </option>
-                            <option
-                                value=${SignatureAlgorithmEnum._200009XmldsigdsaSha1}
-                                ?selected=${this.instance?.signatureAlgorithm ===
-                                SignatureAlgorithmEnum._200009XmldsigdsaSha1}
-                            >
-                                ${t`DSA-SHA1`}
-                            </option>
-                        </select>
+                        <ak-radio
+                            .options=${[
+                                {
+                                    label: "RSA-SHA1",
+                                    value: SignatureAlgorithmEnum._200009XmldsigrsaSha1,
+                                },
+                                {
+                                    label: "RSA-SHA256",
+                                    value: SignatureAlgorithmEnum._200104XmldsigMorersaSha256,
+                                    default: true,
+                                },
+                                {
+                                    label: "RSA-SHA384",
+                                    value: SignatureAlgorithmEnum._200104XmldsigMorersaSha384,
+                                },
+                                {
+                                    label: "RSA-SHA512",
+                                    value: SignatureAlgorithmEnum._200104XmldsigMorersaSha512,
+                                },
+                                {
+                                    label: "DSA-SHA1",
+                                    value: SignatureAlgorithmEnum._200009XmldsigdsaSha1,
+                                },
+                            ]}
+                            .value=${this.instance?.signatureAlgorithm}
+                        >
+                        </ak-radio>
                     </ak-form-element-horizontal>
                 </div>
             </ak-form-group>
diff --git a/web/src/admin/stages/authenticator_duo/AuthenticatorDuoStageForm.ts b/web/src/admin/stages/authenticator_duo/AuthenticatorDuoStageForm.ts
index 430988110..b3e001bb3 100644
--- a/web/src/admin/stages/authenticator_duo/AuthenticatorDuoStageForm.ts
+++ b/web/src/admin/stages/authenticator_duo/AuthenticatorDuoStageForm.ts
@@ -1,9 +1,9 @@
 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";
+import "@goauthentik/elements/forms/SearchSelect";
 
 import { t } from "@lingui/macro";
 
diff --git a/web/src/admin/stages/authenticator_duo/DuoDeviceImportForm.ts b/web/src/admin/stages/authenticator_duo/DuoDeviceImportForm.ts
index 5dcbd566a..906ca1623 100644
--- a/web/src/admin/stages/authenticator_duo/DuoDeviceImportForm.ts
+++ b/web/src/admin/stages/authenticator_duo/DuoDeviceImportForm.ts
@@ -1,11 +1,11 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { MessageLevel } from "@goauthentik/common/messages";
 import "@goauthentik/elements/Divider";
-import "@goauthentik/elements/SearchSelect";
 import "@goauthentik/elements/buttons/ActionButton";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { ModalForm } from "@goauthentik/elements/forms/ModalForm";
 import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
+import "@goauthentik/elements/forms/SearchSelect";
 import { showMessage } from "@goauthentik/elements/messages/MessageContainer";
 
 import { t } from "@lingui/macro";
diff --git a/web/src/admin/stages/authenticator_sms/AuthenticatorSMSStageForm.ts b/web/src/admin/stages/authenticator_sms/AuthenticatorSMSStageForm.ts
index 9781fb02c..fa5972b9d 100644
--- a/web/src/admin/stages/authenticator_sms/AuthenticatorSMSStageForm.ts
+++ b/web/src/admin/stages/authenticator_sms/AuthenticatorSMSStageForm.ts
@@ -1,9 +1,10 @@
 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";
+import "@goauthentik/elements/forms/Radio";
+import "@goauthentik/elements/forms/SearchSelect";
 
 import { t } from "@lingui/macro";
 
@@ -106,20 +107,21 @@ export class AuthenticatorSMSStageForm extends ModelForm<AuthenticatorSMSStage,
                 ?required=${true}
                 name="authType"
             >
-                <select class="pf-c-form-control">
-                    <option
-                        value="${AuthTypeEnum.Basic}"
-                        ?selected=${this.instance?.authType === AuthTypeEnum.Basic}
-                    >
-                        ${t`Basic Auth`}
-                    </option>
-                    <option
-                        value="${AuthTypeEnum.Bearer}"
-                        ?selected=${this.instance?.authType === AuthTypeEnum.Bearer}
-                    >
-                        ${t`Bearer Token`}
-                    </option>
-                </select>
+                <ak-radio
+                    .options=${[
+                        {
+                            label: t`Basic Auth`,
+                            value: AuthTypeEnum.Basic,
+                            default: true,
+                        },
+                        {
+                            label: t`Bearer Token`,
+                            value: AuthTypeEnum.Bearer,
+                        },
+                    ]}
+                    .value=${this.instance?.authType}
+                >
+                </ak-radio>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal
                 label=${t`External API URL`}
diff --git a/web/src/admin/stages/authenticator_static/AuthenticatorStaticStageForm.ts b/web/src/admin/stages/authenticator_static/AuthenticatorStaticStageForm.ts
index 8ce7f62ab..16aab0ab5 100644
--- a/web/src/admin/stages/authenticator_static/AuthenticatorStaticStageForm.ts
+++ b/web/src/admin/stages/authenticator_static/AuthenticatorStaticStageForm.ts
@@ -1,8 +1,8 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { first } from "@goauthentik/common/utils";
-import "@goauthentik/elements/SearchSelect";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
+import "@goauthentik/elements/forms/SearchSelect";
 
 import { t } from "@lingui/macro";
 
diff --git a/web/src/admin/stages/authenticator_totp/AuthenticatorTOTPStageForm.ts b/web/src/admin/stages/authenticator_totp/AuthenticatorTOTPStageForm.ts
index 6489a24c0..4a61eba86 100644
--- a/web/src/admin/stages/authenticator_totp/AuthenticatorTOTPStageForm.ts
+++ b/web/src/admin/stages/authenticator_totp/AuthenticatorTOTPStageForm.ts
@@ -1,8 +1,8 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import "@goauthentik/elements/SearchSelect";
 import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
+import "@goauthentik/elements/forms/SearchSelect";
 
 import { t } from "@lingui/macro";
 
diff --git a/web/src/admin/stages/authenticator_webauthn/AuthenticateWebAuthnStageForm.ts b/web/src/admin/stages/authenticator_webauthn/AuthenticateWebAuthnStageForm.ts
index d48791b34..f24bf5e4a 100644
--- a/web/src/admin/stages/authenticator_webauthn/AuthenticateWebAuthnStageForm.ts
+++ b/web/src/admin/stages/authenticator_webauthn/AuthenticateWebAuthnStageForm.ts
@@ -1,7 +1,7 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import "@goauthentik/elements/SearchSelect";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
+import "@goauthentik/elements/forms/SearchSelect";
 
 import { t } from "@lingui/macro";
 
diff --git a/web/src/admin/stages/identification/IdentificationStageForm.ts b/web/src/admin/stages/identification/IdentificationStageForm.ts
index 3103332ea..7a66f3cbd 100644
--- a/web/src/admin/stages/identification/IdentificationStageForm.ts
+++ b/web/src/admin/stages/identification/IdentificationStageForm.ts
@@ -1,9 +1,9 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 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";
+import "@goauthentik/elements/forms/SearchSelect";
 
 import { t } from "@lingui/macro";
 
diff --git a/web/src/admin/stages/invitation/InvitationForm.ts b/web/src/admin/stages/invitation/InvitationForm.ts
index 83f943478..2f2ec3925 100644
--- a/web/src/admin/stages/invitation/InvitationForm.ts
+++ b/web/src/admin/stages/invitation/InvitationForm.ts
@@ -1,9 +1,9 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { dateTimeLocal, first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/CodeMirror";
-import "@goauthentik/elements/SearchSelect";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
+import "@goauthentik/elements/forms/SearchSelect";
 import YAML from "yaml";
 
 import { t } from "@lingui/macro";
diff --git a/web/src/admin/stages/password/PasswordStageForm.ts b/web/src/admin/stages/password/PasswordStageForm.ts
index d0de11a55..755888f1f 100644
--- a/web/src/admin/stages/password/PasswordStageForm.ts
+++ b/web/src/admin/stages/password/PasswordStageForm.ts
@@ -1,9 +1,9 @@
 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";
+import "@goauthentik/elements/forms/SearchSelect";
 
 import { t } from "@lingui/macro";
 
diff --git a/web/src/admin/stages/user_write/UserWriteStageForm.ts b/web/src/admin/stages/user_write/UserWriteStageForm.ts
index 4736741fc..2b1660ea4 100644
--- a/web/src/admin/stages/user_write/UserWriteStageForm.ts
+++ b/web/src/admin/stages/user_write/UserWriteStageForm.ts
@@ -1,9 +1,9 @@
 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";
+import "@goauthentik/elements/forms/SearchSelect";
 
 import { t } from "@lingui/macro";
 
diff --git a/web/src/admin/tenants/TenantForm.ts b/web/src/admin/tenants/TenantForm.ts
index ce5e301be..8217a569b 100644
--- a/web/src/admin/tenants/TenantForm.ts
+++ b/web/src/admin/tenants/TenantForm.ts
@@ -1,10 +1,10 @@
 import { DEFAULT_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";
+import "@goauthentik/elements/forms/SearchSelect";
 import { DefaultTenant } from "@goauthentik/elements/sidebar/SidebarBrand";
 import YAML from "yaml";
 
diff --git a/web/src/admin/tokens/TokenForm.ts b/web/src/admin/tokens/TokenForm.ts
index 2589e3fa7..9aeb2d513 100644
--- a/web/src/admin/tokens/TokenForm.ts
+++ b/web/src/admin/tokens/TokenForm.ts
@@ -1,9 +1,10 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { dateTimeLocal, 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";
+import "@goauthentik/elements/forms/Radio";
+import "@goauthentik/elements/forms/SearchSelect";
 
 import { t } from "@lingui/macro";
 
@@ -82,20 +83,23 @@ export class TokenForm extends ModelForm<Token, string> {
                 </ak-search-select>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal label=${t`Intent`} ?required=${true} name="intent">
-                <select class="pf-c-form-control">
-                    <option
-                        value=${IntentEnum.Api}
-                        ?selected=${this.instance?.intent === IntentEnum.Api}
-                    >
-                        ${t`API Token (can be used to access the API programmatically)`}
-                    </option>
-                    <option
-                        value=${IntentEnum.AppPassword}
-                        ?selected=${this.instance?.intent === IntentEnum.AppPassword}
-                    >
-                        ${t`App password (can be used to login using a flow executor)`}
-                    </option>
-                </select>
+                <ak-radio
+                    .options=${[
+                        {
+                            label: t`API Token`,
+                            value: IntentEnum.Api,
+                            default: true,
+                            description: html`${t`Used to access the API programmatically`}`,
+                        },
+                        {
+                            label: t`App password.`,
+                            value: IntentEnum.AppPassword,
+                            description: html`${t`Used to login using a flow executor`}`,
+                        },
+                    ]}
+                    .value=${this.instance?.intent}
+                >
+                </ak-radio>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal label=${t`Description`} name="description">
                 <input
diff --git a/web/src/admin/users/UserResetEmailForm.ts b/web/src/admin/users/UserResetEmailForm.ts
index 19e559bd7..e26d42738 100644
--- a/web/src/admin/users/UserResetEmailForm.ts
+++ b/web/src/admin/users/UserResetEmailForm.ts
@@ -1,8 +1,8 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { groupBy } from "@goauthentik/common/utils";
-import "@goauthentik/elements/SearchSelect";
 import { Form } from "@goauthentik/elements/forms/Form";
 import "@goauthentik/elements/forms/HorizontalFormElement";
+import "@goauthentik/elements/forms/SearchSelect";
 
 import { t } from "@lingui/macro";
 
diff --git a/web/src/elements/forms/Form.ts b/web/src/elements/forms/Form.ts
index 67bafdfd1..a8248da42 100644
--- a/web/src/elements/forms/Form.ts
+++ b/web/src/elements/forms/Form.ts
@@ -2,8 +2,8 @@ import { EVENT_REFRESH } from "@goauthentik/common/constants";
 import { MessageLevel } from "@goauthentik/common/messages";
 import { camelToSnake, convertToSlug } from "@goauthentik/common/utils";
 import { AKElement } from "@goauthentik/elements/Base";
-import { SearchSelect } from "@goauthentik/elements/SearchSelect";
 import { HorizontalFormElement } from "@goauthentik/elements/forms/HorizontalFormElement";
+import { SearchSelect } from "@goauthentik/elements/forms/SearchSelect";
 import { showMessage } from "@goauthentik/elements/messages/MessageContainer";
 import "@polymer/iron-form/iron-form";
 import { IronFormElement } from "@polymer/iron-form/iron-form";
diff --git a/web/src/elements/forms/HorizontalFormElement.ts b/web/src/elements/forms/HorizontalFormElement.ts
index b7732ce08..ea12bf826 100644
--- a/web/src/elements/forms/HorizontalFormElement.ts
+++ b/web/src/elements/forms/HorizontalFormElement.ts
@@ -90,6 +90,7 @@ export class HorizontalFormElement extends AKElement {
                 case "ak-codemirror":
                 case "ak-chip-group":
                 case "ak-search-select":
+                case "ak-radio":
                     (input as HTMLInputElement).name = this.name;
                     break;
                 default:
diff --git a/web/src/elements/forms/ModalForm.ts b/web/src/elements/forms/ModalForm.ts
index 6f430f00e..bd8668053 100644
--- a/web/src/elements/forms/ModalForm.ts
+++ b/web/src/elements/forms/ModalForm.ts
@@ -65,7 +65,16 @@ export class ModalForm extends ModalButton {
                     </h1>
                 </div>
             </section>
-            <section class="pf-c-modal-box__body">
+            <section
+                class="pf-c-modal-box__body"
+                @scroll=${() => {
+                    window.dispatchEvent(
+                        new CustomEvent("scroll", {
+                            bubbles: true,
+                        }),
+                    );
+                }}
+            >
                 <slot name="form"></slot>
             </section>
             <footer class="pf-c-modal-box__footer">
diff --git a/web/src/elements/forms/Radio.ts b/web/src/elements/forms/Radio.ts
new file mode 100644
index 000000000..eba11dd15
--- /dev/null
+++ b/web/src/elements/forms/Radio.ts
@@ -0,0 +1,81 @@
+import { AKElement } from "@goauthentik/elements/Base";
+
+import { CSSResult, TemplateResult, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+import AKGlobal from "@goauthentik/common/styles/authentik.css";
+import PFForm from "@patternfly/patternfly/components/Form/form.css";
+import PFRadio from "@patternfly/patternfly/components/Radio/radio.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+
+export interface RadioOption<T> {
+    label: string;
+    description?: TemplateResult;
+    default: boolean;
+    value: T;
+}
+
+@customElement("ak-radio")
+export class Radio<T> extends AKElement {
+    @property({ attribute: false })
+    options: RadioOption<T>[] = [];
+
+    @property()
+    name = "";
+
+    @property()
+    value?: T;
+
+    @property({ attribute: false })
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onChange: (value: T) => void = (value: T) => {
+        return;
+    };
+
+    static get styles(): CSSResult[] {
+        return [
+            PFBase,
+            PFRadio,
+            PFForm,
+            AKGlobal,
+            css`
+                .pf-c-form__group-control {
+                    padding-top: calc(
+                        var(--pf-c-form--m-horizontal__group-label--md--PaddingTop) * 1.3
+                    );
+                }
+            `,
+        ];
+    }
+
+    render(): TemplateResult {
+        if (!this.value) {
+            const def = this.options.filter((opt) => opt.default);
+            if (def.length > 0) {
+                this.value = def[0].value;
+            }
+        }
+        return html`<div class="pf-c-form__group-control pf-m-stack">
+            ${this.options.map((opt) => {
+                const elId = `${this.name}-${opt.value}`;
+                return html`<div class="pf-c-radio">
+                    <input
+                        class="pf-c-radio__input"
+                        type="radio"
+                        name="${this.name}"
+                        id=${elId}
+                        @change=${() => {
+                            this.value = opt.value;
+                            this.onChange(opt.value);
+                        }}
+                        .checked=${opt.value === this.value}
+                    />
+                    <label class="pf-c-radio__label" for=${elId}>${opt.label}</label>
+                    ${opt.description
+                        ? html`<span class="pf-c-radio__description">${opt.description}</span>`
+                        : html``}
+                </div>`;
+            })}
+        </div>`;
+    }
+}
diff --git a/web/src/elements/SearchSelect.ts b/web/src/elements/forms/SearchSelect.ts
similarity index 92%
rename from web/src/elements/SearchSelect.ts
rename to web/src/elements/forms/SearchSelect.ts
index dc0f4fb80..f8518783f 100644
--- a/web/src/elements/SearchSelect.ts
+++ b/web/src/elements/forms/SearchSelect.ts
@@ -66,11 +66,25 @@ export class SearchSelect<T> extends AKElement {
         });
     };
 
+    scrollHandler?: () => void;
+    observer: IntersectionObserver;
+
     dropdownContainer: HTMLDivElement;
 
     constructor() {
         super();
         this.dropdownContainer = document.createElement("div");
+        this.observer = new IntersectionObserver(() => {
+            this.open = false;
+            this.shadowRoot
+                ?.querySelectorAll<HTMLInputElement>(
+                    ".pf-c-form-control.pf-c-select__toggle-typeahead",
+                )
+                .forEach((input) => {
+                    input.blur();
+                });
+        });
+        this.observer.observe(this);
     }
 
     toForm(): unknown {
@@ -102,12 +116,20 @@ export class SearchSelect<T> extends AKElement {
         document.body.append(this.dropdownContainer);
         this.updateData();
         this.addEventListener(EVENT_REFRESH, this.updateData);
+        this.scrollHandler = () => {
+            this.requestUpdate();
+        };
+        window.addEventListener("scroll", this.scrollHandler);
     }
 
     disconnectedCallback(): void {
         super.disconnectedCallback();
         this.removeEventListener(EVENT_REFRESH, this.updateData);
+        if (this.scrollHandler) {
+            window.removeEventListener("scroll", this.scrollHandler);
+        }
         this.dropdownContainer.remove();
+        this.observer.disconnect();
     }
 
     /*
@@ -238,7 +260,7 @@ export class SearchSelect<T> extends AKElement {
                             setTimeout(() => {
                                 this.open = false;
                                 this.renderMenu();
-                            }, 200);
+                            }, 100);
                         }}
                         .value=${this.selectedObject
                             ? this.renderElement(this.selectedObject)