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>

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";
 

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">
+                <ak-radio
-                    <option
+                    .options=${[
-                        value=${PolicyEngineMode.Any}
+                        {
-                        ?selected=${this.instance?.policyEngineMode === PolicyEngineMode.Any}
+                            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}
                 >
-                        ${t`ANY, any policy must match to grant access.`}
+                </ak-radio>
-                    </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-group .expanded=${true}>
                 <span slot="header"> ${t`UI settings`} </span>

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";
 

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";

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">
+                <ak-radio
-                    ${this.renderSeverity()}
+                    .options=${[
-                </select>
+                        {
+                            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>`;
     }

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";
 

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,17 +76,54 @@ export class FlowForm extends ModelForm<Flow, string> {
         return flow;
     };
 
-    renderDesignations(): TemplateResult {
+    renderForm(): TemplateResult {
-        return html`
+        return html`<form class="pf-c-form pf-m-horizontal">
+            <ak-form-element-horizontal label=${t`Name`} ?required=${true} name="name">
+                <input
+                    type="text"
+                    value="${ifDefined(this.instance?.name)}"
+                    class="pf-c-form-control"
+                    required
+                />
+            </ak-form-element-horizontal>
+            <ak-form-element-horizontal label=${t`Title`} ?required=${true} name="title">
+                <input
+                    type="text"
+                    value="${ifDefined(this.instance?.title)}"
+                    class="pf-c-form-control"
+                    required
+                />
+                <p class="pf-c-form__helper-text">${t`Shown as the Title in Flow pages.`}</p>
+            </ak-form-element-horizontal>
+            <ak-form-element-horizontal label=${t`Slug`} ?required=${true} name="slug">
+                <input
+                    type="text"
+                    value="${ifDefined(this.instance?.slug)}"
+                    class="pf-c-form-control"
+                    required
+                />
+                <p class="pf-c-form__helper-text">${t`Visible in the URL.`}</p>
+            </ak-form-element-horizontal>
+            <ak-form-element-horizontal
+                label=${t`Designation`}
+                ?required=${true}
+                name="designation"
+            >
+                <select class="pf-c-form-control">
+                    <option value="" ?selected=${this.instance?.designation === undefined}>
+                        ---------
+                    </option>
                     <option
                         value=${FlowDesignationEnum.Authentication}
-                ?selected=${this.instance?.designation === FlowDesignationEnum.Authentication}
+                        ?selected=${this.instance?.designation ===
+                        FlowDesignationEnum.Authentication}
                     >
                         ${DesignationToLabel(FlowDesignationEnum.Authentication)}
                     </option>
                     <option
                         value=${FlowDesignationEnum.Authorization}
-                ?selected=${this.instance?.designation === FlowDesignationEnum.Authorization}
+                        ?selected=${this.instance?.designation ===
+                        FlowDesignationEnum.Authorization}
                     >
                         ${DesignationToLabel(FlowDesignationEnum.Authorization)}
                     </option>
@@ -108,7 +147,8 @@ export class FlowForm extends ModelForm<Flow, string> {
                     </option>
                     <option
                         value=${FlowDesignationEnum.StageConfiguration}
-                ?selected=${this.instance?.designation === FlowDesignationEnum.StageConfiguration}
+                        ?selected=${this.instance?.designation ===
+                        FlowDesignationEnum.StageConfiguration}
                     >
                         ${DesignationToLabel(FlowDesignationEnum.StageConfiguration)}
                     </option>
@@ -118,32 +158,17 @@ export class FlowForm extends ModelForm<Flow, string> {
                     >
                         ${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.`}
-    renderDeniedAction(): TemplateResult {
+                </p>
-        return html` <option
+            </ak-form-element-horizontal>
-                value=${DeniedActionEnum.MessageContinue}
+            <ak-form-element-horizontal
-                ?selected=${this.instance?.deniedAction === DeniedActionEnum.MessageContinue}
+                label=${t`Authentication`}
+                ?required=${true}
+                name="authentication"
             >
-                ${t`MESSAGE_CONTINUE will follow the ?next parameter if set, otherwise show a message.`}
+                <select class="pf-c-form-control">
-            </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}
@@ -166,15 +191,93 @@ export class FlowForm extends ModelForm<Flow, string> {
                     </option>
                     <option
                         value=${AuthenticationEnum.RequireSuperuser}
-                ?selected=${this.instance?.authentication === AuthenticationEnum.RequireSuperuser}
+                        ?selected=${this.instance?.authentication ===
+                        AuthenticationEnum.RequireSuperuser}
                     >
                         ${t`Require superuser.`}
                     </option>
-        `;
+                </select>
-    }
+                <p class="pf-c-form__helper-text">
-
+                    ${t`Required authentication level for this flow.`}
-    renderLayout(): TemplateResult {
+                </p>
-        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}
@@ -205,99 +308,6 @@ export class FlowForm extends ModelForm<Flow, string> {
                             >
                                 ${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">
-                <input
-                    type="text"
-                    value="${ifDefined(this.instance?.name)}"
-                    class="pf-c-form-control"
-                    required
-                />
-            </ak-form-element-horizontal>
-            <ak-form-element-horizontal label=${t`Title`} ?required=${true} name="title">
-                <input
-                    type="text"
-                    value="${ifDefined(this.instance?.title)}"
-                    class="pf-c-form-control"
-                    required
-                />
-                <p class="pf-c-form__helper-text">${t`Shown as the Title in Flow pages.`}</p>
-            </ak-form-element-horizontal>
-            <ak-form-element-horizontal label=${t`Slug`} ?required=${true} name="slug">
-                <input
-                    type="text"
-                    value="${ifDefined(this.instance?.slug)}"
-                    class="pf-c-form-control"
-                    required
-                />
-                <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}
-                name="designation"
-            >
-                <select class="pf-c-form-control">
-                    <option value="" ?selected=${this.instance?.designation === undefined}>
-                        ---------
-                    </option>
-                    ${this.renderDesignations()}
-                </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`}
-                ?required=${true}
-                name="deniedAction"
-            >
-                <select class="pf-c-form-control">
-                    ${this.renderDeniedAction()}
-                </select>
-                <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`Layout`} ?required=${true} name="layout">
-                <select class="pf-c-form-control">
-                    ${this.renderLayout()}
                         </select>
                     </ak-form-element-horizontal>
                     ${until(
@@ -311,7 +321,8 @@ export class FlowForm extends ModelForm<Flow, string> {
                                         ${this.instance?.background
                                             ? html`
                                                   <p class="pf-c-form__helper-text">
-                                              ${t`Currently set to:`} ${this.instance?.background}
+                                                      ${t`Currently set to:`}
+                                                      ${this.instance?.background}
                                                   </p>
                                               `
                                             : html``}
@@ -327,7 +338,8 @@ export class FlowForm extends ModelForm<Flow, string> {
                                                           type="checkbox"
                                                           class="pf-c-check__input"
                                                           @change=${(ev: Event) => {
-                                                      const target = ev.target as HTMLInputElement;
+                                                              const target =
+                                                                  ev.target as HTMLInputElement;
                                                               this.clearBackground = target.checked;
                                                           }}
                                                       />
@@ -357,19 +369,8 @@ export class FlowForm extends ModelForm<Flow, string> {
                             </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>
                 </div>
-                <p class="pf-c-form__helper-text">
+            </ak-form-group>
-                    ${t`Enable compatibility mode, increases compatibility with password managers on mobile devices.`}
-                </p>
-            </ak-form-element-horizontal>
         </form>`;
     }
 }

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">
+                <ak-radio
-                    <option
+                    .options=${[
-                        value=${InvalidResponseActionEnum.Retry}
+                        {
-                        ?selected=${this.instance?.invalidResponseAction ===
+                            label: "RETRY",
-                        InvalidResponseActionEnum.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}
                 >
-                        ${t`RETRY returns the error message and a similar challenge to the executor.`}
+                </ak-radio>
-                    </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>
                 <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">
+                <ak-radio
-                    <option
+                    .options=${[
-                        value=${PolicyEngineMode.Any}
+                        {
-                        ?selected=${this.instance?.policyEngineMode === PolicyEngineMode.Any}
+                            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}
                 >
-                        ${t`ANY, any policy must match to include this stage access.`}
+                </ak-radio>
-                    </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-form-element-horizontal>
         </form>`;
     }

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";
 

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";

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";
 

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";
 

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";

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";
 

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";

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">
+                <ak-radio
-                    <option
+                    .options=${[
-                        value="${LDAPAPIAccessMode.Cached}"
+                        {
-                        ?selected=${this.instance?.bindMode === LDAPAPIAccessMode.Cached}
+                            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}
                 >
-                        ${t`Cached binding, flow is executed and session is cached in memory. Flow is executed when session expires.`}
+                </ak-radio>
-                    </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>
                 <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">
+                <ak-radio
-                    <option
+                    .options=${[
-                        value="${LDAPAPIAccessMode.Cached}"
+                        {
-                        ?selected=${this.instance?.searchMode === LDAPAPIAccessMode.Cached}
+                            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}
                 >
-                        ${t`Cached querying, the outpost holds all users and groups in-memory and will refresh every 5 Minutes.`}
+                </ak-radio>
-                    </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>
                 <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">

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">
+                        <ak-radio
-                            <option
+                            .options=${[
-                                value="${IssuerModeEnum.PerProvider}"
+                                {
-                                ?selected=${this.instance?.issuerMode ===
+                                    label: t`Each provider has a different issuer, based on the application slug`,
-                                IssuerModeEnum.PerProvider}
+                                    value: IssuerModeEnum.PerProvider,
+                                    default: true,
+                                },
+                                {
+                                    label: t`Same identifier is used for all providers`,
+                                    value: IssuerModeEnum.Global,
+                                },
+                            ]}
+                            .value=${this.instance?.issuerMode}
                         >
-                                ${t`Each provider has a different issuer, based on the application slug.`}
+                        </ak-radio>
-                            </option>
-                            <option
-                                value="${IssuerModeEnum.Global}"
-                                ?selected=${this.instance?.issuerMode === IssuerModeEnum.Global}
-                            >
-                                ${t`Same identifier is used for all providers`}
-                            </option>
-                        </select>
                         <p class="pf-c-form__helper-text">
                             ${t`Configure how the issuer field of the ID Token should be filled.`}
                         </p>

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";

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">
+                        <ak-radio
-                            <option
+                            .options=${[
-                                value=${SpBindingEnum.Redirect}
+                                {
-                                ?selected=${this.instance?.spBinding === SpBindingEnum.Redirect}
+                                    label: t`Redirect`,
+                                    value: SpBindingEnum.Redirect,
+                                    default: true,
+                                },
+                                {
+                                    label: t`Post`,
+                                    value: SpBindingEnum.Post,
+                                },
+                            ]}
+                            .value=${this.instance?.spBinding}
                         >
-                                ${t`Redirect`}
+                        </ak-radio>
-                            </option>
-                            <option
-                                value=${SpBindingEnum.Post}
-                                ?selected=${this.instance?.spBinding === SpBindingEnum.Post}
-                            >
-                                ${t`Post`}
-                            </option>
-                        </select>
                         <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">
+                        <ak-radio
-                            <option
+                            .options=${[
-                                value=${DigestAlgorithmEnum._200009Xmldsigsha1}
+                                {
-                                ?selected=${this.instance?.digestAlgorithm ===
+                                    label: "SHA1",
-                                DigestAlgorithmEnum._200009Xmldsigsha1}
+                                    value: DigestAlgorithmEnum._200009Xmldsigsha1,
+                                },
+                                {
+                                    label: "SHA256",
+                                    value: DigestAlgorithmEnum._200104Xmlencsha256,
+                                    default: true,
+                                },
+                                {
+                                    label: "SHA384",
+                                    value: DigestAlgorithmEnum._200104XmldsigMoresha384,
+                                },
+                                {
+                                    label: "SHA512",
+                                    value: DigestAlgorithmEnum._200104Xmlencsha512,
+                                },
+                            ]}
+                            .value=${this.instance?.digestAlgorithm}
                         >
-                                ${t`SHA1`}
+                        </ak-radio>
-                            </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-form-element-horizontal>
                     <ak-form-element-horizontal
                         label=${t`Signature algorithm`}
                         ?required=${true}
                         name="signatureAlgorithm"
                     >
-                        <select class="pf-c-form-control">
+                        <ak-radio
-                            <option
+                            .options=${[
-                                value=${SignatureAlgorithmEnum._200009XmldsigrsaSha1}
+                                {
-                                ?selected=${this.instance?.signatureAlgorithm ===
+                                    label: "RSA-SHA1",
-                                SignatureAlgorithmEnum._200009XmldsigrsaSha1}
+                                    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}
                         >
-                                ${t`RSA-SHA1`}
+                        </ak-radio>
-                            </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-form-element-horizontal>
                 </div>
             </ak-form-group>

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";
 

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";
 

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";
 

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";
 

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">
+                        <ak-radio
-                            <option
+                            .options=${[
-                                value=${BindingTypeEnum.Redirect}
+                                {
-                                ?selected=${this.instance?.bindingType === BindingTypeEnum.Redirect}
+                                    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}
                         >
-                                ${t`Redirect binding`}
+                        </ak-radio>
-                            </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-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">
+                        <ak-radio
-                            <option
+                            .options=${[
-                                value=${DigestAlgorithmEnum._200009Xmldsigsha1}
+                                {
-                                ?selected=${this.instance?.digestAlgorithm ===
+                                    label: "SHA1",
-                                DigestAlgorithmEnum._200009Xmldsigsha1}
+                                    value: DigestAlgorithmEnum._200009Xmldsigsha1,
+                                },
+                                {
+                                    label: "SHA256",
+                                    value: DigestAlgorithmEnum._200104Xmlencsha256,
+                                    default: true,
+                                },
+                                {
+                                    label: "SHA384",
+                                    value: DigestAlgorithmEnum._200104XmldsigMoresha384,
+                                },
+                                {
+                                    label: "SHA512",
+                                    value: DigestAlgorithmEnum._200104Xmlencsha512,
+                                },
+                            ]}
+                            .value=${this.instance?.digestAlgorithm}
                         >
-                                ${t`SHA1`}
+                        </ak-radio>
-                            </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-form-element-horizontal>
                     <ak-form-element-horizontal
                         label=${t`Signature algorithm`}
                         ?required=${true}
                         name="signatureAlgorithm"
                     >
-                        <select class="pf-c-form-control">
+                        <ak-radio
-                            <option
+                            .options=${[
-                                value=${SignatureAlgorithmEnum._200009XmldsigrsaSha1}
+                                {
-                                ?selected=${this.instance?.signatureAlgorithm ===
+                                    label: "RSA-SHA1",
-                                SignatureAlgorithmEnum._200009XmldsigrsaSha1}
+                                    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}
                         >
-                                ${t`RSA-SHA1`}
+                        </ak-radio>
-                            </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-form-element-horizontal>
                 </div>
             </ak-form-group>

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";
 

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";

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">
+                <ak-radio
-                    <option
+                    .options=${[
-                        value="${AuthTypeEnum.Basic}"
+                        {
-                        ?selected=${this.instance?.authType === AuthTypeEnum.Basic}
+                            label: t`Basic Auth`,
+                            value: AuthTypeEnum.Basic,
+                            default: true,
+                        },
+                        {
+                            label: t`Bearer Token`,
+                            value: AuthTypeEnum.Bearer,
+                        },
+                    ]}
+                    .value=${this.instance?.authType}
                 >
-                        ${t`Basic Auth`}
+                </ak-radio>
-                    </option>
-                    <option
-                        value="${AuthTypeEnum.Bearer}"
-                        ?selected=${this.instance?.authType === AuthTypeEnum.Bearer}
-                    >
-                        ${t`Bearer Token`}
-                    </option>
-                </select>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal
                 label=${t`External API URL`}

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";
 

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";
 

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";
 

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";
 

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";

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";
 

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";
 

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";
 

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">
+                <ak-radio
-                    <option
+                    .options=${[
-                        value=${IntentEnum.Api}
+                        {
-                        ?selected=${this.instance?.intent === IntentEnum.Api}
+                            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}
                 >
-                        ${t`API Token (can be used to access the API programmatically)`}
+                </ak-radio>
-                    </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-form-element-horizontal>
             <ak-form-element-horizontal label=${t`Description`} name="description">
                 <input

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";
 

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";

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:

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">

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>`;
+    }
+}

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)