diff --git a/src/components/InputDiv/InputDiv.stories.ts b/src/components/InputDiv/InputDiv.stories.ts
index c47fdc904891c306244cddbaf4eeaa3b35f8ec30..2b13d87d8c789d331a77ff0d0b1060d10c6a63ee 100644
--- a/src/components/InputDiv/InputDiv.stories.ts
+++ b/src/components/InputDiv/InputDiv.stories.ts
@@ -20,6 +20,11 @@ const meta: Meta = {
     numbersOnly: { control: 'boolean' },
     bottomOnly: { control: 'boolean' },
     scheme: { control: 'text' },
+    darknessTheme: { control: 'select', options: ['100', '200', '300', '400', '500', '600', '700', '800', '900'] },
+    darknessTextColor: {
+      control: 'select',
+      options: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
+    },
     theme: {
       control: 'select',
       options: [
@@ -40,6 +45,26 @@ const meta: Meta = {
         'black',
       ],
     },
+    textColor: {
+      control: 'select',
+      options: [
+        'white',
+        'blue',
+        'sky',
+        'cyan',
+        'teal',
+        'green',
+        'yellow',
+        'orange',
+        'pink',
+        'fuchsia',
+        'purple',
+        'indigo',
+        'rose',
+        'red',
+        'black',
+      ],
+    },
   },
   args: {},
 } satisfies Meta<typeof InputDiv>;
@@ -49,7 +74,5 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Simple: Story = {
-  args: {
-    active: true,
-  },
+  args: {},
 };
diff --git a/src/components/InputDiv/InputDiv.vue b/src/components/InputDiv/InputDiv.vue
index 0a62abd91961ed0adc253fe3af8474b59116bdaf..ee251f04839c4793eddc4084cc466b38a7c38c57 100644
--- a/src/components/InputDiv/InputDiv.vue
+++ b/src/components/InputDiv/InputDiv.vue
@@ -1,28 +1,22 @@
 <script setup lang="ts">
 import type { IInputDivProps } from '@interfaces/componentsProps';
-import { computed } from 'vue';
+import { computed, type Ref } from 'vue';
 import { convertThemeToColor, convertThemeToTextColor, getValueFromSize } from '@helpers/common';
+import { calcPartsBy, calcPartsDash } from '@components/InputDiv/helpers';
 
 const props = withDefaults(defineProps<IInputDivProps>(), {
   scheme: '4by1',
   size: 'normal',
   theme: 'white',
+  darknessTheme: '500',
+  darknessTextColor: '500',
 });
 
-const inputPartsBy = computed(() => {
-  if (!props.scheme.includes('by')) return null;
-  const splat = props.scheme.split('by');
-  const by = splat[1];
-  const result = [];
-  for (let i = 0; i < +splat[0]; i++) {
-    result.push(Array(by).keys());
-  }
-  return result;
-});
-const inputPartsDash = computed(() => {
-  if (!props.scheme.includes('-')) return null;
-  return props.scheme.split('-').map((item) => Array(item).keys());
-});
+const value = defineModel() as Ref<string>;
+const container = document.querySelector('#inputDiv-container');
+
+const inputPartsBy = computed(() => calcPartsBy(props.scheme));
+const inputPartsDash = computed(() => calcPartsDash(props.scheme));
 
 const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
 const color = computed(() =>
@@ -30,18 +24,65 @@ const color = computed(() =>
     ? convertThemeToColor(props.textColor, props.darknessTextColor)
     : convertThemeToTextColor(props.theme, props.darknessTheme),
 );
-const sizeCoefficient = computed(() => getValueFromSize(props.size, [0.75, 1, 2, 3]));
+const inputWidth = computed(() => getValueFromSize(props.size, ['20px', '24px', '30px', '45px']));
+const inputHeight = computed(() => getValueFromSize(props.size, ['30px', '36px', '45px', '67px']));
+const fontSize = computed(() => getValueFromSize(props.size, ['12px', '16px', '24px', '32px']));
+const borderWidth = computed(() => (props.size === 'small' || props.size === 'normal' ? '1px' : '2px'));
+
+const toggleInput = () => {};
 </script>
 
 <template>
-  <section class="inputDiv-container">
-    {{ inputPartsBy }}
-    {{ inputPartsDash }}
+  <section id="inputDiv-container">
     <div v-show="inputPartsBy" class="list">
-      <div v-for="item of inputPartsBy" :key="item" class="item"><input type="text" class="input" /></div>
+      <div
+        v-for="(item, itemIndex) of inputPartsBy"
+        :key="item"
+        :class="[
+          'item',
+          {
+            itemIndex,
+          },
+        ]"
+      >
+        <input
+          v-for="(input, inputIndex) of item"
+          :key="inputIndex"
+          @change="toggleInput(itemIndex, inputIndex)"
+          type="text"
+          :class="[
+            'input',
+            {
+              inputIndex,
+            },
+          ]"
+        />
+      </div>
     </div>
     <div v-show="inputPartsDash" class="list">
-      <div v-for="item of inputPartsDash" :key="item" class="item"><input type="text" class="input" /></div>
+      <div
+        v-for="(item, itemIndex) of inputPartsDash"
+        :key="item"
+        :class="[
+          'item',
+          {
+            itemIndex,
+          },
+        ]"
+      >
+        <input
+          v-for="(input, inputIndex) of item"
+          :key="inputIndex"
+          @change="toggleInput(itemIndex, inputIndex)"
+          type="text"
+          :class="[
+            'input',
+            {
+              inputIndex,
+            },
+          ]"
+        />
+      </div>
     </div>
   </section>
 </template>
@@ -49,9 +90,17 @@ const sizeCoefficient = computed(() => getValueFromSize(props.size, [0.75, 1, 2,
 <style scoped>
 .list {
   display: flex;
-  gap: 20px;
+  gap: v-bind(fontSize);
 }
 .input {
-  border: 1px solid black;
+  all: unset;
+  width: v-bind(inputWidth);
+  height: v-bind(inputHeight);
+  font-size: v-bind(fontSize);
+  text-align: center;
+  background-color: v-bind(themeColor);
+  color: v-bind(color);
+  border: v-bind(borderWidth) solid black;
+  border-radius: 5px;
 }
 </style>
diff --git a/src/components/InputDiv/helpers.ts b/src/components/InputDiv/helpers.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2299055d3611fd1cf6cd0932b8569931cbfbcf81
--- /dev/null
+++ b/src/components/InputDiv/helpers.ts
@@ -0,0 +1,30 @@
+import type { TInputDivScheme } from '@interfaces/componentsProp';
+
+export const calcPartsBy = (scheme: TInputDivScheme) => {
+  if (!scheme.includes('by')) return null;
+  const splat = scheme.split('by');
+  const by = splat[1];
+  const result = [];
+  for (let i = 0; i < +splat[0]; i++) {
+    const arrayToPush = [];
+    for (let j = 0; j < +by; j++) {
+      arrayToPush.push(j);
+    }
+    result.push(arrayToPush);
+  }
+  return result;
+};
+export const calcPartsDash = (scheme: TInputDivScheme) => {
+  if (!scheme.includes('-')) return null;
+  const splat = scheme.split('-');
+  const result = [];
+  for (let i = 0; i < splat.length; i++) {
+    const item = splat[i];
+    const arrayToPush = [];
+    for (let j = 0; j < +item; j++) {
+      arrayToPush.push(j);
+    }
+    result.push(arrayToPush);
+  }
+  return result;
+};