@form-engine-ts/react 4.2.0 → 4.3.2

package/README.md

@@ -39,6 +39,17 @@ export function ContactForm() {
 
 Use any compatible `TranslationAdapter` in place of the mock translator.
 
+## Choice field layout
+
+Radio and checkbox questions use the flat layout by default. Set `appearance.choiceField` to `"grouped"` to render
+them as bordered, accessible `<fieldset>` groups with `<legend>` titles:
+
+```tsx
+<FormRenderer appearance={{ choiceField: "grouped" }} />
+```
+
+`groupedChoiceFields={true}` remains available as a deprecated compatibility alias.
+
 Define `schema.pages` to enable Back/Next navigation, page validation, conditional page skipping, and an accessible
 progress indicator. Pass `autoSaveKey` to persist a versioned draft in `localStorage` after a 500ms debounce and restore it
 on the next mount:
@@ -168,8 +179,15 @@ state. Text controls forward schema `minLength`, `maxLength`, and `pattern` cons
 `renderCharacterCount` can replace the default count. Guard evaluation, confirmation, receipt persistence, and provider
 submission share an in-flight lock so rapid clicks cannot submit twice.
 
+Set `submissionConfirmation={{ enabled: true, renderMode: "replace" }}` to show a standard answer review before
+submission even when no submission guard is configured. The default `inline` mode keeps the form visible; `replace` and
+`dialog` provide alternate presentations. The standard review lists visible answers with their resolved labels and
+formatted display values. `renderSubmissionConfirmation` receives these as `visibleItems`; guard confirmations continue
+to receive their findings, while generic confirmations provide an empty findings array.
+
 The Builder basic-settings section edits source `title` and `description` through the same policy-aware action pipeline.
-Submission confirmation slots receive the effective message, localized schema, and visible answers. An `onSubmit` result
+Submission confirmation slots receive the effective message, localized schema, visible answers, and formatted
+`visibleItems`. An `onSubmit` result
 may provide `submissionId` and `submittedAt`, which Renderer copies into its receipt. Receipt stores support `getBatch`,
 and `useSubmissionReceipts` loads multiple form/version receipts for list and dashboard surfaces.
 

package/dist/index.cjs

@@ -3276,8 +3276,11 @@ function describedBy(field, error, helpId, errorId) {
   );
   return ids.length === 0 ? void 0 : ids.join(" ");
 }
-function RequiredMark({ required }) {
-  return required ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "fe-required", "aria-hidden": "true", children: [
+function RequiredMark({
+  required,
+  className = "fe-required"
+}) {
+  return required ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className, "aria-hidden": "true", children: [
     " ",
     "*"
   ] }) : null;
@@ -3288,13 +3291,59 @@ function FieldMessage({ props }) {
     props.error === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { id: props.errorId, className: "fe-error", children: props.translate(props.error.messageKey, props.error.params) })
   ] });
 }
