diff --git a/client/packages/programs/src/JsonForms/common/JsonForm.tsx b/client/packages/programs/src/JsonForms/common/JsonForm.tsx
index 0defd48404..5136abab79 100644
--- a/client/packages/programs/src/JsonForms/common/JsonForm.tsx
+++ b/client/packages/programs/src/JsonForms/common/JsonForm.tsx
@@ -19,6 +19,8 @@ import { materialRenderers } from '@jsonforms/material-renderers';
 import {
   BooleanField,
   booleanTester,
+  SortToggle,
+  SortToggleTester,
   stringTester,
   TextField,
   selectTester,
@@ -204,6 +206,7 @@ const FormComponent = ({
 
 const renderers = [
   { tester: booleanTester, renderer: BooleanField },
+  { tester: SortToggleTester, renderer: SortToggle },
   { tester: stringTester, renderer: TextField },
   { tester: numberTester, renderer: NumberField },
   { tester: selectTester, renderer: Selector },
diff --git a/client/packages/programs/src/JsonForms/common/components/SortToggle.tsx b/client/packages/programs/src/JsonForms/common/components/SortToggle.tsx
new file mode 100644
index 0000000000..c8bd4e4670
--- /dev/null
+++ b/client/packages/programs/src/JsonForms/common/components/SortToggle.tsx
@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import { rankWith, ControlProps, uiTypeIs } from '@jsonforms/core';
+import { withJsonFormsControlProps } from '@jsonforms/react';
+import {
+  alpha,
+  DetailInputWithLabelRow,
+  Theme,
+  useTranslation,
+} from '@openmsupply-client/common';
+import { FORM_LABEL_WIDTH, DefaultFormRowSx } from '../styleConstants';
+import { FlatButton } from '@common/components';
+import { SortAscIcon, SortDescIcon } from '@common/icons';
+
+export const SortToggleTester = rankWith(10, uiTypeIs('SortToggle'));
+
+type SortDirection = 'asc' | 'desc' | null;
+
+const UIComponent = (props: ControlProps) => {
+  const { handleChange, label, path, enabled } = props;
+  const t = useTranslation();
+  const [sortDirection, setSortDirection] = useState<SortDirection>();
+
+  if (!props.visible) {
+    return null;
+  }
+
+  const selectedStyles = (theme: Theme) => ({
+    fontWeight: 'bold',
+    backgroundColor: alpha(theme.palette.primary.main, 0.3),
+    '&:hover': {
+      backgroundColor: alpha(theme.palette.primary.main, 0.3),
+    },
+  });
+
+  const getSelectedSx = (value: SortDirection) =>
+    sortDirection === value ? selectedStyles : undefined;
+
+  const handleClick = (value: SortDirection) => {
+    const newValue = sortDirection === value ? null : value;
+    setSortDirection(newValue);
+    handleChange(path, newValue);
+  };
+
+  return (
+    <DetailInputWithLabelRow
+      label={label}
+      DisabledInput={!enabled}
+      labelWidthPercentage={FORM_LABEL_WIDTH}
+      sx={DefaultFormRowSx}
+      Input={
+        <>
+          <FlatButton
+            label={t('report.ascending')}
+            onClick={() => handleClick('asc')}
+            startIcon={<SortAscIcon />}
+            sx={[getSelectedSx('asc') || {}, { borderRadius: 24 }]}
+          />
+          <FlatButton
+            label={t('report.descending')}
+            onClick={() => handleClick('desc')}
+            startIcon={<SortDescIcon />}
+            sx={[getSelectedSx('desc') || {}, { borderRadius: 24 }]}
+          />
+        </>
+      }
+    />
+  );
+};
+
+export const SortToggle = withJsonFormsControlProps(UIComponent);
diff --git a/client/packages/programs/src/JsonForms/common/components/index.ts b/client/packages/programs/src/JsonForms/common/components/index.ts
index 3f022f7f83..d1b0419754 100644
--- a/client/packages/programs/src/JsonForms/common/components/index.ts
+++ b/client/packages/programs/src/JsonForms/common/components/index.ts
@@ -11,3 +11,4 @@ export * from './Autocomplete';
 export * from './ConditionalSelect';
 export * from './Spacer';
 export * from './ToolbarLayout';
+export * from './SortToggle';
diff --git a/standard_reports/expiring-items/latest/argument_schemas/arguments.json b/standard_reports/expiring-items/latest/argument_schemas/arguments.json
index 966800d394..5df2abb05f 100644
--- a/standard_reports/expiring-items/latest/argument_schemas/arguments.json
+++ b/standard_reports/expiring-items/latest/argument_schemas/arguments.json
@@ -26,8 +26,8 @@
         },
         "dir": {
           "description": "sort by dir",
-          "type": "string",
-          "enum": ["asc", "desc"]
+          "type": ["string", "null"],
+          "format": "SortToggle"
         },
         "monthlyConsumptionLookBackPeriod": {
           "description": "Average Monthly Consumption Look Back Period",
diff --git a/standard_reports/expiring-items/latest/argument_schemas/arguments_ui.json b/standard_reports/expiring-items/latest/argument_schemas/arguments_ui.json
index 9a72400b3b..9e4fdb97c9 100644
--- a/standard_reports/expiring-items/latest/argument_schemas/arguments_ui.json
+++ b/standard_reports/expiring-items/latest/argument_schemas/arguments_ui.json
@@ -70,15 +70,9 @@
       }
     },
     {
-      "type": "Control",
+      "type": "SortToggle",
       "scope": "#/properties/dir",
-      "label": "T#report.sort-direction",
-      "options": {
-        "show": [
-          ["asc", "T#report.ascending"],
-          ["desc", "T#report.descending"]
-        ]
-      }
+      "label": "T#report.sort-direction"
     }
   ]
 }
