WIP Добавила радиокнопки для выбора пола

src/components/base/BaseInput.vue

@@ -18,6 +18,7 @@
 </template>
 
 <script>
+//TODO: Переписать v-model:value, убрать лишнии пропсы, добавить label или вынести в отдельную компоненту
 export default {
   name: "BaseInput",
   props: {
@@ -47,6 +48,7 @@ export default {
   order: -1
 .right
   order: 1
+//TODO: Вынести grey borders в taiwindConfig
 .input-wrapper
   border: 1.5px solid var(--border-light-grey-color)
   border-radius: 4px

src/components/base/BaseRadioButtonsGroup.vue

@@ -0,0 +1,47 @@
+<template lang="pug">
+  .container.flex.flex-col.gap-y-2
+    .label.font-semibold.text-smm(v-if="radioButtonsLabel") {{ radioButtonsLabel }}
+    .group.flex.gap-x-4.text-base(:class="{'flex-col gap-y-1': direction === 'col'}")
+      .option(v-for="item in items")
+        input.mr-2(
+          type="radio",
+          :id="item?.id",
+          :value="item?.value",
+          v-model="value"
+        )
+        span {{item?.label}}
+</template>
+
+<script>
+export default {
+  name: "BaseRadioButtonsGroup",
+  emits: ["update:modelValue"],
+  props: {
+    modelValue: String,
+    radioButtonsLabel: String,
+    items: {
+      type: Array,
+      default: () => [],
+    },
+    direction: {
+      type: String,
+      default: "row",
+    },
+  },
+  computed: {
+    value: {
+      get() {
+        return this.modelValue;
+      },
+      set(value) {
+        this.$emit("update:modelValue", value);
+      },
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.label
+  color: var(--font-grey-color)
+</style>