diff --git a/pkg/storaged/block/format-dialog.jsx b/pkg/storaged/block/format-dialog.jsx
index 67761cf10dd..d2b67f6f86c 100644
--- a/pkg/storaged/block/format-dialog.jsx
+++ b/pkg/storaged/block/format-dialog.jsx
@@ -440,6 +440,9 @@ function format_dialog_internal(client, path, start, size, enable_dos_extended,
                 }
                 if (vals.type == "efi" && !vals.mount_point)
                     dlg.set_values({ mount_point: "/boot/efi" });
+            } else if (trigger == "crypto") {
+                if (vals.crypto != "none" && vals.crypto != " keep")
+                    dlg.show_field("crypto_options", "end");
             }
         },
         Action: {
diff --git a/pkg/storaged/dialog.jsx b/pkg/storaged/dialog.jsx
index c76a1b06781..36faa1ded96 100644
--- a/pkg/storaged/dialog.jsx
+++ b/pkg/storaged/dialog.jsx
@@ -286,7 +286,7 @@ const Row = ({ field, values, errors, onChange }) => {
                 </>
             );
         return (
-            <FormGroup label={titleLabel} hasNoPaddingTop={field.hasNoPaddingTop}>
+            <FormGroup data-tag={tag} label={titleLabel} hasNoPaddingTop={field.hasNoPaddingTop}>
                 { field_elts }
                 { nested_elts }
                 <FormHelper helperText={explanation} helperTextInvalid={validated && error} />
@@ -294,7 +294,7 @@ const Row = ({ field, values, errors, onChange }) => {
         );
     } else if (!field.bare) {
         return (
-            <FormGroup validated={validated} hasNoPaddingTop={field.hasNoPaddingTop}>
+            <FormGroup data-tag={tag} validated={validated} hasNoPaddingTop={field.hasNoPaddingTop}>
                 { field_elts }
                 { nested_elts }
                 <FormHelper helperText={explanation} helperTextInvalid={validated && error} />
@@ -465,7 +465,16 @@ export const dialog_open = (def) => {
                 return null;
         })).then(results => {
             const errors = { };
-            fields.forEach((f, i) => { if (results[i]) errors[f.tag] = results[i]; });
+            let scrolled = false;
+            fields.forEach((f, i) => {
+                if (results[i]) {
+                    if (!scrolled) {
+                        show_field(f.tag);
+                        scrolled = true;
+                    }
+                    errors[f.tag] = results[i];
+                }
+            });
             if (Object.keys(errors).length > 0)
                 return Promise.reject(errors);
         });
@@ -473,6 +482,29 @@ export const dialog_open = (def) => {
 
     const dlg = show_modal_dialog(props(), footer_props(null, null));
 
+    function show_field(tag, align) {
+        function scroll() {
+            const dialog_element = document.querySelector('#dialog .pf-v5-c-modal-box__body');
+            const field_element = document.querySelector('#dialog [data-tag="' + tag + '"]');
+
+            if (field_element) {
+                if (dialog_element) {
+                    // check if we need to scroll
+                    const dialog_rect = dialog_element.getBoundingClientRect();
+                    const field_rect = field_element.getBoundingClientRect();
+                    if (field_rect.top >= dialog_rect.top && field_rect.bottom <= dialog_rect.bottom)
+                        return;
+                }
+
+                field_element.scrollIntoView({ behavior: "smooth", block: align || "start" });
+            }
+        }
+        // By the time show_field is called from the "update"
+        // callback, newly visible fields don't exist yet in the
+        // DOM, so delay the scrolling a bit.
+        window.setTimeout(scroll, 10);
+    }
+
     const self = {
         run: (title, promise) => {
             update_footer(title, promise);
@@ -537,6 +569,8 @@ export const dialog_open = (def) => {
             update();
         },
 
+        show_field: show_field,
+
         close: () => {
             dlg.footerProps.dialog_done();
         }