diff --git a/standard_reports/item-usage/latest/argument_schemas/arguments.json b/standard_reports/item-usage/latest/argument_schemas/arguments.json
index da53700e38..f354aa003f 100644
--- a/standard_reports/item-usage/latest/argument_schemas/arguments.json
+++ b/standard_reports/item-usage/latest/argument_schemas/arguments.json
@@ -35,8 +35,8 @@
         },
         "dir": {
           "description": "sort by dir",
-          "type": "string",
-          "enum": ["asc", "desc"]
+          "type": ["string", "null"],
+          "format": "SortToggle"
         }
       }
     }
diff --git a/standard_reports/item-usage/latest/argument_schemas/arguments_ui.json b/standard_reports/item-usage/latest/argument_schemas/arguments_ui.json
index ed99017357..04d1045f8d 100644
--- a/standard_reports/item-usage/latest/argument_schemas/arguments_ui.json
+++ b/standard_reports/item-usage/latest/argument_schemas/arguments_ui.json
@@ -46,15 +46,9 @@
       }
     },
     {
-      "type": "Control",
+      "type": "SortToggle",
       "scope": "#/properties/dir",
-      "label": "T#report.sort-direction",
-      "options": {
-        "show": [
-          ["asc", "T#report.ascending"],
-          ["desc", "T#report.descending"]
-        ]
-      }
+      "label": "T#report.sort-direction"
     }
   ]
 }
diff --git a/standard_reports/stock-detail/latest/argument_schemas/arguments.json b/standard_reports/stock-detail/latest/argument_schemas/arguments.json
index 99cdd40fd5..60e01cfb38 100644
--- a/standard_reports/stock-detail/latest/argument_schemas/arguments.json
+++ b/standard_reports/stock-detail/latest/argument_schemas/arguments.json
@@ -23,8 +23,8 @@
         },
         "dir": {
           "description": "sort by dir",
-          "type": "string",
-          "enum": ["asc", "desc"]
+          "type": ["string", "null"],
+          "format": "SortToggle"
         }
       }
     }
diff --git a/standard_reports/stock-detail/latest/argument_schemas/arguments_ui.json b/standard_reports/stock-detail/latest/argument_schemas/arguments_ui.json
index 6058f344c5..755149c7f4 100644
--- a/standard_reports/stock-detail/latest/argument_schemas/arguments_ui.json
+++ b/standard_reports/stock-detail/latest/argument_schemas/arguments_ui.json
@@ -28,15 +28,9 @@
       }
     },
     {
-      "type": "Control",
+      "type": "SortToggle",
       "scope": "#/properties/dir",
-      "label": "T#report.sort-direction",
-      "options": {
-       "show": [
-          ["asc", "T#report.ascending"],
-          ["desc", "T#report.descending"]
-        ]
-      }
+      "label": "T#report.sort-direction"
     }
   ]
 }
diff --git a/standard_reports/stock-status/latest/argument_schemas/arguments.json b/standard_reports/stock-status/latest/argument_schemas/arguments.json
index 6b0ba031a5..3f303e19b8 100644
--- a/standard_reports/stock-status/latest/argument_schemas/arguments.json
+++ b/standard_reports/stock-status/latest/argument_schemas/arguments.json
@@ -30,8 +30,8 @@
         },
         "dir": {
           "description": "sort by dir",
-          "type": "string",
-          "enum": ["asc", "desc"]
+          "type": ["string", "null"],
+          "format": "SortToggle"
         }
       }
     }
diff --git a/standard_reports/stock-status/latest/argument_schemas/arguments_ui.json b/standard_reports/stock-status/latest/argument_schemas/arguments_ui.json
index 25f5b3ae07..3017c2af00 100644
--- a/standard_reports/stock-status/latest/argument_schemas/arguments_ui.json
+++ b/standard_reports/stock-status/latest/argument_schemas/arguments_ui.json
@@ -53,15 +53,9 @@
       }
     },
     {
-      "type": "Control",
+      "type": "SortToggle",
       "scope": "#/properties/dir",
-      "label": "T#report.sort-direction",
-      "options": {
-       "show": [
-          ["asc", "T#report.ascending"],
-          ["desc", "T#report.descending"]
-        ]
-      }
+      "label": "T#report.sort-direction"
     }
   ]
 }