diff --git a/CHANGELOG.md b/CHANGELOG.md
index 66d6fabce9f7dd49de3ccea2e3c1036c4fb96630..00c4f8fbe67ac5b08f1706f435be118d75665400 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - The monitoring location map component now implemented in Vue.
 - The jest test framework was replaced with vitest.
 - The statistics table now uses the USWDS table component from the wdfn-vue-components npm package.
+- All radio buttons and radio button sets now use the wdfn-vue-components npm package.
 
 ### Fixed
 - If the data reports that a parameter has a period of record, yet the observations service returns no data, the application will no longer hang.
diff --git a/assets/src/scripts/monitoring-location/components/daily-value-hydrograph/vue-components/DvGraphControls.test.js b/assets/src/scripts/monitoring-location/components/daily-value-hydrograph/vue-components/DvGraphControls.test.js
index f7e4c5c36834acd274e528619613e80d3e5c9620..b1c52b0e19d6e537891ad8a867d86f660d92b34f 100644
--- a/assets/src/scripts/monitoring-location/components/daily-value-hydrograph/vue-components/DvGraphControls.test.js
+++ b/assets/src/scripts/monitoring-location/components/daily-value-hydrograph/vue-components/DvGraphControls.test.js
@@ -1,4 +1,3 @@
-
 import {bindActionCreators} from 'redux';
 import ReduxConnectVue from 'redux-connect-vue';
 import {createStructuredSelector} from 'reselect';
@@ -9,6 +8,8 @@ import {configureStore} from 'ml/store';
 
 import {Actions} from 'ml/store/daily-value-time-series';
 
