переделал логику на tabs

assets/css/gp-style-core.css

@@ -694,7 +694,7 @@ button{
 .form-input-phone-list-item__code::before{
   content: '+';
 }
-.form-input__two{
+.form-input__tabs{
   padding: 2px;
 
   display: flex;
@@ -704,24 +704,8 @@ button{
 
   position: relative;
 }
-.form-input-two__oval{
+.form-input-tabs__button{
-  position: absolute;
+  width: 100%;
-  top: 2px;
-  left: 2px;
-
-  width: 50%;
-  height: calc(100% - 4px);
-
-  border-radius: 18px;
-
-  background: var(--background-white);
-  transition: left .2s ease-out;
-}
-.form-input-two__input:checked + .form-input-two__oval{
-  left: calc(50% - 2px);
-}
-.form-input-two__button{
-  width: 50%;
 
   padding: 10px;
 
@@ -730,13 +714,18 @@ button{
   font-size: 20px;
   line-height: 120%;
   color: var(--text-black);
+  text-align: center;
 
-  background: none;
+  border-radius: 18px;
-  border: none;
 
   z-index: 2;
+
+  transition: background-color .2s ease-out;
+}
+.form-input-tabs__button.active{
+  background-color: var(--background-white);
 }
-.form-input-two__input{
+.form-input-tabs__input{
   display: none;
 }
 .form-input__radio{

assets/js/gp-form.js

@@ -73,35 +73,26 @@ function checkPhone(input) {
     })
 }
 
-inputTwo('.form-input__two', '.form-input-two__input')
+inputTabs('.form-input__tabs', '.form-input-tabs__button');
 
-function inputTwo(main, inputTwo) {
+function inputTabs(main, button) {
-    let buttons = document.querySelectorAll(main);
+    let mains = document.querySelectorAll(main);
 
-    buttons.forEach(button => {
+    mains.forEach(main => {
-        let input = button.querySelector(inputTwo);
+        let buttons = main.querySelectorAll(button);
 
+        buttons.forEach(button => {
             button.onclick = function () {
-            input.checked = (input.checked == false) ? true : false;
+                main.querySelector('.active').classList.remove('active');
-
-            if (button.dataset.content) {
-                let content = button.dataset.content,
-                    childrens = document.querySelector(`.${content}`).children;
-                
-                    Object.keys(childrens).forEach(blockId => {
-                        let block = childrens[blockId];
 
-                        if (block.classList.contains('active')) {
+                button.classList.add('active');
-                            block.classList.remove('active');
-                        }else{
-                            block.classList.add('active');
             }
         })
-            }
+        
-        }        
     })
 }
 
+
 inputRadio('.form-input__radio', '.form-input-radio__item', '.form-input-radio__title', '.form-input-radio__input')
 
 function inputRadio(main ,item, textClass, input) {

registration.html

@@ -801,12 +801,16 @@
                 <form class="modal-form__content check" method="post" action="/send-telegram.php">
                     <div class="modal-form-content__line">
                         <label for="" class="label-name">Вид животного</label>
-                        <div class="form-input__two">
+                        <div class="form-input__tabs">
-                            <input type="radio" class="form-input-two__input">
+                            <label for="cat" class="form-input-tabs__button active">
-                            <div class="form-input-two__oval"></div>
+                                Кошка
+                                <input type="radio" checked name="pet" id="cat" class="form-input-tabs__input">
+                            </label>
 
-                            <button class="form-input-two__button">Кошка</button>
+                            <label for="dog" class="form-input-tabs__button">
-                            <button class="form-input-two__button ">Собака</button>
+                                Собака
+                                <input type="radio" name="pet" id="dog" class="form-input-tabs__input">
+                            </label>
                         </div>
                     </div>
 
@@ -828,13 +832,17 @@
 
                     <div class="modal-form-content__line">
                         <label for="" class="label-name">Пол вашего питомца</label>
-                        <div class="form-input__two">
-                            <input type="radio" class="form-input-two__input">
-                            <div class="form-input-two__oval"></div>
 
-                            <button class="form-input-two__button">Мальчик</button>
+                        <div class="form-input__tabs">
-                            <button class="form-input-two__button ">Девочка</button>
+                            <label for="boy" class="form-input-tabs__button active">
+                                Мальчик
+                                <input type="radio" checked name="floor" id="boy" class="form-input-tabs__input">
+                            </label>
 
+                            <label for="girl" class="form-input-tabs__button">
+                                Девочка
+                                <input type="radio" name="floor" id="girl" class="form-input-tabs__input">
+                            </label>
                         </div>
                     </div>
 
@@ -944,13 +952,16 @@
 
                     <div class="modal-form-content__line">
                         <label for="" class="label-name">Возраст питомца</label>
-                        <div class="form-input__two" data-content="modal__age">
+                        <div class="form-input__tabs" data-content="modal__age">
-                            <input type="radio" class="form-input-two__input">
+                            <label for="exemplary" class="form-input-tabs__button active">
-
+                                Примерный
-                            <div class="form-input-two__oval"></div>
+                                <input type="radio" checked name="weight" id="exemplary" class="form-input-tabs__input">
-
+                            </label>
-                            <button class="form-input-two__button">Примерный</button>
+
-                            <button class="form-input-two__button ">Точный</button>
+                            <label for="accurate" class="form-input-tabs__button">
+                                Точный
+                                <input type="radio" name="weight" id="accurate" class="form-input-tabs__input">
+                            </label>
                         </div>
                     </div>