-function DefaultField(props) {
+function GroupedChoiceDescription({ props }) {
+  return props.field.description === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { id: props.helpId, className: "fe-field-description", children: props.field.description });
+}
+function GroupedChoiceError({ props }) {
+  return props.error === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { id: props.errorId, className: "fe-field-error", role: "alert", children: props.translate(props.error.messageKey, props.error.params) });
+}
+function DefaultField({
+  groupedChoiceFields,
+  ...props
+}) {
   const { field, value, setValue, inputId, error, translate } = props;
   const ariaProps = {
     "aria-describedby": describedBy(field, error, props.helpId, props.errorId),
     "aria-invalid": error === void 0 ? void 0 : true
   };
   if (field.type === "checkbox") {
+    if (groupedChoiceFields) {
+      return (
+        // biome-ignore lint/a11y/useAriaPropsSupportedByRole: The grouped fieldset exposes the required state for the complete choice question.
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "fieldset",
+          {
+            className: "fe-choice-group fe-field--checkbox",
+            "data-field-id": field.id,
+            "aria-describedby": describedBy(field, error, props.helpId, props.errorId),
+            "aria-invalid": Boolean(error),
+            "aria-required": field.required,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("legend", { className: "fe-choice-legend", children: [
+                field.title,
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RequiredMark, { required: field.required, className: "fe-required-badge" })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(GroupedChoiceDescription, { props }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fe-choice-options", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { className: "fe-choice-option", htmlFor: inputId, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "input",
+                  {
+                    id: inputId,
+                    name: field.id,
+                    type: "checkbox",
+                    checked: value === true,
+                    "aria-label": field.title,
+                    onChange: (event) => setValue(event.currentTarget.checked)
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: field.title })
+              ] }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(GroupedChoiceError, { props })
+            ]
+          }
+        )
+      );
+    }
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fe-field fe-field--checkbox", "data-field-id": field.id, children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { className: "fe-check-label", htmlFor: inputId, children: [
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -3318,6 +3367,85 @@ function DefaultField(props) {
   }
   if (field.type === "radio" || field.type === "multi-select") {
     const selected = Array.isArray(value) ? value : [];
+    if (field.type === "radio" && groupedChoiceFields) {
+      return (
+        // biome-ignore lint/a11y/useAriaPropsSupportedByRole: The grouped fieldset exposes the required state for the complete choice question.
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "fieldset",
+          {
+            className: "fe-choice-group fe-field--radio",
+            "data-field-id": field.id,
+            "aria-describedby": describedBy(field, error, props.helpId, props.errorId),
+            "aria-invalid": Boolean(error),
+            "aria-required": field.required,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("legend", { className: "fe-choice-legend", children: [
+                field.title,
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RequiredMark, { required: field.required, className: "fe-required-badge" })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(GroupedChoiceDescription, { props }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fe-choice-options", children: field.options.map((option, index) => {
+                const optionId = `${inputId}-${index}`;
+                const checked = value === option.id;
+                return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { className: "fe-choice-option", htmlFor: optionId, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    "input",
+                    {
+                      id: optionId,
+                      name: field.id,
+                      type: "radio",
+                      value: option.id,
+                      checked,
+                      onKeyDown: (event) => {
+                        if (event.key !== "ArrowDown" && event.key !== "ArrowRight" && event.key !== "ArrowUp" && event.key !== "ArrowLeft")
+                          return;
+                        event.preventDefault();
+                        const offset = event.key === "ArrowDown" || event.key === "ArrowRight" ? 1 : -1;
+                        const nextIndex = (index + offset + field.options.length) % field.options.length;
+                        const nextOption = field.options[nextIndex];
+                        if (nextOption === void 0) return;
+                        setValue(nextOption.id);
+                        document.getElementById(`${inputId}-${nextIndex}`)?.focus();
+                      },
+                      onChange: () => setValue(option.id)
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: option.label })
+                ] }, option.id);
+              }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(GroupedChoiceError, { props })
+            ]
+          }
+        )
+      );
+    }
+    if (field.type === "radio") {
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fe-field fe-field--radio", "data-field-id": field.id, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fe-label", children: [
+          field.title,
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RequiredMark, { required: field.required })
+        ] }),
+        field.options.map((option, index) => {
+          const optionId = `${inputId}-${index}`;
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { className: "fe-check-label", htmlFor: optionId, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "input",
+              {
+                ...ariaProps,
+                id: optionId,
+                name: field.id,
+                type: "radio",
+                value: option.id,
+                checked: value === option.id,
+                onChange: () => setValue(option.id)
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: option.label })
+          ] }, option.id);
+        }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldMessage, { props })
+      ] });
+    }
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("fieldset", { className: `fe-field fe-field--${field.type}`, "data-field-id": field.id, ...ariaProps, children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("legend", { className: "fe-label", children: [
         field.title,
@@ -3567,7 +3695,10 @@ function ContextFormRenderer({
   beforeSubmit,
   onDraftSave,
   successRenderMode = "append",
-  submissionConfirmationRenderMode = "inline",
+  appearance,
+  groupedChoiceFields = false,
+  submissionConfirmation,
+  submissionConfirmationRenderMode,
   showHiddenFieldsInSummary = false,
   fieldsClassName,
   hideFormOnSuccess = false,
@@ -3578,6 +3709,7 @@ function ContextFormRenderer({
   slots = {}
 }) {
   const form = useForm();
+  const isGroupedMode = appearance?.choiceField === "grouped" || groupedChoiceFields;
   const prefix = (0, import_react5.useId)().replace(/:/g, "");
   const formRef = (0, import_react5.useRef)(null);
   const loadedDraftKey = (0, import_react5.useRef)(null);
@@ -3603,6 +3735,12 @@ function ContextFormRenderer({
   const activeVisibleIndex = visiblePageIndexes.indexOf(currentPageIndex);
   const fieldIds = activePage === void 0 ? void 0 : new Set(activePage.questionIds);
   const visibleValues = (0, import_react5.useMemo)(() => (0, import_core4.selectVisibleAnswers)(form.schema, form.values), [form.schema, form.values]);
+  const visibleItems = (0, import_react5.useMemo)(
+    () => buildSubmittedItems(form.schema, form.values, form.visibility, (key) => form.translate(key), false),
+    [form.schema, form.translate, form.values, form.visibility]
+  );
+  const confirmationRenderMode = submissionConfirmation?.renderMode ?? submissionConfirmationRenderMode ?? "inline";
+  const confirmationEnabled = submissionConfirmation?.enabled === true;
   const submitState = confirmation === null && !guardsPending ? form.submitStatus : "confirming";
   const interactionLocked = submitState === "confirming" || submitState === "submitting";
   const isReplaceMode = successRenderMode === "replace" || hideFormOnSuccess;
@@ -3670,7 +3808,7 @@ function ContextFormRenderer({
     if (confirmation === null) return;
     const confirmButton = confirmationRef.current?.querySelector("[data-fe-confirm], button");
     confirmButton?.focus();
-    if (submissionConfirmationRenderMode !== "dialog") return;
+    if (confirmationRenderMode !== "dialog") return;
     const onKeyDown = (event) => {
       if (event.key === "Escape") {
         event.preventDefault();
@@ -3697,7 +3835,7 @@ function ContextFormRenderer({
     };
     globalThis.addEventListener("keydown", onKeyDown);
     return () => globalThis.removeEventListener("keydown", onKeyDown);
-  }, [confirmation, focusSubmitButton, submissionConfirmationRenderMode]);
+  }, [confirmation, confirmationRenderMode, focusSubmitButton]);
   (0, import_react5.useEffect)(() => {
     if (autoSaveKey === void 0 || typeof globalThis.localStorage === "undefined") return;
     const loadIdentity = `${autoSaveKey}:${form.schema.id}:${form.schema.version}`;
@@ -3768,21 +3906,29 @@ function ContextFormRenderer({
     }
     const validation = (0, import_core4.validateAnswers)(form.schema, form.values);
     const firstInvalidFieldId = validation.issues[0]?.fieldId;
-    if (validation.valid && !guardsConfirmed && submissionGuards.length > 0) {
+    if (validation.valid && !guardsConfirmed) {
       rendererSubmissionInFlight.current = true;
-      setGuardsPending(true);
+      setGuardsPending(submissionGuards.length > 0);
       try {
-        const guardResult = await runSubmissionGuards(submissionGuards);
-        if (guardResult.status === "block") {
-          setGuardMessage(guardResult.message ?? form.translate("form.submissionBlocked"));
-          return { status: "cancelled" };
+        if (submissionGuards.length > 0) {
+          const guardResult = await runSubmissionGuards(submissionGuards);
+          if (guardResult.status === "block") {
+            setGuardMessage(guardResult.message ?? form.translate("form.submissionBlocked"));
+            return { status: "cancelled" };
+          }
+          if (guardResult.status === "confirm") {
+            setGuardMessage(null);
+            setConfirmation({
+              findings: guardResult.findings,
+              generic: false,
+              ...guardResult.message === void 0 ? {} : { message: guardResult.message }
+            });
+            return { status: "cancelled" };
+          }
         }
-        if (guardResult.status === "confirm") {
+        if (confirmationEnabled) {
           setGuardMessage(null);
-          setConfirmation({
-            findings: guardResult.findings,
-            ...guardResult.message === void 0 ? {} : { message: guardResult.message }
-          });
+          setConfirmation({ findings: [], generic: true });
           return { status: "cancelled" };
         }
       } finally {
@@ -3945,17 +4091,18 @@ function ContextFormRenderer({
     {
       ref: confirmationRef,
       className: "fe-submission-confirmation",
-      role: submissionConfirmationRenderMode === "dialog" ? void 0 : "dialog",
+      role: confirmationRenderMode === "dialog" ? void 0 : "dialog",
       children: slots.renderSubmissionConfirmation?.({
         findings: confirmation?.findings ?? [],
-        message: confirmation?.message ?? resolveMessage("confirmSensitiveDataMessage", form.translate("form.confirmSensitiveData")),
+        message: confirmation?.message ?? (confirmation?.generic === true ? form.locale.toLowerCase().startsWith("ja") ? "\u56DE\u7B54\u5185\u5BB9\u3092\u3054\u78BA\u8A8D\u306E\u3046\u3048\u3001\u9001\u4FE1\u3057\u3066\u304F\u3060\u3055\u3044\u3002" : "Please review your answers before submitting." : resolveMessage("confirmSensitiveDataMessage", form.translate("form.confirmSensitiveData"))),
         schema: form.schema,
         visibleValues,
+        visibleItems,
         onConfirm: confirmSubmission,
         onCancel: cancelSubmission
       }) ?? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { children: resolveMessage("confirmSensitiveDataTitle") }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { children: confirmation?.message ?? resolveMessage("confirmSensitiveDataMessage", form.translate("form.confirmSensitiveData")) }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { children: confirmation?.generic === true ? form.locale.toLowerCase().startsWith("ja") ? "\u56DE\u7B54\u5185\u5BB9\u306E\u78BA\u8A8D" : "Review your answers" : resolveMessage("confirmSensitiveDataTitle") }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { children: confirmation?.message ?? (confirmation?.generic === true ? form.locale.toLowerCase().startsWith("ja") ? "\u56DE\u7B54\u5185\u5BB9\u3092\u3054\u78BA\u8A8D\u306E\u3046\u3048\u3001\u9001\u4FE1\u3057\u3066\u304F\u3060\u3055\u3044\u3002" : "Please review your answers before submitting." : resolveMessage("confirmSensitiveDataMessage", form.translate("form.confirmSensitiveData"))) }),
         (confirmation?.findings ?? []).length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ul", { children: (confirmation?.findings ?? []).map((finding, index) => {
           const field = form.schema.fields.find((candidate) => candidate.id === finding.fieldId);
           const typeLabels = form.locale.toLowerCase().startsWith("ja") ? { email: "\u30E1\u30FC\u30EB\u30A2\u30C9\u30EC\u30B9", phone: "\u96FB\u8A71\u756A\u53F7", url: "URL", postal_code: "\u90F5\u4FBF\u756A\u53F7" } : { email: "Email address", phone: "Phone number", url: "URL", postal_code: "Postal code" };
@@ -3971,6 +4118,11 @@ function ContextFormRenderer({
             ] })
           ] }, `${finding.fieldId}-${finding.type}-${finding.start ?? index}`);
         }) }),
+        confirmation?.generic === true ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ul", { className: "fe-submission-summary", children: visibleItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("li", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: item.title }),
+          ": ",
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: item.displayValue })
+        ] }, item.fieldId)) }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", "data-fe-confirm": "true", onClick: confirmSubmission, children: resolveMessage("confirmButton", form.translate("form.confirmSubmission")) }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", onClick: cancelSubmission, children: resolveMessage("cancelButton", form.translate("form.cancelSubmission")) })
       ] })
@@ -3990,7 +4142,7 @@ function ContextFormRenderer({
   if (form.submitStatus === "success" && isReplaceMode) {
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: `fe-form ${className}`.trim(), children: completionRegion });
   }
-  if (confirmation !== null && submissionConfirmationRenderMode === "replace") {
+  if (confirmation !== null && confirmationRenderMode === "replace") {
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: `fe-form ${className}`.trim(), children: confirmationContent });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
@@ -4001,7 +4153,7 @@ function ContextFormRenderer({
         className: `fe-form ${className}`.trim(),
         noValidate: true,
         onSubmit: handleSubmit,
-        "aria-hidden": confirmation !== null && submissionConfirmationRenderMode === "dialog" ? true : void 0,
+        "aria-hidden": confirmation !== null && confirmationRenderMode === "dialog" ? true : void 0,
         children: [
           slots.renderHeader?.({
             title: form.schema.title,
@@ -4064,13 +4216,13 @@ function ContextFormRenderer({
                 }) }, field.id);
               }
               const Component = components[field.type];
-              return Component === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DefaultField, { ...props }, field.id) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Component, { ...props }, field.id);
+              return Component === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DefaultField, { ...props, groupedChoiceFields: isGroupedMode }, field.id) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Component, { ...props }, field.id);
             });
             const fieldClassName = `fe-fields${fieldsClassName === void 0 ? "" : ` ${fieldsClassName}`}`;
             return slots.renderFields?.({ children: fieldChildren, className: fieldClassName }) ?? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: fieldClassName, children: fieldChildren });
           })(),
           guardMessage === null ? null : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { role: "alert", children: guardMessage }),
