diff --git a/src/components/forms/checkbox/checkbox.yml b/src/components/forms/checkbox/checkbox.yml
deleted file mode 100644
index d286a75..0000000
--- a/src/components/forms/checkbox/checkbox.yml
+++ /dev/null
@@ -1,7 +0,0 @@
-checkboxes:
-  - title: 'Option 1'
-    checked: 'checked'
-  - title: 'Option 2'
-  - title: 'Option 3'
-  - title: 'Option 4'
-    disabled: 'disabled'
diff --git a/src/components/forms/forms.component.yml b/src/components/forms/forms.component.yml
new file mode 100644
index 0000000..cd5286c
--- /dev/null
+++ b/src/components/forms/forms.component.yml
@@ -0,0 +1,42 @@
+name:  Forms
+group: Components
+status: stable
+props:
+  type: object
+  required:
+    - checkboxes
+    - radios
+    - select
+  properties:
+    checkboxes:
+      type: array
+      title: Checkboxes
+      description: The options of checkbox.
+      data:
+        - title: 'Option 1'
+          checked: 'checked'
+        - title: 'Option 2'
+        - title: 'Option 3'
+        - title: 'Option 4'
+          disabled: 'disabled'
+    radios:
+      type: array
+      title: Radio buttons
+      description: The options of radio buttons.
+      data:
+        - title: 'Option 1'
+          checked: 'checked'
+        - title: 'Option 2'
+        - title: 'Option 3'
+        - title: 'Option 4'
+          disabled: 'disabled'
+    select:
+      type: array
+      title: Select
+      description: The options for select.
+      data:
+        - title: 'Choose an Option'
+        - title: 'Option 1'
+        - title: 'Option 2'
+        - title: 'Option 3'
+        - title: 'Option 4'
diff --git a/src/components/forms/forms.stories.js b/src/components/forms/forms.stories.js
index 0489aa3..4120060 100644
--- a/src/components/forms/forms.stories.js
+++ b/src/components/forms/forms.stories.js
@@ -3,19 +3,21 @@ import radio from './radio/radio.twig';
 import select from './select/select.twig';
 import textfields from './textfields/textfields.twig';
 
-import checkboxData from './checkbox/checkbox.yml';
-import radioData from './radio/radio.yml';
-import selectOptionsData from './select/select.yml';
+import { props } from './forms.component.yml';
+
+const checkboxData = props.properties.checkboxes.data;
+const radioData = props.properties.radios.data;
+const selectOptionsData = props.properties.select.data;
 
 /**
  * Storybook Definition.
  */
 export default { title: 'Components/Forms' };
 
-export const checkboxes = () => checkbox(checkboxData);
+export const checkboxes = () => checkbox({ checkboxes: checkboxData });
 
-export const radioButtons = () => radio(radioData);
+export const radioButtons = () => radio({ radios: radioData });
 
-export const selectDropdowns = () => select(selectOptionsData);
+export const selectDropdowns = () => select({ select: selectOptionsData });
 
 export const textfieldsExamples = () => textfields();
diff --git a/src/components/forms/radio/radio.yml b/src/components/forms/radio/radio.yml
deleted file mode 100644
index 806a54b..0000000
--- a/src/components/forms/radio/radio.yml
+++ /dev/null
@@ -1,7 +0,0 @@
-radios:
-  - title: 'Option 1'
-    checked: 'checked'
-  - title: 'Option 2'
-  - title: 'Option 3'
-  - title: 'Option 4'
-    disabled: 'disabled'
diff --git a/src/components/forms/select/_select.scss b/src/components/forms/select/_select.scss
index 57d4265..a090c22 100644
--- a/src/components/forms/select/_select.scss
+++ b/src/components/forms/select/_select.scss
@@ -12,7 +12,7 @@
   &::after {
     border-left: 5px solid transparent;
     border-right: 5px solid transparent;
-    border-top: 9px solid var(--colors-text-body);
+    border-top: 9px solid var(--color-text-body);
     content: ' ';
     position: absolute;
     top: 42%;
@@ -25,21 +25,21 @@
   }
 
   :hover {
-    background: var(--selectdropdown-button-fill-hover);
+    background: var(--selectdropdown-color-button-fill-hover);
   }
 }
 
 .form-item__select {
-  border: var(--border-sm) solid var(--selectdropdown-button-stroke);
-  border-radius: var(--selectdropdown-radius);
+  border: var(--border-sm) solid var(--selectdropdown-color-button-stroke);
+  border-radius: var(--selectdropdown-color-radius);
   height: 41px; // set height required for discrepancy between .form-item__dropdown border and the select :focus border
   font-size: 16px;
   margin: 0;
   outline: none;
   padding: 0.6em 0.8em 0.5em;
   width: 100%;
-  color: var(--selectdropdown-label);
-  background: var(--selectdropdown-button-fill);
+  color: var(--selectdropdown-color-label);
+  background: var(--selectdropdown-color-button-fill);
 
   :focus {
     outline: none;
diff --git a/src/components/forms/select/select.yml b/src/components/forms/select/select.yml
deleted file mode 100644
index 597ac2f..0000000
--- a/src/components/forms/select/select.yml
+++ /dev/null
@@ -1,6 +0,0 @@
-select:
-  - title: 'Choose an Option'
-  - title: 'Option 1'
-  - title: 'Option 2'
-  - title: 'Option 3'
-  - title: 'Option 4'
diff --git a/src/components/tokens/_tokens.scss b/src/components/tokens/_tokens.scss
index 692f43e..a7f2e03 100644
--- a/src/components/tokens/_tokens.scss
+++ b/src/components/tokens/_tokens.scss
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 05 Aug 2024 16:09:06 GMT
+ * Generated on Mon, 05 Aug 2024 16:15:34 GMT
  */
 
 :root {