+import {USWDSRadioButton, USWDSRadioButtonSet} from '@wma/wdfn-vue-components';
+
 import DvGraphControls from './DvGraphControls.vue';
 
 describe('monitoring-location/components/daily-value-hydrograph/vue-components/DvGraphControls.vue', () => {
@@ -136,7 +137,6 @@ describe('monitoring-location/components/daily-value-hydrograph/vue-components/D
     });
 
     describe('Creating the graph controls with data', () => {
-
         let store;
         let retrieveDVTimeSeriesSpy;
 
@@ -171,20 +171,30 @@ describe('monitoring-location/components/daily-value-hydrograph/vue-components/D
         });
 
         it('Should render the radio buttons', () => {
-            const radioButtons = wrapper.findAll('input[type="radio"]');
-            const firstRadioButton = wrapper.find('#code-72019-radio');
+            expect(wrapper.findAllComponents(USWDSRadioButtonSet)).toHaveLength(1);
+            const radioButtons = wrapper.findAllComponents(USWDSRadioButton);
             expect(radioButtons).toHaveLength(2);
-            expect(firstRadioButton.element.checked).toBe(true);
+            expect(radioButtons[0].props('isButtonChecked')).toBe(true);
+            expect(radioButtons[0].props('radioButtonId')).toBe('code-72019-radio');
+            expect(radioButtons[0].props('radioButtonLabel')).toBe('72019');
+            expect(radioButtons[0].props('radioButtonName')).toBe('dv-parameter-code-selector-radio-button-set');
+            expect(radioButtons[0].props('radioButtonValue')).toBe('72019');
+
+            expect(radioButtons[1].props('isButtonChecked')).toBe(false);
+            expect(radioButtons[1].props('radioButtonId')).toBe('code-62610-radio');
+            expect(radioButtons[1].props('radioButtonLabel')).toBe('62610');
+            expect(radioButtons[1].props('radioButtonName')).toBe('dv-parameter-code-selector-radio-button-set');
+            expect(radioButtons[1].props('radioButtonValue')).toBe('62610');
         });
 
         it('Should update the selected parameter code', async() => {
-            const radioButtons = wrapper.findAll('input[type="radio"]');
+            const radioButtons = wrapper.findAllComponents(USWDSRadioButton);
             expect(store.getState().dailyValueTimeSeriesState.currentDVTimeSeriesId.max).toBe('1123');
-            await radioButtons[1].trigger('click');
+            await radioButtons[1].find('input').trigger('click');
 
             const dvState = store.getState().dailyValueTimeSeriesState;
-            expect(radioButtons[1].element.checked).toBe(true);
-            expect(radioButtons[0].element.checked).toBe(false);
+            expect(radioButtons[1].props('isButtonChecked')).toBe(true);
+            expect(radioButtons[0].props('isButtonChecked')).toBe(false);
             expect(retrieveDVTimeSeriesSpy.mock.calls).toHaveLength(3);
             expect(dvState.currentDVTimeSeriesId.max).toBe('1124');
             expect(dvState.dvGraphBrushOffset).toEqual({
diff --git a/assets/src/scripts/monitoring-location/components/daily-value-hydrograph/vue-components/DvGraphControls.vue b/assets/src/scripts/monitoring-location/components/daily-value-hydrograph/vue-components/DvGraphControls.vue
index 692da0b2ad237b584e72625c017bf53ba4091851..8f5463eb3267831fb84b0267c898476bf5bbd5cb 100644
--- a/assets/src/scripts/monitoring-location/components/daily-value-hydrograph/vue-components/DvGraphControls.vue
+++ b/assets/src/scripts/monitoring-location/components/daily-value-hydrograph/vue-components/DvGraphControls.vue
@@ -18,11 +18,11 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import {useActions, useState} from 'redux-connect-vue';
 import {computed, inject} from 'vue';
 
-import USWDSRadioButtonSet from 'ui/vue-components/radio-button-set.vue';
+import {USWDSRadioButtonSet} from '@wma/wdfn-vue-components';
 
 import {
     getAvailableGWDVTimeSeries,
@@ -31,50 +31,38 @@ import {
 } from 'ml/selectors/daily-value-time-series-selector';
 import {Actions} from 'ml/store/daily-value-time-series';
 
-export default {
-  name: 'DvGraphControls',
-  components: {
-    USWDSRadioButtonSet
-  },
-  setup() {
-    const monitoringLocationId = inject('monitoringLocationId');
-    const store = inject('store');
 
-    const state = useState({
-      availableTimeSeries: getAvailableGWDVTimeSeries,
-      currentParameterCode: getCurrentDVTimeSeriesParameterCode
-    });
+  const monitoringLocationId = inject('monitoringLocationId');
+  const store = inject('store');
 
-    const actions = useActions({
-      retrieveDVTimeSeries: Actions.retrieveDVTimeSeries,
-      setCurrentDVTimeSeriesIds: Actions.setCurrentDVTimeSeriesIds,
-      clearDVGraphBrushOffset: Actions.clearDVGraphBrushOffset
-    });
+  const state = useState({
+    availableTimeSeries: getAvailableGWDVTimeSeries,
+    currentParameterCode: getCurrentDVTimeSeriesParameterCode
+  });
 
-    const availableParameterCodes = computed(() => {
-      return Array.from(new Set(state.availableTimeSeries.value.map(ts => ts.parameterCode))).map((parameterCode) => (
-        {
-          'id': `code-${parameterCode}-radio`,
-          'label': parameterCode,
-          'checked': state.currentParameterCode.value === parameterCode,
-          'actionValue': parameterCode
-        }
-      ));
-    });
+  const actions = useActions({
+    retrieveDVTimeSeries: Actions.retrieveDVTimeSeries,
+    setCurrentDVTimeSeriesIds: Actions.setCurrentDVTimeSeriesIds,
+    clearDVGraphBrushOffset: Actions.clearDVGraphBrushOffset
+  });
 
-    const retrieveAndSetTimeSeries = function(parameterCode) {
-      const timeSeries = getAvailableGWDVTimeSeriesIdsForParameterCode(parameterCode)(store.getState());
-      actions.retrieveDVTimeSeries(monitoringLocationId, timeSeries.min);
-      actions.retrieveDVTimeSeries(monitoringLocationId, timeSeries.mean);
-      actions.retrieveDVTimeSeries(monitoringLocationId, timeSeries.max);
-      actions.clearDVGraphBrushOffset();
-      actions.setCurrentDVTimeSeriesIds(timeSeries.min, timeSeries.mean, timeSeries.max);
-    };
+  const availableParameterCodes = computed(() => {
+    return Array.from(new Set(state.availableTimeSeries.value.map(ts => ts.parameterCode))).map((parameterCode) => (
+      {
+        id: `code-${parameterCode}-radio`,
+        label: parameterCode,
+        checked: state.currentParameterCode.value === parameterCode,
+        buttonValue: parameterCode
+      }
+    ));
+  });
 
-    return {
-      retrieveAndSetTimeSeries,
-      availableParameterCodes
-    };
-  }
-};
-</script>
\ No newline at end of file
+  const retrieveAndSetTimeSeries = function(parameterCode) {
+    const timeSeries = getAvailableGWDVTimeSeriesIdsForParameterCode(parameterCode)(store.getState());
+    actions.retrieveDVTimeSeries(monitoringLocationId, timeSeries.min);
+    actions.retrieveDVTimeSeries(monitoringLocationId, timeSeries.mean);
+    actions.retrieveDVTimeSeries(monitoringLocationId, timeSeries.max);
+    actions.clearDVGraphBrushOffset();
+    actions.setCurrentDVTimeSeriesIds(timeSeries.min, timeSeries.mean, timeSeries.max);
+  };
+</script>
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/download-data.vue b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/download-data.vue
index 01d6b5fd1a9ef003ba7925ba672b0b2c6ac351e9..928eb43b6c2c1cb686f54b2bcdeb8dc3ad394b00 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/download-data.vue
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/download-data.vue
@@ -1,112 +1,19 @@
 <template>
   <div class="download-data-component">
     <fieldset class="usa-fieldset">
-      <legend class="usa-legend">
-        Select data to retrieve
-      </legend>
-
-      <div v-if="hasVisiblePrimaryIVData && !isPrimaryParameterCalculated">
-        <input
-          :id="`${buttonSetName}-primary-data-download-button`"
-          class="usa-radio__input"
-          type="radio"
-          :name="buttonSetName"
-          @click="createDownloadUrl('primary')"
-        >
-        <label
-          class="usa-radio__label"
-          :for="`${buttonSetName}-primary-data-download-button`"
-        >
-          Primary time series
-        </label>
-      </div>
-
-      <div v-if="hasVisibleSecondaryIVData && !isSecondaryParameterCalculated">
-        <input
-          :id="`${buttonSetName}-secondary-data-download-button`"
-          class="usa-radio__input"
-          type="radio"
-          :name="buttonSetName"
-          @click="createDownloadUrl('secondary')"
-        >
-        <label
-          class="usa-radio__label"
-          :for="`${buttonSetName}-secondary-data-download-button`"
-        >
-          Secondary time series
-        </label>
-      </div>
-
-      <div v-if="hasVisibleCompareIVData && !isPrimaryParameterCalculated">
-        <input
-          :id="`${buttonSetName}-compare-data-download-button`"
-          class="usa-radio__input"
-          type="radio"
-          :name="buttonSetName"
-          @click="createDownloadUrl('compare')"
-        >
-        <label
-          class="usa-radio__label"
-          :for="`${buttonSetName}-compare-data-download-button`"
-        >
-          Prior year time series
-        </label>
-      </div>
-
-      <div v-if="hasVisibleMedianData && !isPrimaryParameterCalculated">
-        <input
-          :id="`${buttonSetName}-median-data-download-button`"
-          class="usa-radio__input"
-          type="radio"
-          :name="buttonSetName"
-          @click="createDownloadUrl('median')"
-        >
-        <label
-          class="usa-radio__label"
-          :for="`${buttonSetName}-median-data-download-button`"
-        >
-          Median
-        </label>
-      </div>
-
-      <div v-if="hasVisibleGroundwaterLevels">
-        <input
-          :id="`${buttonSetName}-groundwater-levels-data-download-button`"
-          class="usa-radio__input"
-          type="radio"
-          name="buttonSetName"
-          @click="createDownloadUrl('groundwater-levels')"
-        >
-        <label
-          class="usa-radio__label"
-          :for="`${buttonSetName}-groundwater-levels-data-download-button`"
-        >
-          Field visits
-        </label>
-      </div>
-
-      <div>
-        <input
-          :id="`${buttonSetName}-site-data-download-button`"
-          class="usa-radio__input"
-          type="radio"
-          :name="buttonSetName"
-          @click="createDownloadUrl('site')"
-        >
-        <label
-          class="usa-radio__label"
-          :for="`${buttonSetName}-site-data-download-button`"
-        >
-          About this location
-        </label>
-      </div>
+      <USWDSRadioButtonSet
+        :button-list="buttonList"
+        :button-set-name="buttonSetName"
+        legend-text="Select data to retrieve"
+        @update-value="createDownloadUrl"
+      />
 
       <div>
         <USWDSAlert
           v-if="showErrorMessage"
           alert-type="error"
           slim-alert
-          :static-root="staticRoot"
+          :static-root="config.STATIC_URL"
         >
           <template #default>
             <p class="usa-alert__text">
@@ -129,7 +36,7 @@
             role="img"
           >
             <use
-              :xlink:href="downloadIcon"
+              :xlink:href="`${config.STATIC_URL}img/sprite.svg#file_download`"
             />
           </svg>
           Retrieve
@@ -169,11 +76,13 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import {DateTime} from 'luxon';
 import {useState} from 'redux-connect-vue';
 import {computed, ref, inject} from 'vue';
 
+import {USWDSRadioButtonSet} from '@wma/wdfn-vue-components';
+
 import {USWDSAlert} from '@wma/wdfn-vue-components';
 
 import config from 'ui/config.js';
@@ -196,136 +105,173 @@ import {
 } from '../selectors/time-series-data';
 
 
-export default {
-  name: 'DownloadData',
-  components: {
-    USWDSAlert
-  },
-  props: {
-    buttonSetName: {
-      type: String,
-      required: true
-    }
-  },
-  setup() {
-    const downloadUrl = ref('');
-    const showErrorMessage = ref(false);
-    const state =  useState({
-      hasVisiblePrimaryIVData: hasVisibleIVData('primary'),
-      hasVisibleSecondaryIVData: hasVisibleIVData('secondary'),
-      hasVisibleCompareIVData: hasVisibleIVData('compare'),
-      hasVisibleMedianData: hasVisibleMedianStatisticsData,
-      hasVisibleGroundwaterLevels: hasVisibleGroundwaterLevels,
-      primaryParameter: getPrimaryParameter,
-      secondaryParameter: getSelectedSecondaryParameterCode
+
+const props = defineProps({
+  buttonSetName: {
+    type: String,
+    required: true
+  }
+});
+
+const downloadUrl = ref('');
+const showErrorMessage = ref(false);
+const state =  useState({
+  hasVisiblePrimaryIVData: hasVisibleIVData('primary'),
+  hasVisibleSecondaryIVData: hasVisibleIVData('secondary'),
+  hasVisibleCompareIVData: hasVisibleIVData('compare'),
+  hasVisibleMedianData: hasVisibleMedianStatisticsData,
+  hasVisibleGroundwaterLevels: hasVisibleGroundwaterLevels,
+  primaryParameter: getPrimaryParameter,
+  secondaryParameter: getSelectedSecondaryParameterCode
+});
+
+const reduxStore = inject('store');
+const siteno = inject('siteno');
+const agencyCd = inject('agencyCd');
+
+const isPrimaryParameterCalculated = computed(() => {
+  return state.primaryParameter.value ? isCalculatedTemperature(state.primaryParameter.value['parameterCode']) : false;
+});
+
+const isSecondaryParameterCalculated = computed(() => {
+  return state.secondaryParameter.value ? isCalculatedTemperature(state.secondaryParameter.value['parameterCode']) : false;
+});
+
+const buttonList = computed(() => {
+  const buttonDetails = [];
+
+  if (state.hasVisiblePrimaryIVData.value && !isPrimaryParameterCalculated.value) {
+    buttonDetails.push({
+      id: `${props.buttonSetName}-primary-data-download-button`,
+      label: 'Primary time series',
+      checked: false,
+      buttonValue: 'primary'
     });
+  }
 
-    const reduxStore = inject('store');
-    const siteno = inject('siteno');
-    const agencyCd = inject('agencyCd');
+  if (state.hasVisibleSecondaryIVData.value && !isSecondaryParameterCalculated.value) {
+    buttonDetails.push({
+      id: `${props.buttonSetName}-secondary-data-download-button`,
+      label: 'Secondary time series',
+      checked: false,
+      buttonValue: 'secondary'
+    });
+  }
 
-    const isPrimaryParameterCalculated = computed(() => {
-        return state.primaryParameter.value ? isCalculatedTemperature(state.primaryParameter.value['parameterCode']) : false;
+  if (state.hasVisibleCompareIVData.value && !isPrimaryParameterCalculated.value) {
+    buttonDetails.push({
+      id: `${props.buttonSetName}-compare-data-download-button`,
+      label: 'Prior year time series',
+      checked: false,
+      buttonValue: 'compare'
     });
+  }
 
-    const isSecondaryParameterCalculated = computed(() => {
-      return state.secondaryParameter.value ? isCalculatedTemperature(state.secondaryParameter.value['parameterCode']) : false;
+  if (state.hasVisibleMedianData.value && !isPrimaryParameterCalculated.value) {
+    buttonDetails.push({
+      id: `${props.buttonSetName}-median-data-download-button`,
+      label: 'Median',
+      checked: false,
+      buttonValue: 'median'
     });
+  }
+
+  if (state.hasVisibleGroundwaterLevels.value) {
+    buttonDetails.push( {
+      id: `${props.buttonSetName}-groundwater-levels-data-download-button`,
+      label: 'Field visits',
+      checked: false,
+      buttonValue: 'groundwater-levels'
+    });
+  }
+
+  buttonDetails.push({
+    id: `${props.buttonSetName}-site-data-download-button`,
+    label: 'About this location',
+    checked: false,
+    buttonValue: 'site'
+  });
+
+  return buttonDetails;
+});
+
+const toISO = function(inMillis) {
+  return DateTime.fromMillis(inMillis, {zone: config.locationTimeZone}).toISO();
+};
 
-    const staticRoot = config.STATIC_URL;
-    const downloadIcon = `${config.STATIC_URL}img/sprite.svg#file_download`;
-
-    const toISO = function(inMillis) {
-      return DateTime.fromMillis(inMillis, {zone: config.locationTimeZone}).toISO();
-    };
-
-    const getIVDataURL =  function(reduxStore, siteno, dataKind) {
-      const timeRangePrefix = {
-        primary: 'current',
-        secondary: 'current',
-        compare: 'prioryear'
-      };
-
-      const currentState = reduxStore.getState();
-      const timeRange = getTimeRange(timeRangePrefix[dataKind])(currentState);
-
-      return getIVServiceURL({
-        siteno,
-        parameterCode: dataKind === 'secondary' ? state.secondaryParameter.value : state.primaryParameter.value.parameterCode,
-        startTime: toISO(timeRange.start),
-        endTime: toISO(timeRange.end),
-        format: 'rdb'
-      });
-    };
-
-    const getMedianDataURL = function(store, siteno) {
-      return getStatisticsServiceURL({
-        siteno,
-        parameterCode: getPrimaryParameter(store.getState()).parameterCode,
-        statType: 'median',
-        format: 'rdb'
-      });
-    };
-
-    const getGroundwaterLevelURL = function(siteno, agencyCd) {
-      return getGroundwaterServiceURL({
-        siteno,
-        agencyCd,
-        format: 'json'
-      });
-    };
-
-    const getSiteMetaDataURL = function(siteno) {
-      return getSiteMetaDataServiceURL({
-        siteno,
-        isExpanded: true
-      });
-    };
-
-    const createDownloadUrl = (buttonSelected) => {
-      showErrorMessage.value = false;
-      switch (buttonSelected) {
-        case 'primary':
-          downloadUrl.value = getIVDataURL(reduxStore, siteno, 'primary');
-          break;
-        case 'secondary':
-          downloadUrl.value = getIVDataURL(reduxStore, siteno, 'secondary');
-          break;
-        case 'compare':
-          downloadUrl.value = getIVDataURL(reduxStore, siteno, 'compare');
-          break;
-        case 'median':
-          downloadUrl.value = getMedianDataURL(reduxStore, siteno);
-          break;
-        case 'groundwater-levels':
-          downloadUrl.value = getGroundwaterLevelURL(siteno, agencyCd);
-          break;
-        case 'site':
-          downloadUrl.value = getSiteMetaDataURL(siteno);
-          break;
-      }
-    };
-
-  const retrieveData = () => {
-    if (downloadUrl.value) {
-      showErrorMessage.value = false;
-      window.open(downloadUrl.value, '_blank');
-    } else {
-      showErrorMessage.value = true;
-    }
+const getIVDataURL =  function(reduxStore, siteno, dataKind) {
+  const timeRangePrefix = {
+    primary: 'current',
+    secondary: 'current',
+    compare: 'prioryear'
   };
 
-    return {
-      ...state,
-      createDownloadUrl,
-      downloadIcon,
-      isPrimaryParameterCalculated,
-      isSecondaryParameterCalculated,
-      retrieveData,
-      showErrorMessage,
-      staticRoot
-    };
+  const currentState = reduxStore.getState();
+  const timeRange = getTimeRange(timeRangePrefix[dataKind])(currentState);
+
+  return getIVServiceURL({
+    siteno,
+    parameterCode: dataKind === 'secondary' ? state.secondaryParameter.value : state.primaryParameter.value.parameterCode,
+    startTime: toISO(timeRange.start),
+    endTime: toISO(timeRange.end),
+    format: 'rdb'
+  });
+};
+
+const getMedianDataURL = function(store, siteno) {
+  return getStatisticsServiceURL({
+    siteno,
+    parameterCode: getPrimaryParameter(store.getState()).parameterCode,
+    statType: 'median',
+    format: 'rdb'
+  });
+};
+
+const getGroundwaterLevelURL = function(siteno, agencyCd) {
+  return getGroundwaterServiceURL({
+    siteno,
+    agencyCd,
+    format: 'json'
+  });
+};
+
+const getSiteMetaDataURL = function(siteno) {
+  return getSiteMetaDataServiceURL({
+    siteno,
+    isExpanded: true
+  });
+};
+
+const createDownloadUrl = (buttonSelected) => {
+  showErrorMessage.value = false;
+  switch (buttonSelected) {
+    case 'primary':
+      downloadUrl.value = getIVDataURL(reduxStore, siteno, 'primary');
+      break;
+    case 'secondary':
+      downloadUrl.value = getIVDataURL(reduxStore, siteno, 'secondary');
+      break;
+    case 'compare':
+      downloadUrl.value = getIVDataURL(reduxStore, siteno, 'compare');
+      break;
+    case 'median':
+      downloadUrl.value = getMedianDataURL(reduxStore, siteno);
+      break;
+    case 'groundwater-levels':
+      downloadUrl.value = getGroundwaterLevelURL(siteno, agencyCd);
+      break;
+    case 'site':
+      downloadUrl.value = getSiteMetaDataURL(siteno);
+      break;
   }
 };
-</script>
 
+const retrieveData = () => {
+  if (downloadUrl.value) {
+    showErrorMessage.value = false;
+    window.open(downloadUrl.value, '_blank');
+  } else {
+    showErrorMessage.value = true;
+  }
+};
+</script>
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/parameter-selection.test.js b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/parameter-selection.test.js
index 2a690795553f1685d63ddba71c1851e0c909c86c..a1a7fbfa4a9c603693901650f02955e2ee0a0d8b 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/parameter-selection.test.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/parameter-selection.test.js
@@ -6,6 +6,8 @@ import {mount, shallowMount} from '@vue/test-utils';
 
 import config from 'ui/config';
 
+import {USWDSRadioButton} from '@wma/wdfn-vue-components';
+
 import {configureStore} from 'ml/store';
 import * as hydrographData from 'ml/store/hydrograph-data';
 
@@ -124,25 +126,39 @@ describe('monitoring-location/components/hydrograph/vue-components/parameter-sel
     });
 
     it('Expects a radio button and description for each parameter code with the selected parameter code checked', () =>{
-        const radioButtons = wrapper.findAll('.usa-radio');
-
-        expect(radioButtons).toHaveLength(5);
-
-        const buttonOne = radioButtons[0].find('input');
-        const labelOne = radioButtons[0].find('label');
-        expect(buttonOne.element.checked).toBe(false);
-        expect(buttonOne.attributes('value')).toBe('00060');
-        expect(buttonOne.attributes('id')).toBe('radio-00060');
-        expect(labelOne.text()).toBe('Discharge, cubic feet per second');
-        expect(labelOne.attributes('for')).toBe('radio-00060');
-
-        const buttonTwo = radioButtons[1].find('input');
-        const labelTwo = radioButtons[1].find('label');
-        expect(buttonTwo.element.checked).toBe(true);
-        expect(buttonTwo.attributes('value')).toBe('72019');
-        expect(buttonTwo.attributes('id')).toBe('radio-72019');
-        expect(labelTwo.text()).toBe('Depth to water level, feet below land surface');
-        expect(labelTwo.attributes('for')).toBe('radio-72019');
+        const radioButtonComponents = wrapper.findAllComponents(USWDSRadioButton);
+
+        expect(radioButtonComponents).toHaveLength(5);
+
+        expect(radioButtonComponents[0].props('isButtonChecked')).toBe(false);
+        expect(radioButtonComponents[0].props('radioButtonId')).toBe('radio-00060');
+        expect(radioButtonComponents[0].props('radioButtonLabel')).toBe('Discharge, cubic feet per second');
+        expect(radioButtonComponents[0].props('radioButtonName')).toBe('parameter-selection');
+        expect(radioButtonComponents[0].props('radioButtonValue')).toBe('00060');
+
+        expect(radioButtonComponents[1].props('isButtonChecked')).toBe(true);
+        expect(radioButtonComponents[1].props('radioButtonId')).toBe('radio-72019');
+        expect(radioButtonComponents[1].props('radioButtonLabel')).toBe('Depth to water level, feet below land surface');
+        expect(radioButtonComponents[1].props('radioButtonName')).toBe('parameter-selection');
+        expect(radioButtonComponents[1].props('radioButtonValue')).toBe('72019');
+
+        expect(radioButtonComponents[2].props('isButtonChecked')).toBe(false);
+        expect(radioButtonComponents[2].props('radioButtonId')).toBe('radio-62610');
+        expect(radioButtonComponents[2].props('radioButtonLabel')).toBe('Groundwater level above NGVD 1929, feet');
+        expect(radioButtonComponents[2].props('radioButtonName')).toBe('parameter-selection');
+        expect(radioButtonComponents[2].props('radioButtonValue')).toBe('62610');
+
+        expect(radioButtonComponents[3].props('isButtonChecked')).toBe(false);
+        expect(radioButtonComponents[3].props('radioButtonId')).toBe('radio-00010');
+        expect(radioButtonComponents[3].props('radioButtonLabel')).toBe('Temperature, water, degrees Celsius');
+        expect(radioButtonComponents[3].props('radioButtonName')).toBe('parameter-selection');
+        expect(radioButtonComponents[3].props('radioButtonValue')).toBe('00010');
+
+        expect(radioButtonComponents[4].props('isButtonChecked')).toBe(false);
+        expect(radioButtonComponents[4].props('radioButtonId')).toBe('radio-00010F');
+        expect(radioButtonComponents[4].props('radioButtonLabel')).toBe('Temperature, water, degrees Fahrenheit');
+        expect(radioButtonComponents[4].props('radioButtonName')).toBe('parameter-selection');
+        expect(radioButtonComponents[4].props('radioButtonValue')).toBe('00010F');
     });
 
     it('Expects the period of record and expansion toggle to be properly rendered', () => {
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/parameter-selection.vue b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/parameter-selection.vue
index 94d370c2100467f7153a09dc11e754a808ec61a6..1d516b1590e86401174bf8fa2b61bcffcdcee091 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/parameter-selection.vue
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/parameter-selection.vue
@@ -5,10 +5,10 @@
     </p>
     <div class="main-parameter-selection-container">
       <div
-        v-for="parameter in parameters"
+        v-for="parameter in state.parameters.value"
         :key="parameter.parameterCode"
-        :class="`parameter-row-container ${parameter.parameterCode === selectedParameterCode ? 'selected' : ''}`"
-        :aria-selected="parameter.parameterCode === selectedParameterCode"
+        :class="`parameter-row-container ${parameter.parameterCode === state.selectedParameterCode.value ? 'selected' : ''}`"
+        :aria-selected="parameter.parameterCode === state.selectedParameterCode.value"
       >
         <div
           class="parameter-row-info-container"
@@ -28,22 +28,14 @@
               @toggle-expansion-row="toggleExpansionRow"
             />
           </div>
-          <div class="usa-radio">
-            <input
-              :id="`radio-${parameter.parameterCode}`"
-              class="usa-radio__input"
-              type="radio"
-              name="parameter-selection"
-              :value="parameter.parameterCode"
-              :checked="parameter.parameterCode === selectedParameterCode"
-            >
-            <label
-              class="usa-radio__label description__param-select"
-              :for="`radio-${parameter.parameterCode}`"
-            >
-              {{ parameter.description }}
-            </label>
-          </div>
+
+          <USWDSRadioButton
+            :radio-button-id="`radio-${parameter.parameterCode}`"
+            :radio-button-label="parameter.description"
+            radio-button-name="parameter-selection"
+            :radio-button-value="parameter.parameterCode"
+            :is-button-checked="parameter.parameterCode === state.selectedParameterCode.value"
+          />
         </div>
         <div
           v-show="parameter.parameterCode === expandedParameterCode"
@@ -63,8 +55,8 @@
             </a>
           </div>
           <MethodPicker
-            v-if="sortedIvMethods && parameter.parameterCode === sortedIvMethods.parameterCode && sortedIvMethods.methods.length > 1"
-            :sorted-iv-methods="sortedIvMethods"
+            v-if="state.sortedIvMethods.value && parameter.parameterCode === state.sortedIvMethods.value.parameterCode && state.sortedIvMethods.value.methods.length > 1"
+            :sorted-iv-methods="state.sortedIvMethods.value"
             @select-method="updateSelectedMethod"
           />
 
@@ -80,11 +72,13 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import {useActions, useState} from 'redux-connect-vue';
 import {createSelector} from 'reselect';
 import {inject, ref, computed} from 'vue';
 
+import {USWDSRadioButton} from '@wma/wdfn-vue-components';
+
 import config from 'ui/config';
 
 import {getInputsForRetrieval, getSelectedParameterCode, getSelectedSecondaryParameterCode} from 'ml/selectors/hydrograph-state-selector';
@@ -100,14 +94,7 @@ import MethodPicker from './method-picker.vue';
 import ParameterSelectionExpansionControl from './parameter-selection-expansion-control.vue';
 import SecondaryParameterControls from './secondary-parameter-controls.vue';
 
-export default {
-  name: 'ParameterSelection',
-  components: {
-    MethodPicker,
-    ParameterSelectionExpansionControl,
-    SecondaryParameterControls
-  },
-  setup() {
+
     const reduxStore = inject('store');
     const siteno = inject('siteno');
     const agencyCode = inject('agencyCd');
@@ -215,17 +202,5 @@ export default {
           parameter.parameterCode.replace(config.CALCULATED_TEMPERATURE_VARIABLE_CODE, '') in config.ivPeriodOfRecord);
     }
 
-    return {
-      ...state,
-      expandedParameterCode,
-      isSecondParameterOptionsChecked,
-      secondaryParameterButtonList,
-      selectParameter,
-      setCheckBoxStatus,
-      toggleExpansionRow,
-      updateSelectedMethod,
-      enabledForSecondaryParameter
-    };
-  }
-};
+
 </script>
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/secondary-parameter-controls.test.js b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/secondary-parameter-controls.test.js
index 3844634f86c124939d03a6b32ebe992a06730a67..03a27c1b165617e97227a2f9f5c3bb8ac857b123 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/secondary-parameter-controls.test.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/secondary-parameter-controls.test.js
@@ -8,7 +8,7 @@ import {USWDSCheckbox} from '@wma/wdfn-vue-components';
 
 import config from 'ui/config';
 
-import USWDSRadioButtonSet from 'ui/vue-components/radio-button-set.vue';
+import {USWDSRadioButtonSet} from '@wma/wdfn-vue-components';
 
 import {configureStore} from 'ml/store';
 import * as hydrographData from 'ml/store/hydrograph-data';
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/secondary-parameter-controls.vue b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/secondary-parameter-controls.vue
index eb46c63939c3e968d9af1b056bda2fc4f1003c75..792410300bf52f863bd7ff46ede851a7bc16ac47 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/secondary-parameter-controls.vue
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/secondary-parameter-controls.vue
@@ -27,7 +27,7 @@ import {USWDSCheckbox} from '@wma/wdfn-vue-components';
 
 import config from 'ui/config';
 
-import USWDSRadioButtonSet from 'ui/vue-components/radio-button-set.vue';
+import {USWDSRadioButtonSet} from '@wma/wdfn-vue-components';
 
 import {setSelectedSecondaryParameterCode, setCompareDataVisibility, setShowLoadingIndicator,
   setMedianDataVisibility, setSelectedSecondaryIVMethodID} from 'ml/store/hydrograph-state';
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/time-span-shortcuts.test.js b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/time-span-shortcuts.test.js
index cb26953140f7a98e7c9ba457b1b23eddbfcc7e7b..e01348bf76ca526d24a70f4d25c30fbcfde318a9 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/time-span-shortcuts.test.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/time-span-shortcuts.test.js
@@ -4,6 +4,8 @@ import {createStructuredSelector} from 'reselect';
 import createFetchMock from 'vitest-fetch-mock';
 import {mount} from '@vue/test-utils';
 
+import {USWDSRadioButton, USWDSRadioButtonSet} from '@wma/wdfn-vue-components';
+
 import config from 'ui/config';
 
 import {getSelectedTimeSpan, getGraphBrushOffset} from 'ml/selectors/hydrograph-state-selector';
@@ -108,8 +110,8 @@ describe('monitoring-location/components/hydrograph/components/graph-controls',
         const radio1Year = wrapper.find('#P365D-input');
         const labels = wrapper.findAll('.usa-radio__label');
 
-        expect(wrapper.findAll('.iv-button-container')).toHaveLength(1);
-        expect(wrapper.findAll('.gw-button-container')).toHaveLength(0);
+        expect(wrapper.findAllComponents(USWDSRadioButtonSet)).toHaveLength(1);
+        expect(wrapper.findAllComponents(USWDSRadioButton)).toHaveLength(3);
 
         expect(radio7Day.attributes('value')).toBe('P7D');
         expect(radio7Day.element.checked).toBe(true);
@@ -160,8 +162,8 @@ describe('monitoring-location/components/hydrograph/components/graph-controls',
         const radio1Year = wrapper.find('#P365D-input');
         const labels = wrapper.findAll('.usa-radio__label');
 
-        expect(wrapper.findAll('.iv-button-container')).toHaveLength(1);
-        expect(wrapper.findAll('.gw-button-container')).toHaveLength(0);
+        expect(wrapper.findAllComponents(USWDSRadioButtonSet)).toHaveLength(1);
+        expect(wrapper.findAllComponents(USWDSRadioButton)).toHaveLength(3);
 
         expect(radio7Day.attributes('value')).toBe('P7D');
         expect(radio7Day.element.checked).toBe(true);
@@ -179,7 +181,7 @@ describe('monitoring-location/components/hydrograph/components/graph-controls',
     it('Expects that if the selectedTimeSpan is changed to a days before that is not a shortcut, they are all unset', async() => {
         store.dispatch(setSelectedTimeSpan('P45D'));
         await wrapper.vm.$nextTick();
-         
+
         const radio7Day = wrapper.find('#P7D-input');
         const radio30Day = wrapper.find('#P30D-input');
         const radio1Year = wrapper.find('#P365D-input');
@@ -192,7 +194,7 @@ describe('monitoring-location/components/hydrograph/components/graph-controls',
     it('Expects that if the selectedTimeSpan is changed to a date range, the shortcut radio buttons are not checked', async() => {
         store.dispatch(setSelectedTimeSpan({start: '2020-01-03', end: '2020-05-01'}));
         await wrapper.vm.$nextTick();
-        
+
         const radio7Day = wrapper.find('#P7D-input');
         const radio30Day = wrapper.find('#P30D-input');
         const radio1Year = wrapper.find('#P365D-input');
@@ -285,8 +287,8 @@ describe('monitoring-location/components/hydrograph/components/graph-controls',
         const radioAll = wrapper.find('#periodOfRecord-input');
         const labels = wrapper.findAll('.usa-radio__label');
 
-        expect(wrapper.findAll('.iv-button-container')).toHaveLength(0);
-        expect(wrapper.findAll('.gw-button-container')).toHaveLength(1);
+        expect(wrapper.findAllComponents(USWDSRadioButtonSet)).toHaveLength(1);
+        expect(wrapper.findAllComponents(USWDSRadioButton)).toHaveLength(3);
 
         expect(radio1Year.attributes('value')).toBe('P1Y');
         expect(radio1Year.element.checked).toBe(true);
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/time-span-shortcuts.vue b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/time-span-shortcuts.vue
index 132a5d7ea71e10e670b27b94a8bfd8f2607d8720..55ac15b386453e0238b33c38676dc883c5d90916 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/time-span-shortcuts.vue
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/time-span-shortcuts.vue
@@ -1,66 +1,20 @@
 <template>
   <div class="short-cut-time-span-container">
-    <div class="usa-form">
-      <div
-        v-if="ivData"
-        class="iv-button-container"
-      >
-        <div
-          v-for="shortcut in ivShortcuts"
-          :key="shortcut.label"
-          class="usa-radio"
-        >
-          <input
-            :id="`${shortcut.timeSpan}-input`"
-            class="usa-radio__input"
-            type="radio"
-            name="time-span"
-            :value="shortcut.timeSpan"
-            :checked="selectedTimeSpan === shortcut.timeSpan"
-            @click="setTimeSpan(shortcut.timeSpan)"
-          >
-          <label
-            class="usa-radio__label"
-            :for="`${shortcut.timeSpan}-input`"
-          >
-            {{ shortcut.label }}
-          </label>
-        </div>
-      </div>
-      <div
-        v-if="!ivData && gwData"
-        class="gw-button-container"
-      >
-        <div
-          v-for="shortcut in gwShortcuts"
-          :key="shortcut.label"
-          class="usa-radio"
-        >
-          <input
-            :id="`${shortcut.timeSpan}-input`"
-            class="usa-radio__input"
-            type="radio"
-            name="time-span"
-            :value="shortcut.timeSpan"
-            :checked="selectedTimeSpan === shortcut.timeSpan"
-            @click="setTimeSpan(shortcut.timeSpan)"
-          >
-          <label
-            class="usa-radio__label"
-            :for="`${shortcut.timeSpan}-input`"
-          >
-            {{ shortcut.label }}
-          </label>
-        </div>
-      </div>
-    </div>
+    <USWDSRadioButtonSet
+      :button-list="buttonList"
+      button-set-name="time-span"
+      legend-text=""
+      @update-value="setTimeSpan"
+    />
   </div>
 </template>
 
-<script>
+<script setup>
 import {useActions, useState} from 'redux-connect-vue';
 import {createSelector} from 'reselect';
-import {inject} from 'vue';
+import {inject, computed} from 'vue';
+
+import {USWDSRadioButtonSet} from '@wma/wdfn-vue-components';
 
 import config from 'ui/config.js';
 
@@ -68,58 +22,71 @@ import {getSelectedTimeSpan, getInputsForRetrieval, getSelectedParameterCode} fr
 import {clearGraphBrushOffset, setSelectedTimeSpan, setShowLoadingIndicator} from 'ml/store/hydrograph-state';
 import {retrieveHydrographData} from 'ml/store/hydrograph-data';
 
-export default {
-  name: 'TimeSpanShortcuts',
 
-  setup() {
-    const hasIVData = createSelector(
-      getSelectedParameterCode,
-      (parameterCode) => {
-        return config.ivPeriodOfRecord && parameterCode.replace(config.CALCULATED_TEMPERATURE_VARIABLE_CODE, '') in config.ivPeriodOfRecord;
-      }
-    );
+const hasIVData = createSelector(
+  getSelectedParameterCode,
+  (parameterCode) => {
+    return config.ivPeriodOfRecord && parameterCode.replace(config.CALCULATED_TEMPERATURE_VARIABLE_CODE, '') in config.ivPeriodOfRecord;
+  }
+);
 
-    const hasGWData = createSelector(
-      getSelectedParameterCode,
-      (parameterCode) => {
-        return config.gwPeriodOfRecord && parameterCode.replace(config.CALCULATED_TEMPERATURE_VARIABLE_CODE, '') in config.gwPeriodOfRecord;
-      }
-    );
-    
-    const state = useState({
-      ivData: hasIVData,
-      gwData: hasGWData,
-      selectedTimeSpan: getSelectedTimeSpan
-    });
+const hasGWData = createSelector(
+  getSelectedParameterCode,
+  (parameterCode) => {
+    return config.gwPeriodOfRecord && parameterCode.replace(config.CALCULATED_TEMPERATURE_VARIABLE_CODE, '') in config.gwPeriodOfRecord;
+  }
+);
 
-    const actions = useActions({
-      setSelectedTimeSpan,
-      clearGraphBrushOffset,
-      retrieveHydrographData,
-      setShowLoadingIndicator
-    });
+const state = useState({
+  ivData: hasIVData,
+  gwData: hasGWData,
+  selectedTimeSpan: getSelectedTimeSpan
+});
+
+const actions = useActions({
+  setSelectedTimeSpan,
+  clearGraphBrushOffset,
+  retrieveHydrographData,
+  setShowLoadingIndicator
+});
 
-    const reduxStore = inject('store');
-    const siteno = inject('siteno');
-    const agencyCd = inject('agencyCd');
+const reduxStore = inject('store');
+const siteno = inject('siteno');
+const agencyCd = inject('agencyCd');
 
-    function setTimeSpan(timeSpan) {
-      actions.setSelectedTimeSpan(timeSpan);
-      actions.clearGraphBrushOffset();
-      actions.setShowLoadingIndicator(true);
-      actions.retrieveHydrographData(siteno, agencyCd, getInputsForRetrieval(reduxStore.getState()))
-        .then(() => {
-          actions.setShowLoadingIndicator(false);
-        });
-    }
+const buttonList = computed(() => {
+  const buttonDetails = [];
 
-    return {
-      ...state,
-      ...actions,
-      setTimeSpan,
-      ivShortcuts: config.IV_SHORTCUT_BUTTONS,
-      gwShortcuts: config.GW_SHORTCUT_BUTTONS
-    };
+  if (!state.ivData.value && state.gwData.value) {
+    config.GW_SHORTCUT_BUTTONS.forEach(shortcut => {
+      buttonDetails.push({
+        id: `${shortcut.timeSpan}-input`,
+        label: shortcut.label,
+        checked: state.selectedTimeSpan.value === shortcut.timeSpan,
+        buttonValue: shortcut.timeSpan
+      });
+    });
+  } else if (state.ivData.value) {
+    config.IV_SHORTCUT_BUTTONS.forEach(shortcut => {
+      buttonDetails.push({
+        id: `${shortcut.timeSpan}-input`,
+        label: shortcut.label,
+        checked: state.selectedTimeSpan.value === shortcut.timeSpan,
+        buttonValue: shortcut.timeSpan
+      });
+    });
   }
+
+  return buttonDetails;
+});
+
+const setTimeSpan = function(timeSpan) {
+  actions.setSelectedTimeSpan(timeSpan);
+  actions.clearGraphBrushOffset();
+  actions.setShowLoadingIndicator(true);
+  actions.retrieveHydrographData(siteno, agencyCd, getInputsForRetrieval(reduxStore.getState()))
+    .then(() => {
+      actions.setShowLoadingIndicator(false);
+    });
 };
 </script>