-          confirmation !== null && submissionConfirmationRenderMode === "inline" ? confirmationContent : null,
+          confirmation !== null && confirmationRenderMode === "inline" ? confirmationContent : null,
           validationIssues.length === 0 ? null : slots.renderValidationSummary?.({ issues: validationIssues }) ?? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fe-validation-summary", role: "alert", children: [
             validationIssues.length,
             " validation error",
@@ -4125,7 +4277,7 @@ function ContextFormRenderer({
         ]
       }
     ),
-    confirmation !== null && submissionConfirmationRenderMode === "dialog" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fe-confirmation-dialog-backdrop", role: "dialog", "aria-modal": "true", children: confirmationContent }) : null
+    confirmation !== null && confirmationRenderMode === "dialog" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fe-confirmation-dialog-backdrop", role: "dialog", "aria-modal": "true", children: confirmationContent }) : null
   ] });
 }
 var RENDERER_MESSAGES = {

package/dist/index.d.cts

@@ -477,7 +477,20 @@ type SubmissionGuardResult = {
 };
 type SubmissionGuard = (schema: FormSchema, values: Record<string, unknown>) => SubmissionGuardResult | Promise<SubmissionGuardResult>;
 type FormSuccessRenderMode = "append" | "replace";
+type ChoiceFieldLayoutMode = "default" | "grouped";
+interface FormRendererAppearance {
+    /**
+     * Layout preset for radio and checkbox questions.
+     * - "default": keep the flat question layout.
+     * - "grouped": render a bordered fieldset and legend.
+     */
+    readonly choiceField?: ChoiceFieldLayoutMode;
+}
 type SubmissionConfirmationRenderMode = "inline" | "replace" | "dialog";
+interface SubmissionConfirmationOptions {
+    readonly enabled?: boolean;
+    readonly renderMode?: SubmissionConfirmationRenderMode;
+}
 type FormSubmitStatus = "idle" | "submitting" | "confirming" | "success" | "error";
 /** @deprecated Use FormSubmitStatus instead. */
 type FormSubmitState = "idle" | "submitting" | "confirming" | "success" | "error";
@@ -488,10 +501,11 @@ interface RenderSubmitButtonProps {
     readonly onSubmit: () => void;
 }
 interface SubmissionConfirmationSlotProps {
-    readonly findings: readonly SensitiveDataFinding[];
+    readonly findings?: readonly SensitiveDataFinding[];
     readonly message?: string;
     readonly schema: FormSchema;
     readonly visibleValues: Record<string, unknown>;
+    readonly visibleItems?: readonly FormSubmittedAnswerItem[];
     readonly onConfirm: () => void;
     readonly onCancel: () => void;
 }
@@ -666,11 +680,16 @@ type FieldComponents = Partial<Record<FieldType, ComponentType<FieldComponentPro
 interface FormRendererPresentationProps extends SubmissionProtectionProps {
     readonly components?: FieldComponents;
     readonly className?: string;
+    readonly appearance?: FormRendererAppearance;
+    /** @deprecated Use appearance.choiceField="grouped" instead. */
+    readonly groupedChoiceFields?: boolean;
     /**
      * Controls where the completion message is rendered after a successful submission.
      * Defaults to "append" for backwards compatibility.
      */
     readonly successRenderMode?: FormSuccessRenderMode;
+    readonly submissionConfirmation?: SubmissionConfirmationOptions;
+    /** @deprecated Use submissionConfirmation.renderMode instead. */
     readonly submissionConfirmationRenderMode?: SubmissionConfirmationRenderMode;
     readonly showHiddenFieldsInSummary?: boolean;
     readonly fieldsClassName?: string;
@@ -697,4 +716,4 @@ interface StandaloneFormRendererProps extends FormRendererPresentationProps {
 type FormRendererProps = FormRendererPresentationProps | StandaloneFormRendererProps;
 declare function FormRenderer(props: FormRendererProps): react.JSX.Element;
 
-export { BUILDER_TRANSLATION_ALIASES, BUILDER_TRANSLATION_KEYS, type BeforeSubmit, type BuilderActionContext, type BuilderActionError, type BuilderActionIconType, type BuilderActionResult, type BuilderButtonProps, type BuilderCheckboxProps, type BuilderErrorMessageProps, type BuilderFactories, type BuilderFieldEditorSlotProps, type BuilderFieldsetProps, type BuilderIconButtonProps, type BuilderIdKind, type BuilderLocalizationSlotProps, type BuilderOptionEditorSlotProps, type BuilderPagesSlotProps, type BuilderPolicy, type BuilderSectionProps, type BuilderSelectOption, type BuilderSelectProps, type BuilderSlotActions, type BuilderTextAreaProps, type BuilderTextInputProps, type BuilderTextTarget, type BuilderToolbarSlotProps, type BuilderTranslationActionsSlotProps, type BuilderTranslationKey, type ComponentBaseProps, type FieldComponentProps, type FieldComponents, type FieldEditorControlsConfig, type FieldEditorHeaderSlotProps, type FieldPropertyControlMode, type FieldState, type FieldTypeSelectOptionsConfig, type FieldTypeSelectOptionsContext, type FieldTypeSelectOptionsSorter, type FieldTypeSelectOptionsTransformer, type FieldTypeSelectSlotProps, FormBuilder, type FormBuilderActions, type FormBuilderComponents, type FormBuilderFeatures, type FormBuilderOptions, type FormBuilderProps, type FormBuilderResult, type FormBuilderSectionName, type FormBuilderSlots, type FormCompletionSlotProps, type FormContextValue, type FormFieldsSlotProps, FormProvider, type FormProviderProps, FormRenderer, type FormRendererMessages, type FormRendererPresentationProps, type FormRendererProps, type FormRendererSlots, type FormServerErrorPayload, FormSubmissionError, type FormSubmitHandler, type FormSubmitState, type FormSubmitStatus, type FormSubmittedAnswerItem, type FormSuccessRenderMode, type IconButtonProps, type InputComponentProps, type LocalizationSummaryContext, type ManualTranslationContext, type ManualTranslationTarget, type RenderSubmitButtonProps, type SelectComponentProps, type StandaloneFormRendererProps, type SubmissionAttempt, type SubmissionAttemptStore, type SubmissionConfirmationRenderMode, type SubmissionConfirmationSlotProps, type SubmissionGuard, type SubmissionGuardResult, type SubmissionProtectionProps, type SubmissionReceipt, type SubmissionReceiptQuery, type SubmissionReceiptStore, type SubmitContext, type SubmitResponse, type SubmitResult, type SubmitStatus, type UseSubmissionReceiptsResult, createLocalStorageSubmissionAttemptStore, createLocalStorageSubmissionReceiptStore, isTranslationUnresolved, resolveFieldEditorControls, resolveFieldTypeSelectOptions, resolveInitialFieldType, resolveTranslation, submissionReceiptQueryKey, useField, useForm, useFormBuilder, useSubmissionReceipts };
+export { BUILDER_TRANSLATION_ALIASES, BUILDER_TRANSLATION_KEYS, type BeforeSubmit, type BuilderActionContext, type BuilderActionError, type BuilderActionIconType, type BuilderActionResult, type BuilderButtonProps, type BuilderCheckboxProps, type BuilderErrorMessageProps, type BuilderFactories, type BuilderFieldEditorSlotProps, type BuilderFieldsetProps, type BuilderIconButtonProps, type BuilderIdKind, type BuilderLocalizationSlotProps, type BuilderOptionEditorSlotProps, type BuilderPagesSlotProps, type BuilderPolicy, type BuilderSectionProps, type BuilderSelectOption, type BuilderSelectProps, type BuilderSlotActions, type BuilderTextAreaProps, type BuilderTextInputProps, type BuilderTextTarget, type BuilderToolbarSlotProps, type BuilderTranslationActionsSlotProps, type BuilderTranslationKey, type ChoiceFieldLayoutMode, type ComponentBaseProps, type FieldComponentProps, type FieldComponents, type FieldEditorControlsConfig, type FieldEditorHeaderSlotProps, type FieldPropertyControlMode, type FieldState, type FieldTypeSelectOptionsConfig, type FieldTypeSelectOptionsContext, type FieldTypeSelectOptionsSorter, type FieldTypeSelectOptionsTransformer, type FieldTypeSelectSlotProps, FormBuilder, type FormBuilderActions, type FormBuilderComponents, type FormBuilderFeatures, type FormBuilderOptions, type FormBuilderProps, type FormBuilderResult, type FormBuilderSectionName, type FormBuilderSlots, type FormCompletionSlotProps, type FormContextValue, type FormFieldsSlotProps, FormProvider, type FormProviderProps, FormRenderer, type FormRendererAppearance, type FormRendererMessages, type FormRendererPresentationProps, type FormRendererProps, type FormRendererSlots, type FormServerErrorPayload, FormSubmissionError, type FormSubmitHandler, type FormSubmitState, type FormSubmitStatus, type FormSubmittedAnswerItem, type FormSuccessRenderMode, type IconButtonProps, type InputComponentProps, type LocalizationSummaryContext, type ManualTranslationContext, type ManualTranslationTarget, type RenderSubmitButtonProps, type SelectComponentProps, type StandaloneFormRendererProps, type SubmissionAttempt, type SubmissionAttemptStore, type SubmissionConfirmationOptions, type SubmissionConfirmationRenderMode, type SubmissionConfirmationSlotProps, type SubmissionGuard, type SubmissionGuardResult, type SubmissionProtectionProps, type SubmissionReceipt, type SubmissionReceiptQuery, type SubmissionReceiptStore, type SubmitContext, type SubmitResponse, type SubmitResult, type SubmitStatus, type UseSubmissionReceiptsResult, createLocalStorageSubmissionAttemptStore, createLocalStorageSubmissionReceiptStore, isTranslationUnresolved, resolveFieldEditorControls, resolveFieldTypeSelectOptions, resolveInitialFieldType, resolveTranslation, submissionReceiptQueryKey, useField, useForm, useFormBuilder, useSubmissionReceipts };

package/dist/index.d.ts

@@ -477,7 +477,20 @@ type SubmissionGuardResult = {
 };
 type SubmissionGuard = (schema: FormSchema, values: Record<string, unknown>) => SubmissionGuardResult | Promise<SubmissionGuardResult>;
 type FormSuccessRenderMode = "append" | "replace";
+type ChoiceFieldLayoutMode = "default" | "grouped";
+interface FormRendererAppearance {
+    /**
+     * Layout preset for radio and checkbox questions.
+     * - "default": keep the flat question layout.
+     * - "grouped": render a bordered fieldset and legend.
+     */
+    readonly choiceField?: ChoiceFieldLayoutMode;
+}
 type SubmissionConfirmationRenderMode = "inline" | "replace" | "dialog";
+interface SubmissionConfirmationOptions {
+    readonly enabled?: boolean;
+    readonly renderMode?: SubmissionConfirmationRenderMode;
+}
 type FormSubmitStatus = "idle" | "submitting" | "confirming" | "success" | "error";
 /** @deprecated Use FormSubmitStatus instead. */
 type FormSubmitState = "idle" | "submitting" | "confirming" | "success" | "error";
@@ -488,10 +501,11 @@ interface RenderSubmitButtonProps {
     readonly onSubmit: () => void;
 }
 interface SubmissionConfirmationSlotProps {
-    readonly findings: readonly SensitiveDataFinding[];
+    readonly findings?: readonly SensitiveDataFinding[];
     readonly message?: string;
     readonly schema: FormSchema;
     readonly visibleValues: Record<string, unknown>;
+    readonly visibleItems?: readonly FormSubmittedAnswerItem[];
     readonly onConfirm: () => void;
     readonly onCancel: () => void;
 }
@@ -666,11 +680,16 @@ type FieldComponents = Partial<Record<FieldType, ComponentType<FieldComponentPro
 interface FormRendererPresentationProps extends SubmissionProtectionProps {
     readonly components?: FieldComponents;
     readonly className?: string;
+    readonly appearance?: FormRendererAppearance;
+    /** @deprecated Use appearance.choiceField="grouped" instead. */
+    readonly groupedChoiceFields?: boolean;
     /**
      * Controls where the completion message is rendered after a successful submission.
      * Defaults to "append" for backwards compatibility.
      */
     readonly successRenderMode?: FormSuccessRenderMode;
+    readonly submissionConfirmation?: SubmissionConfirmationOptions;
+    /** @deprecated Use submissionConfirmation.renderMode instead. */
     readonly submissionConfirmationRenderMode?: SubmissionConfirmationRenderMode;
     readonly showHiddenFieldsInSummary?: boolean;
     readonly fieldsClassName?: string;
@@ -697,4 +716,4 @@ interface StandaloneFormRendererProps extends FormRendererPresentationProps {
 type FormRendererProps = FormRendererPresentationProps | StandaloneFormRendererProps;
 declare function FormRenderer(props: FormRendererProps): react.JSX.Element;
 
-export { BUILDER_TRANSLATION_ALIASES, BUILDER_TRANSLATION_KEYS, type BeforeSubmit, type BuilderActionContext, type BuilderActionError, type BuilderActionIconType, type BuilderActionResult, type BuilderButtonProps, type BuilderCheckboxProps, type BuilderErrorMessageProps, type BuilderFactories, type BuilderFieldEditorSlotProps, type BuilderFieldsetProps, type BuilderIconButtonProps, type BuilderIdKind, type BuilderLocalizationSlotProps, type BuilderOptionEditorSlotProps, type BuilderPagesSlotProps, type BuilderPolicy, type BuilderSectionProps, type BuilderSelectOption, type BuilderSelectProps, type BuilderSlotActions, type BuilderTextAreaProps, type BuilderTextInputProps, type BuilderTextTarget, type BuilderToolbarSlotProps, type BuilderTranslationActionsSlotProps, type BuilderTranslationKey, type ComponentBaseProps, type FieldComponentProps, type FieldComponents, type FieldEditorControlsConfig, type FieldEditorHeaderSlotProps, type FieldPropertyControlMode, type FieldState, type FieldTypeSelectOptionsConfig, type FieldTypeSelectOptionsContext, type FieldTypeSelectOptionsSorter, type FieldTypeSelectOptionsTransformer, type FieldTypeSelectSlotProps, FormBuilder, type FormBuilderActions, type FormBuilderComponents, type FormBuilderFeatures, type FormBuilderOptions, type FormBuilderProps, type FormBuilderResult, type FormBuilderSectionName, type FormBuilderSlots, type FormCompletionSlotProps, type FormContextValue, type FormFieldsSlotProps, FormProvider, type FormProviderProps, FormRenderer, type FormRendererMessages, type FormRendererPresentationProps, type FormRendererProps, type FormRendererSlots, type FormServerErrorPayload, FormSubmissionError, type FormSubmitHandler, type FormSubmitState, type FormSubmitStatus, type FormSubmittedAnswerItem, type FormSuccessRenderMode, type IconButtonProps, type InputComponentProps, type LocalizationSummaryContext, type ManualTranslationContext, type ManualTranslationTarget, type RenderSubmitButtonProps, type SelectComponentProps, type StandaloneFormRendererProps, type SubmissionAttempt, type SubmissionAttemptStore, type SubmissionConfirmationRenderMode, type SubmissionConfirmationSlotProps, type SubmissionGuard, type SubmissionGuardResult, type SubmissionProtectionProps, type SubmissionReceipt, type SubmissionReceiptQuery, type SubmissionReceiptStore, type SubmitContext, type SubmitResponse, type SubmitResult, type SubmitStatus, type UseSubmissionReceiptsResult, createLocalStorageSubmissionAttemptStore, createLocalStorageSubmissionReceiptStore, isTranslationUnresolved, resolveFieldEditorControls, resolveFieldTypeSelectOptions, resolveInitialFieldType, resolveTranslation, submissionReceiptQueryKey, useField, useForm, useFormBuilder, useSubmissionReceipts };
+export { BUILDER_TRANSLATION_ALIASES, BUILDER_TRANSLATION_KEYS, type BeforeSubmit, type BuilderActionContext, type BuilderActionError, type BuilderActionIconType, type BuilderActionResult, type BuilderButtonProps, type BuilderCheckboxProps, type BuilderErrorMessageProps, type BuilderFactories, type BuilderFieldEditorSlotProps, type BuilderFieldsetProps, type BuilderIconButtonProps, type BuilderIdKind, type BuilderLocalizationSlotProps, type BuilderOptionEditorSlotProps, type BuilderPagesSlotProps, type BuilderPolicy, type BuilderSectionProps, type BuilderSelectOption, type BuilderSelectProps, type BuilderSlotActions, type BuilderTextAreaProps, type BuilderTextInputProps, type BuilderTextTarget, type BuilderToolbarSlotProps, type BuilderTranslationActionsSlotProps, type BuilderTranslationKey, type ChoiceFieldLayoutMode, type ComponentBaseProps, type FieldComponentProps, type FieldComponents, type FieldEditorControlsConfig, type FieldEditorHeaderSlotProps, type FieldPropertyControlMode, type FieldState, type FieldTypeSelectOptionsConfig, type FieldTypeSelectOptionsContext, type FieldTypeSelectOptionsSorter, type FieldTypeSelectOptionsTransformer, type FieldTypeSelectSlotProps, FormBuilder, type FormBuilderActions, type FormBuilderComponents, type FormBuilderFeatures, type FormBuilderOptions, type FormBuilderProps, type FormBuilderResult, type FormBuilderSectionName, type FormBuilderSlots, type FormCompletionSlotProps, type FormContextValue, type FormFieldsSlotProps, FormProvider, type FormProviderProps, FormRenderer, type FormRendererAppearance, type FormRendererMessages, type FormRendererPresentationProps, type FormRendererProps, type FormRendererSlots, type FormServerErrorPayload, FormSubmissionError, type FormSubmitHandler, type FormSubmitState, type FormSubmitStatus, type FormSubmittedAnswerItem, type FormSuccessRenderMode, type IconButtonProps, type InputComponentProps, type LocalizationSummaryContext, type ManualTranslationContext, type ManualTranslationTarget, type RenderSubmitButtonProps, type SelectComponentProps, type StandaloneFormRendererProps, type SubmissionAttempt, type SubmissionAttemptStore, type SubmissionConfirmationOptions, type SubmissionConfirmationRenderMode, type SubmissionConfirmationSlotProps, type SubmissionGuard, type SubmissionGuardResult, type SubmissionProtectionProps, type SubmissionReceipt, type SubmissionReceiptQuery, type SubmissionReceiptStore, type SubmitContext, type SubmitResponse, type SubmitResult, type SubmitStatus, type UseSubmissionReceiptsResult, createLocalStorageSubmissionAttemptStore, createLocalStorageSubmissionReceiptStore, isTranslationUnresolved, resolveFieldEditorControls, resolveFieldTypeSelectOptions, resolveInitialFieldType, resolveTranslation, submissionReceiptQueryKey, useField, useForm, useFormBuilder, useSubmissionReceipts };

package/dist/index.js

@@ -3259,8 +3259,11 @@ function describedBy(field, error, helpId, errorId) {
   );
   return ids.length === 0 ? void 0 : ids.join(" ");
 }
-function RequiredMark({ required }) {
-  return required ? /* @__PURE__ */ jsxs2("span", { className: "fe-required", "aria-hidden": "true", children: [
+function RequiredMark({
+  required,
+  className = "fe-required"
+}) {
+  return required ? /* @__PURE__ */ jsxs2("span", { className, "aria-hidden": "true", children: [
     " ",
     "*"
   ] }) : null;
@@ -3271,13 +3274,59 @@ function FieldMessage({ props }) {
     props.error === void 0 ? null : /* @__PURE__ */ jsx3("div", { id: props.errorId, className: "fe-error", children: props.translate(props.error.messageKey, props.error.params) })
   ] });
 }
-function DefaultField(props) {
+function GroupedChoiceDescription({ props }) {
+  return props.field.description === void 0 ? null : /* @__PURE__ */ jsx3("div", { id: props.helpId, className: "fe-field-description", children: props.field.description });
+}
+function GroupedChoiceError({ props }) {
+  return props.error === void 0 ? null : /* @__PURE__ */ jsx3("div", { id: props.errorId, className: "fe-field-error", role: "alert", children: props.translate(props.error.messageKey, props.error.params) });
+}
+function DefaultField({
+  groupedChoiceFields,
+  ...props
+}) {
   const { field, value, setValue, inputId, error, translate } = props;
   const ariaProps = {
     "aria-describedby": describedBy(field, error, props.helpId, props.errorId),
     "aria-invalid": error === void 0 ? void 0 : true
   };
   if (field.type === "checkbox") {
+    if (groupedChoiceFields) {
+      return (
+        // biome-ignore lint/a11y/useAriaPropsSupportedByRole: The grouped fieldset exposes the required state for the complete choice question.
+        /* @__PURE__ */ jsxs2(
+          "fieldset",
+          {
+            className: "fe-choice-group fe-field--checkbox",
+            "data-field-id": field.id,
+            "aria-describedby": describedBy(field, error, props.helpId, props.errorId),
+            "aria-invalid": Boolean(error),
+            "aria-required": field.required,
+            children: [
+              /* @__PURE__ */ jsxs2("legend", { className: "fe-choice-legend", children: [
+                field.title,
+                /* @__PURE__ */ jsx3(RequiredMark, { required: field.required, className: "fe-required-badge" })
+              ] }),
+              /* @__PURE__ */ jsx3(GroupedChoiceDescription, { props }),
+              /* @__PURE__ */ jsx3("div", { className: "fe-choice-options", children: /* @__PURE__ */ jsxs2("label", { className: "fe-choice-option", htmlFor: inputId, children: [
+                /* @__PURE__ */ jsx3(
+                  "input",
+                  {
+                    id: inputId,
+                    name: field.id,
+                    type: "checkbox",
+                    checked: value === true,
+                    "aria-label": field.title,
+                    onChange: (event) => setValue(event.currentTarget.checked)
+                  }
+                ),
+                /* @__PURE__ */ jsx3("span", { children: field.title })
+              ] }) }),
+              /* @__PURE__ */ jsx3(GroupedChoiceError, { props })
+            ]
+          }
+        )
+      );
+    }
     return /* @__PURE__ */ jsxs2("div", { className: "fe-field fe-field--checkbox", "data-field-id": field.id, children: [
       /* @__PURE__ */ jsxs2("label", { className: "fe-check-label", htmlFor: inputId, children: [
         /* @__PURE__ */ jsx3(
@@ -3301,6 +3350,85 @@ function DefaultField(props) {
   }
   if (field.type === "radio" || field.type === "multi-select") {
     const selected = Array.isArray(value) ? value : [];
+    if (field.type === "radio" && groupedChoiceFields) {
+      return (
+        // biome-ignore lint/a11y/useAriaPropsSupportedByRole: The grouped fieldset exposes the required state for the complete choice question.
+        /* @__PURE__ */ jsxs2(
+          "fieldset",
+          {
+            className: "fe-choice-group fe-field--radio",
+            "data-field-id": field.id,
+            "aria-describedby": describedBy(field, error, props.helpId, props.errorId),
+            "aria-invalid": Boolean(error),
+            "aria-required": field.required,
+            children: [
+              /* @__PURE__ */ jsxs2("legend", { className: "fe-choice-legend", children: [
+                field.title,
+                /* @__PURE__ */ jsx3(RequiredMark, { required: field.required, className: "fe-required-badge" })
+              ] }),
+              /* @__PURE__ */ jsx3(GroupedChoiceDescription, { props }),
+              /* @__PURE__ */ jsx3("div", { className: "fe-choice-options", children: field.options.map((option, index) => {
+                const optionId = `${inputId}-${index}`;
+                const checked = value === option.id;
+                return /* @__PURE__ */ jsxs2("label", { className: "fe-choice-option", htmlFor: optionId, children: [
+                  /* @__PURE__ */ jsx3(
+                    "input",
+                    {
+                      id: optionId,
+                      name: field.id,
+                      type: "radio",
+                      value: option.id,
+                      checked,
+                      onKeyDown: (event) => {
+                        if (event.key !== "ArrowDown" && event.key !== "ArrowRight" && event.key !== "ArrowUp" && event.key !== "ArrowLeft")
+                          return;
+                        event.preventDefault();
+                        const offset = event.key === "ArrowDown" || event.key === "ArrowRight" ? 1 : -1;
+                        const nextIndex = (index + offset + field.options.length) % field.options.length;
+                        const nextOption = field.options[nextIndex];
+                        if (nextOption === void 0) return;
+                        setValue(nextOption.id);
+                        document.getElementById(`${inputId}-${nextIndex}`)?.focus();
+                      },
+                      onChange: () => setValue(option.id)
+                    }
+                  ),
+                  /* @__PURE__ */ jsx3("span", { children: option.label })
+                ] }, option.id);
+              }) }),
+              /* @__PURE__ */ jsx3(GroupedChoiceError, { props })
+            ]
+          }
+        )
+      );
+    }
+    if (field.type === "radio") {
+      return /* @__PURE__ */ jsxs2("div", { className: "fe-field fe-field--radio", "data-field-id": field.id, children: [
+        /* @__PURE__ */ jsxs2("div", { className: "fe-label", children: [
+          field.title,
+          /* @__PURE__ */ jsx3(RequiredMark, { required: field.required })
+        ] }),
+        field.options.map((option, index) => {
+          const optionId = `${inputId}-${index}`;
+          return /* @__PURE__ */ jsxs2("label", { className: "fe-check-label", htmlFor: optionId, children: [
+            /* @__PURE__ */ jsx3(
+              "input",
+              {
+                ...ariaProps,
+                id: optionId,
+                name: field.id,
+                type: "radio",
+                value: option.id,
+                checked: value === option.id,
+                onChange: () => setValue(option.id)
+              }
+            ),
+            /* @__PURE__ */ jsx3("span", { children: option.label })
+          ] }, option.id);
+        }),
+        /* @__PURE__ */ jsx3(FieldMessage, { props })
+      ] });
+    }
     return /* @__PURE__ */ jsxs2("fieldset", { className: `fe-field fe-field--${field.type}`, "data-field-id": field.id, ...ariaProps, children: [
       /* @__PURE__ */ jsxs2("legend", { className: "fe-label", children: [
         field.title,
@@ -3550,7 +3678,10 @@ function ContextFormRenderer({
   beforeSubmit,
   onDraftSave,
   successRenderMode = "append",
-  submissionConfirmationRenderMode = "inline",
+  appearance,
+  groupedChoiceFields = false,
+  submissionConfirmation,
+  submissionConfirmationRenderMode,
   showHiddenFieldsInSummary = false,
   fieldsClassName,
   hideFormOnSuccess = false,
@@ -3561,6 +3692,7 @@ function ContextFormRenderer({
   slots = {}
 }) {
   const form = useForm();
+  const isGroupedMode = appearance?.choiceField === "grouped" || groupedChoiceFields;
   const prefix = useId().replace(/:/g, "");
   const formRef = useRef2(null);
   const loadedDraftKey = useRef2(null);
@@ -3586,6 +3718,12 @@ function ContextFormRenderer({
   const activeVisibleIndex = visiblePageIndexes.indexOf(currentPageIndex);
   const fieldIds = activePage === void 0 ? void 0 : new Set(activePage.questionIds);
   const visibleValues = useMemo4(() => selectVisibleAnswers2(form.schema, form.values), [form.schema, form.values]);
+  const visibleItems = useMemo4(
+    () => buildSubmittedItems(form.schema, form.values, form.visibility, (key) => form.translate(key), false),
+    [form.schema, form.translate, form.values, form.visibility]
+  );
+  const confirmationRenderMode = submissionConfirmation?.renderMode ?? submissionConfirmationRenderMode ?? "inline";
+  const confirmationEnabled = submissionConfirmation?.enabled === true;
   const submitState = confirmation === null && !guardsPending ? form.submitStatus : "confirming";
   const interactionLocked = submitState === "confirming" || submitState === "submitting";
   const isReplaceMode = successRenderMode === "replace" || hideFormOnSuccess;
@@ -3653,7 +3791,7 @@ function ContextFormRenderer({
     if (confirmation === null) return;
     const confirmButton = confirmationRef.current?.querySelector("[data-fe-confirm], button");
     confirmButton?.focus();
-    if (submissionConfirmationRenderMode !== "dialog") return;
+    if (confirmationRenderMode !== "dialog") return;
     const onKeyDown = (event) => {
       if (event.key === "Escape") {
         event.preventDefault();
@@ -3680,7 +3818,7 @@ function ContextFormRenderer({
     };
     globalThis.addEventListener("keydown", onKeyDown);
     return () => globalThis.removeEventListener("keydown", onKeyDown);
-  }, [confirmation, focusSubmitButton, submissionConfirmationRenderMode]);
+  }, [confirmation, confirmationRenderMode, focusSubmitButton]);
   useEffect3(() => {
     if (autoSaveKey === void 0 || typeof globalThis.localStorage === "undefined") return;
     const loadIdentity = `${autoSaveKey}:${form.schema.id}:${form.schema.version}`;
@@ -3751,21 +3889,29 @@ function ContextFormRenderer({
     }
     const validation = validateAnswers2(form.schema, form.values);
     const firstInvalidFieldId = validation.issues[0]?.fieldId;
-    if (validation.valid && !guardsConfirmed && submissionGuards.length > 0) {
+    if (validation.valid && !guardsConfirmed) {
       rendererSubmissionInFlight.current = true;
-      setGuardsPending(true);
+      setGuardsPending(submissionGuards.length > 0);
       try {
-        const guardResult = await runSubmissionGuards(submissionGuards);
-        if (guardResult.status === "block") {
-          setGuardMessage(guardResult.message ?? form.translate("form.submissionBlocked"));
-          return { status: "cancelled" };
+        if (submissionGuards.length > 0) {
+          const guardResult = await runSubmissionGuards(submissionGuards);
+          if (guardResult.status === "block") {
+            setGuardMessage(guardResult.message ?? form.translate("form.submissionBlocked"));
+            return { status: "cancelled" };
+          }
+          if (guardResult.status === "confirm") {
+            setGuardMessage(null);
+            setConfirmation({
+              findings: guardResult.findings,
+              generic: false,
+              ...guardResult.message === void 0 ? {} : { message: guardResult.message }
+            });
+            return { status: "cancelled" };
+          }
         }
-        if (guardResult.status === "confirm") {
+        if (confirmationEnabled) {
           setGuardMessage(null);
-          setConfirmation({
-            findings: guardResult.findings,
-            ...guardResult.message === void 0 ? {} : { message: guardResult.message }
-          });
+          setConfirmation({ findings: [], generic: true });
           return { status: "cancelled" };
         }
       } finally {
@@ -3928,17 +4074,18 @@ function ContextFormRenderer({
     {
       ref: confirmationRef,
       className: "fe-submission-confirmation",
-      role: submissionConfirmationRenderMode === "dialog" ? void 0 : "dialog",
+      role: confirmationRenderMode === "dialog" ? void 0 : "dialog",
       children: slots.renderSubmissionConfirmation?.({
         findings: confirmation?.findings ?? [],
-        message: confirmation?.message ?? resolveMessage("confirmSensitiveDataMessage", form.translate("form.confirmSensitiveData")),
+        message: confirmation?.message ?? (confirmation?.generic === true ? form.locale.toLowerCase().startsWith("ja") ? "\u56DE\u7B54\u5185\u5BB9\u3092\u3054\u78BA\u8A8D\u306E\u3046\u3048\u3001\u9001\u4FE1\u3057\u3066\u304F\u3060\u3055\u3044\u3002" : "Please review your answers before submitting." : resolveMessage("confirmSensitiveDataMessage", form.translate("form.confirmSensitiveData"))),
         schema: form.schema,
         visibleValues,
+        visibleItems,
         onConfirm: confirmSubmission,
         onCancel: cancelSubmission
       }) ?? /* @__PURE__ */ jsxs2(Fragment3, { children: [
-        /* @__PURE__ */ jsx3("h2", { children: resolveMessage("confirmSensitiveDataTitle") }),
-        /* @__PURE__ */ jsx3("p", { children: confirmation?.message ?? resolveMessage("confirmSensitiveDataMessage", form.translate("form.confirmSensitiveData")) }),
+        /* @__PURE__ */ jsx3("h2", { children: confirmation?.generic === true ? form.locale.toLowerCase().startsWith("ja") ? "\u56DE\u7B54\u5185\u5BB9\u306E\u78BA\u8A8D" : "Review your answers" : resolveMessage("confirmSensitiveDataTitle") }),
+        /* @__PURE__ */ jsx3("p", { children: confirmation?.message ?? (confirmation?.generic === true ? form.locale.toLowerCase().startsWith("ja") ? "\u56DE\u7B54\u5185\u5BB9\u3092\u3054\u78BA\u8A8D\u306E\u3046\u3048\u3001\u9001\u4FE1\u3057\u3066\u304F\u3060\u3055\u3044\u3002" : "Please review your answers before submitting." : resolveMessage("confirmSensitiveDataMessage", form.translate("form.confirmSensitiveData"))) }),
         (confirmation?.findings ?? []).length === 0 ? null : /* @__PURE__ */ jsx3("ul", { children: (confirmation?.findings ?? []).map((finding, index) => {
           const field = form.schema.fields.find((candidate) => candidate.id === finding.fieldId);
           const typeLabels = form.locale.toLowerCase().startsWith("ja") ? { email: "\u30E1\u30FC\u30EB\u30A2\u30C9\u30EC\u30B9", phone: "\u96FB\u8A71\u756A\u53F7", url: "URL", postal_code: "\u90F5\u4FBF\u756A\u53F7" } : { email: "Email address", phone: "Phone number", url: "URL", postal_code: "Postal code" };
@@ -3954,6 +4101,11 @@ function ContextFormRenderer({
             ] })
           ] }, `${finding.fieldId}-${finding.type}-${finding.start ?? index}`);
         }) }),
+        confirmation?.generic === true ? /* @__PURE__ */ jsx3("ul", { className: "fe-submission-summary", children: visibleItems.map((item) => /* @__PURE__ */ jsxs2("li", { children: [
+          /* @__PURE__ */ jsx3("span", { children: item.title }),
+          ": ",
+          /* @__PURE__ */ jsx3("span", { children: item.displayValue })
+        ] }, item.fieldId)) }) : null,
         /* @__PURE__ */ jsx3("button", { type: "button", "data-fe-confirm": "true", onClick: confirmSubmission, children: resolveMessage("confirmButton", form.translate("form.confirmSubmission")) }),
         /* @__PURE__ */ jsx3("button", { type: "button", onClick: cancelSubmission, children: resolveMessage("cancelButton", form.translate("form.cancelSubmission")) })
       ] })
@@ -3973,7 +4125,7 @@ function ContextFormRenderer({
   if (form.submitStatus === "success" && isReplaceMode) {
     return /* @__PURE__ */ jsx3("div", { className: `fe-form ${className}`.trim(), children: completionRegion });
   }
-  if (confirmation !== null && submissionConfirmationRenderMode === "replace") {
+  if (confirmation !== null && confirmationRenderMode === "replace") {
     return /* @__PURE__ */ jsx3("div", { className: `fe-form ${className}`.trim(), children: confirmationContent });
   }
   return /* @__PURE__ */ jsxs2(Fragment3, { children: [
@@ -3984,7 +4136,7 @@ function ContextFormRenderer({
         className: `fe-form ${className}`.trim(),
         noValidate: true,
         onSubmit: handleSubmit,
-        "aria-hidden": confirmation !== null && submissionConfirmationRenderMode === "dialog" ? true : void 0,
+        "aria-hidden": confirmation !== null && confirmationRenderMode === "dialog" ? true : void 0,
         children: [
           slots.renderHeader?.({
             title: form.schema.title,
@@ -4047,13 +4199,13 @@ function ContextFormRenderer({
                 }) }, field.id);
               }
               const Component = components[field.type];
-              return Component === void 0 ? /* @__PURE__ */ jsx3(DefaultField, { ...props }, field.id) : /* @__PURE__ */ jsx3(Component, { ...props }, field.id);
+              return Component === void 0 ? /* @__PURE__ */ jsx3(DefaultField, { ...props, groupedChoiceFields: isGroupedMode }, field.id) : /* @__PURE__ */ jsx3(Component, { ...props }, field.id);
             });
             const fieldClassName = `fe-fields${fieldsClassName === void 0 ? "" : ` ${fieldsClassName}`}`;
             return slots.renderFields?.({ children: fieldChildren, className: fieldClassName }) ?? /* @__PURE__ */ jsx3("div", { className: fieldClassName, children: fieldChildren });
           })(),
           guardMessage === null ? null : /* @__PURE__ */ jsx3("div", { role: "alert", children: guardMessage }),
-          confirmation !== null && submissionConfirmationRenderMode === "inline" ? confirmationContent : null,
+          confirmation !== null && confirmationRenderMode === "inline" ? confirmationContent : null,
           validationIssues.length === 0 ? null : slots.renderValidationSummary?.({ issues: validationIssues }) ?? /* @__PURE__ */ jsxs2("div", { className: "fe-validation-summary", role: "alert", children: [
             validationIssues.length,
             " validation error",
@@ -4108,7 +4260,7 @@ function ContextFormRenderer({
         ]
       }
     ),
-    confirmation !== null && submissionConfirmationRenderMode === "dialog" ? /* @__PURE__ */ jsx3("div", { className: "fe-confirmation-dialog-backdrop", role: "dialog", "aria-modal": "true", children: confirmationContent }) : null
+    confirmation !== null && confirmationRenderMode === "dialog" ? /* @__PURE__ */ jsx3("div", { className: "fe-confirmation-dialog-backdrop", role: "dialog", "aria-modal": "true", children: confirmationContent }) : null
   ] });
 }
 var RENDERER_MESSAGES = {

package/dist/styles.css

@@ -123,6 +123,41 @@
 .fe-check-label input {
   margin-top: 0.22rem;
 }
+.fe-choice-group {
+  background-color: var(--fe-bg-color, #ffffff);
+  border: 1px solid var(--fe-border-color, #e2e8f0);
+  border-radius: var(--fe-radius, 8px);
+  box-sizing: border-box;
+  margin: 0 0 1.25rem;
+  padding: 1rem 1.25rem;
+}
+.fe-choice-legend {
+  color: var(--fe-text-color, #1a202c);
+  font-size: 0.95rem;
+  font-weight: 600;
+  padding: 0 0.5rem;
+}
+.fe-choice-options {
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+  margin-top: 0.5rem;
+}
+.fe-choice-option {
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  gap: 0.5rem;
+}
+.fe-field-description {
+  color: #667085;
+  font-size: 0.875rem;
+}
+.fe-field-error {
+  color: #b42318;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
 .fe-rating-options {
   display: flex;
   flex-wrap: wrap;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@form-engine-ts/react",
-  "version": "4.2.0",
+  "version": "4.3.2",
   "publishConfig": {
     "access": "public"
   },
@@ -42,8 +42,8 @@
     "typescript"
   ],
   "dependencies": {
-    "@form-engine-ts/core": "4.2.0",
-    "@form-engine-ts/privacy": "4.2.0"
+    "@form-engine-ts/core": "4.3.2",
+    "@form-engine-ts/privacy": "4.3.2"
   },
   "peerDependencies": {
     "react": ">=18.2 <20",