JSFiddle - React, Tailwind, and code Playground

HTML

<form action="/sendForm">
  <div class="inputs-form">
      <h1>Выберите пункты:</h1>
    <label>
      <input type="radio" name="size" class="form-radio" data-price="1000">   
      <span><b>Размер:</b> 3x6</span>
    </label>

    <label>
      <input type="radio" name="size" class="form-radio" data-price="2000">
      <span><b>Размер:</b> 3x4</span>
    </label>

    <label>
      <input type="radio" name="material" class="form-radio" data-price="3000">    
      <span><b>Материал:</b> Криптонит</span>
    </label>

    <label>
      <input type="radio" name="material" class="form-radio" data-price="4000">    
      <span><b>Материал:</b> Аметист</span>
    </label>
    <p><b>Итого:</b> <span class="totalPrice">0</span><p>
  </div>
</form>

CSS

html,
body {
  margin: 0;
  font-family: Arial;
}

.inputs-form {
  display: inline-flex;
  flex-direction: column;
  padding: 10px;
  max-width: 300px;
  width: 100%;
  color: white;
  background: #2D4571;
}

JavaScript

const radioButtons = document.querySelectorAll('.form-radio');
const totalPriceEl = document.querySelector('.totalPrice');

radioButtons.forEach( item => {
  // Добавляем событие на клик
  item.addEventListener('click', e => {
    //При клике считываем все активные Radio
    let totalPrice = 0;
    radioButtons.forEach( item => {
    // Прибавляем к итоговой сумме значение Radio
      if(item.checked) {
        totalPrice += +item.getAttribute('data-price');
      }
    })
    // Вставляем его в DOM
    totalPriceEl.innerText = totalPrice;
  })
})