From 6de786eb34821b60639c24a860f475be5450bfe4 Mon Sep 17 00:00:00 2001
From: Sina Zinsaz <sinazinsaz1@gmail.com>
Date: Tue, 14 Oct 2025 14:59:42 +0330
Subject: [PATCH 1/2] chore: add textarea component variations for Angular and
 React

---
 .../form-field/textarea/color.stories.ts      | 48 +++++++++++++++++
 .../form-field/textarea/index.stories.ts      |  3 ++
 .../form-field/textarea/size.stories.ts       | 48 +++++++++++++++++
 .../form-field/textarea/type.stories.ts       | 48 +++++++++++++++++
 .../form-field/textarea/index.stories.ts      |  5 ++
 .../textarea/overview/autoresize.stories.tsx  | 50 +++++++++++++++++
 .../textarea/overview/color.stories.tsx       | 54 +++++++++++++++++++
 .../textarea/overview/default.stories.tsx     |  4 +-
 .../textarea/overview/error-state.stories.tsx | 53 ++++++++++++++++++
 .../textarea/overview/size.stories.tsx        | 53 ++++++++++++++++++
 .../textarea/overview/type.stories.tsx        | 53 ++++++++++++++++++
 11 files changed, 417 insertions(+), 2 deletions(-)
 create mode 100644 apps/angular-kits-doc/stories/ui-components/form-field/textarea/color.stories.ts
 create mode 100644 apps/angular-kits-doc/stories/ui-components/form-field/textarea/size.stories.ts
 create mode 100644 apps/angular-kits-doc/stories/ui-components/form-field/textarea/type.stories.ts
 create mode 100644 apps/react-kits-doc/stories/ui-components/form-field/textarea/overview/autoresize.stories.tsx
 create mode 100644 apps/react-kits-doc/stories/ui-components/form-field/textarea/overview/color.stories.tsx
 create mode 100644 apps/react-kits-doc/stories/ui-components/form-field/textarea/overview/error-state.stories.tsx
 create mode 100644 apps/react-kits-doc/stories/ui-components/form-field/textarea/overview/size.stories.tsx
 create mode 100644 apps/react-kits-doc/stories/ui-components/form-field/textarea/overview/type.stories.tsx

diff --git a/apps/angular-kits-doc/stories/ui-components/form-field/textarea/color.stories.ts b/apps/angular-kits-doc/stories/ui-components/form-field/textarea/color.stories.ts
new file mode 100644
index 00000000..611dfb6c
--- /dev/null
+++ b/apps/angular-kits-doc/stories/ui-components/form-field/textarea/color.stories.ts
@@ -0,0 +1,48 @@
+import { TextareaComponent } from '@cocokits/angular-form-field';
+import { renderWithPageTab, renderWithThemeProp } from '@cocokits/storybook-addon-theme';
+import { StoryObj } from '@cocokits/storybook-addon-theme-angular';
+
+export const Color: StoryObj<TextareaComponent> = {
+  name: 'Color',
+  parameters: {
+    docs: {
+      description: {
+        story: 'This demonstrates the different color variations of the textarea.',
+      },
+    },
+    cckAddon: {
+      renderConditions: [renderWithThemeProp('color'), renderWithPageTab('Overview')],
+      source: [
+        {
+          filename: 'example.component.html',
+          language: 'angular-html',
+          code: `
+          <% themeComponentConfig.color.values.map(color => { %>
+            <cck-form-field>
+              <cck-label><%= color %></cck-label>
+              <textarea
+                cckTextarea
+                [color]='"<%= color %>"'
+                placeholder="<%= color %>"
+              ></textarea>
+            </cck-form-field>
+          <% }) %>
+          `,
+        },
+      ],
+    },
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      @for (color of cckControl.themeComponentConfig.color.values; let col = $index; track color) {
+        <cck-form-field>
+          <cck-label>{{color}}</cck-label>
+          <textarea cckTextarea [color]="color" [placeholder]="color"></textarea>
+        </cck-form-field>
+      }
+    `,
+  }),
+};
\ No newline at end of file
diff --git a/apps/angular-kits-doc/stories/ui-components/form-field/textarea/index.stories.ts b/apps/angular-kits-doc/stories/ui-components/form-field/textarea/index.stories.ts
index 344fea56..6124bdc5 100644
--- a/apps/angular-kits-doc/stories/ui-components/form-field/textarea/index.stories.ts
+++ b/apps/angular-kits-doc/stories/ui-components/form-field/textarea/index.stories.ts
@@ -7,6 +7,9 @@ import descriptionMd from './description.md';
 
 export { Default } from './default.stories';
 export { AutoResize } from './auto-resize.stories';
+export { Color } from './color.stories';
+export { Size } from './size.stories';
+export { Type } from './type.stories';
 
 const meta: StoriesMeta = {
   component: TextareaComponent,
diff --git a/apps/angular-kits-doc/stories/ui-components/form-field/textarea/size.stories.ts b/apps/angular-kits-doc/stories/ui-components/form-field/textarea/size.stories.ts
new file mode 100644
index 00000000..a6076084
--- /dev/null
+++ b/apps/angular-kits-doc/stories/ui-components/form-field/textarea/size.stories.ts
@@ -0,0 +1,48 @@
+import { TextareaComponent } from '@cocokits/angular-form-field';
+import { renderWithPageTab, renderWithThemeProp } from '@cocokits/storybook-addon-theme';
+import { StoryObj } from '@cocokits/storybook-addon-theme-angular';
+
+export const Size: StoryObj<TextareaComponent> = {
+  name: 'Size',
+  parameters: {
+    docs: {
+      description: {
+        story: 'This demonstrates the different size variations of the textarea.',
+      },
+    },
+    cckAddon: {
+      renderConditions: [renderWithThemeProp('size'), renderWithPageTab('Overview')],
+      source: [
+        {
+          filename: 'example.component.html',
+          language: 'angular-html',
+          code: `
+          <% themeComponentConfig.size.values.map(size => { %>
+            <cck-form-field>
+              <cck-label><%= size %></cck-label>
+              <textarea
+                cckTextarea
+                [size]='"<%= size %>"'
+                placeholder="<%= size %>"
+              ></textarea>
+            </cck-form-field>
+          <% }) %>
+          `,
+        },
+      ],
+    },
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      @for (size of cckControl.themeComponentConfig.size.values; let index = $index; track size) {
+        <cck-form-field>
+          <cck-label>{{size}}</cck-label>
+          <textarea cckTextarea [size]="size" [placeholder]="size"></textarea>
+        </cck-form-field>
+      }
+    `,
+  }),
+};
\ No newline at end of file
diff --git a/apps/angular-kits-doc/stories/ui-components/form-field/textarea/type.stories.ts b/apps/angular-kits-doc/stories/ui-components/form-field/textarea/type.stories.ts
new file mode 100644
index 00000000..2d20b75f
--- /dev/null
+++ b/apps/angular-kits-doc/stories/ui-components/form-field/textarea/type.stories.ts
@@ -0,0 +1,48 @@
+import { TextareaComponent } from '@cocokits/angular-form-field';
+import { renderWithPageTab, renderWithThemeProp } from '@cocokits/storybook-addon-theme';
+import { StoryObj } from '@cocokits/storybook-addon-theme-angular';
+
+export const Type: StoryObj<TextareaComponent> = {
+  name: 'Type',
+  parameters: {
+    docs: {
+      description: {
+        story: 'This demonstrates the different type variations of the textarea.',
+      },
+    },
+    cckAddon: {
+      renderConditions: [renderWithThemeProp('type'), renderWithPageTab('Overview')],
+      source: [
+        {
+          filename: 'example.component.html',
+          language: 'angular-html',
+          code: `
+          <% themeComponentConfig.type.values.map(type => { %>
+            <cck-form-field>
+              <cck-label><%= type %></cck-label>
+              <textarea
+                cckTextarea 
+                [type]='"<%= type %>"'
+                placeholder="<%= type %>"
+              ></textarea>
+            </cck-form-field>
+          <% }) %>
+          `,
+        },
+      ],
+    },
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      @for (type of cckControl.themeComponentConfig.type.values; let index = $index; track type) {
+        <cck-form-field>
+          <cck-label>{{type}}</cck-label>
+          <textarea cckTextarea [type]="type" [placeholder]="type"></textarea>
+        </cck-form-field>
+      }
+    `,
+  }),
+};
\ No newline at end of file
diff --git a/apps/react-kits-doc/stories/ui-components/form-field/textarea/index.stories.ts b/apps/react-kits-doc/stories/ui-components/form-field/textarea/index.stories.ts
index eb68cb78..acd18c84 100644
--- a/apps/react-kits-doc/stories/ui-components/form-field/textarea/index.stories.ts
+++ b/apps/react-kits-doc/stories/ui-components/form-field/textarea/index.stories.ts
@@ -4,6 +4,11 @@ import { StoriesMeta } from '@cocokits/storybook-addon-theme-react';
 import descriptionMd from './description.md?raw';
 
 export { Default } from './overview/default.stories';
+export { ErrorState } from './overview/error-state.stories';
+export { AutoResize } from './overview/autoresize.stories';
+export { Color } from './overview/color.stories';
+export { Size } from './overview/size.stories';
+export { Type } from './overview/type.stories';
 
 const meta: StoriesMeta<typeof Textarea> = {
   component: Textarea,
diff --git a/apps/react-kits-doc/stories/ui-components/form-field/textarea/overview/autoresize.stories.tsx b/apps/react-kits-doc/stories/ui-components/form-field/textarea/overview/autoresize.stories.tsx
new file mode 100644
index 00000000..02c54c2f
--- /dev/null
+++ b/apps/react-kits-doc/stories/ui-components/form-field/textarea/overview/autoresize.stories.tsx
@@ -0,0 +1,50 @@
+import { FormField, Label, Textarea } from '@cocokits/react-components';
+import { renderWithPageTab } from '@cocokits/storybook-addon-theme';
+import { StoryObj } from '@cocokits/storybook-addon-theme-react';
+
+export const AutoResize: StoryObj<typeof Textarea> = {
+  name: 'Auto Resize',
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'This demonstrates the textarea with the autoResize property enabled, allowing it to automatically adjust its height based on content.',
+      },
+    },
+    cckAddon: {
+      renderConditions: [renderWithPageTab('Overview')],
+      source: [
+        {
+          filename: 'Source Code',
+          language: 'tsx',
+          code: `
+            import { FormField, Label, Textarea } from "@cocokits/react-components";
+            export const MyComponent = () => {
+            return (
+                <>
+                      <FormField>
+                        <Label>Auto Resize</Label>
+                        <Textarea
+                          autoResize
+                          placeholder="placeholder"
+                        >
+                          Auto Resize
+                        </Textarea>
+                      </FormField>
+                </>
+            );
+            }
+          `,
+        },
+      ],
+    },
+  },
+  render: () => (
+    <>
+      <FormField>
+        <Label>Auto Resize</Label>
+        <Textarea autoResize placeholder="placeholder" />
+      </FormField>
+    </>
+  ),
+};
diff --git a/apps/react-kits-doc/stories/ui-components/form-field/textarea/overview/color.stories.tsx b/apps/react-kits-doc/stories/ui-components/form-field/textarea/overview/color.stories.tsx
new file mode 100644
index 00000000..314ee23b
--- /dev/null
+++ b/apps/react-kits-doc/stories/ui-components/form-field/textarea/overview/color.stories.tsx
@@ -0,0 +1,54 @@
+import { FormField, Label, Textarea } from '@cocokits/react-components';
+import { renderWithPageTab, renderWithThemeProp } from '@cocokits/storybook-addon-theme';
+import { StoryObj } from '@cocokits/storybook-addon-theme-react';
+
+export const Color: StoryObj<typeof Textarea> = {
+  name: 'Color',
+  parameters: {
+    docs: {
+      description: {
+        story: 'This demonstrates the different color variations of the textarea to match various design contexts.',
+      },
+    },
+    cckAddon: {
+      renderConditions: [renderWithThemeProp('color'), renderWithPageTab('Overview')],
+      source: [
+        {
+          filename: 'Source Code',
+          language: 'tsx',
+          code: `
+              import { FormField, Label, Textarea } from "@cocokits/react-components";
+              export const MyComponent = () => {
+                return (
+                  <>
+                    <% themeComponentConfig.color.values.map(color => { %>
+                      <FormField>
+                        <Label><%= color %></Label>
+                        <Textarea
+                          color="<%= color %>"
+                          <% if (typeof type !== 'undefined') { %> type='<%= type %>' <% } %>
+                        >
+                          <%= color %>
+                        </Textarea>
+                      </FormField>
+                      
+                    <% }) %>
+                  </>
+                );
+              }
+          `,
+        },
+      ],
+    },
+  },
+  render: (args) => (
+    <>
+      {args.cckControl.themeComponentConfig.color?.values.map((color, index) => (
+        <FormField key={index}>
+          <Label>{color}</Label>
+          <Textarea color={color} />
+        </FormField>
+      ))}
+    </>
+  ),
+};
diff --git a/apps/react-kits-doc/stories/ui-components/form-field/textarea/overview/default.stories.tsx b/apps/react-kits-doc/stories/ui-components/form-field/textarea/overview/default.stories.tsx
index 2c121cc1..f0501ef4 100644
--- a/apps/react-kits-doc/stories/ui-components/form-field/textarea/overview/default.stories.tsx
+++ b/apps/react-kits-doc/stories/ui-components/form-field/textarea/overview/default.stories.tsx
@@ -18,12 +18,12 @@ export const Default: StoryObj<typeof Textarea> = {
           filename: 'Source Code',
           language: 'tsx',
           code: `
-                     import { FormField, Label, Textarea } from "@cocokits/react-components";
+            import { FormField, Label, Textarea } from "@cocokits/react-components";
   
             export const MyComponent = () => {
               return (
                 <>
-<FormField>
+            <FormField>
               <% if (label) { %>
                 <Label><%= label %></Label>
               <% } %>
diff --git a/apps/react-kits-doc/stories/ui-components/form-field/textarea/overview/error-state.stories.tsx b/apps/react-kits-doc/stories/ui-components/form-field/textarea/overview/error-state.stories.tsx
new file mode 100644
index 00000000..a418d88a
--- /dev/null
+++ b/apps/react-kits-doc/stories/ui-components/form-field/textarea/overview/error-state.stories.tsx
@@ -0,0 +1,53 @@
+import { FormField, Label, Textarea } from '@cocokits/react-components';
+import { renderWithPageTab } from '@cocokits/storybook-addon-theme';
+import { StoryObj } from '@cocokits/storybook-addon-theme-react';
+
+export const ErrorState: StoryObj<typeof Textarea> = {
+  name: 'Error State',
+  parameters: {
+    docs: {
+      description: {
+        story: 'This demonstrates both normal and error states for the textarea component.',
+      },
+    },
+    cckAddon: {
+      renderConditions: [renderWithPageTab('Overview')],
+      source: [
+        {
+          filename: 'Source Code',
+          language: 'tsx',
+          code: `
+          import { FormField, Label, Textarea, Text } from "@cocokits/react-components";
+          export const MyComponent = () => {
+            return (
+              <>
+                <FormField>
+                  <Label>Normal</Label>
+                  <Textarea placeholder="placeholder" />
+                </FormField>
+                <FormField invalid>
+                  <Label>Error State</Label>
+                  <Textarea invalid placeholder="placeholder" />
+                </FormField>
+              </>
+            );
+          };
+          `,
+        },
+      ],
+    },
+  },
+  render: () => (
+    <>
+      <FormField>
+        <Label>Normal</Label>
+        <Textarea placeholder="placeholder" />
+      </FormField>
+
+      <FormField invalid>
+        <Label>Error State</Label>
+        <Textarea invalid placeholder="placeholder" />
+      </FormField>
+    </>
+  ),
+};
diff --git a/apps/react-kits-doc/stories/ui-components/form-field/textarea/overview/size.stories.tsx b/apps/react-kits-doc/stories/ui-components/form-field/textarea/overview/size.stories.tsx
new file mode 100644
index 00000000..c6c5dc6b
--- /dev/null
+++ b/apps/react-kits-doc/stories/ui-components/form-field/textarea/overview/size.stories.tsx
@@ -0,0 +1,53 @@
+import { FormField, Label, Textarea } from '@cocokits/react-components';
+import { renderWithPageTab, renderWithThemeProp } from '@cocokits/storybook-addon-theme';
+import { StoryObj } from '@cocokits/storybook-addon-theme-react';
+
+export const Size: StoryObj<typeof Textarea> = {
+  name: 'Size',
+  parameters: {
+    docs: {
+      description: {
+        story: 'This demonstrates the different size variations of the textarea to match various design contexts.',
+      },
+    },
+    cckAddon: {
+      renderConditions: [renderWithThemeProp('size'), renderWithPageTab('Overview')],
+      source: [
+        {
+          filename: 'Source Code',
+          language: 'tsx',
+          code: `
+              import { FormField, Label, Textarea } from "@cocokits/react-components";
+              export const MyComponent = () => {
+                return (
+                  <>
+                    <% themeComponentConfig.size.values.map(size => { %>
+                      <FormField>
+                        <Label><%= size %></Label>
+                        <Textarea
+                          <% if (typeof type !== 'undefined') { %> type='<%= type %>' <% } %>
+                        >
+                          <%= size %>
+                        </Textarea>
+                      </FormField>
+                      
+                    <% }) %>
+                  </>
+                );
+              }
+          `,
+        },
+      ],
+    },
+  },
+  render: (args) => (
+    <>
+      {args.cckControl.themeComponentConfig.size?.values.map((size, index) => (
+        <FormField key={index}>
+          <Label>{size}</Label>
+          <Textarea size={size} />
+        </FormField>
+      ))}
+    </>
+  ),
+};
diff --git a/apps/react-kits-doc/stories/ui-components/form-field/textarea/overview/type.stories.tsx b/apps/react-kits-doc/stories/ui-components/form-field/textarea/overview/type.stories.tsx
new file mode 100644
index 00000000..3948cae8
--- /dev/null
+++ b/apps/react-kits-doc/stories/ui-components/form-field/textarea/overview/type.stories.tsx
@@ -0,0 +1,53 @@
+import { FormField, Label, Textarea } from '@cocokits/react-components';
+import { renderWithPageTab, renderWithThemeProp } from '@cocokits/storybook-addon-theme';
+import { StoryObj } from '@cocokits/storybook-addon-theme-react';
+
+export const Type: StoryObj<typeof Textarea> = {
+  name: 'Type',
+  parameters: {
+    docs: {
+      description: {
+        story: 'This demonstrates the different type variations of the textarea to match various design contexts.',
+      },
+    },
+    cckAddon: {
+      renderConditions: [renderWithThemeProp('type'), renderWithPageTab('Overview')],
+      source: [
+        {
+          filename: 'Source Code',
+          language: 'tsx',
+          code: `
+              import { FormField, Label, Textarea } from "@cocokits/react-components";
+              export const MyComponent = () => {
+                return (
+                  <>
+                    <% themeComponentConfig.type.values.map(type => { %>
+                      <FormField>
+                        <Label><%= type %></Label>
+                        <Textarea
+                          <% if (typeof type !== 'undefined') { %> type='<%= type %>' <% } %>
+                        >
+                          <%= type %>
+                        </Textarea>
+                      </FormField>
+                      
+                    <% }) %>
+                  </>
+                );
+              }
+          `,
+        },
+      ],
+    },
+  },
+  render: (args) => (
+    <>
+      {args.cckControl.themeComponentConfig.type?.values.map((type, index) => (
+        <FormField key={index}>
+          <Label>{type}</Label>
+          <Textarea type={type} />
+        </FormField>
+      ))}
+    </>
+  ),
+};

From 5f4977ce4376827e32293c3203b1617561281080 Mon Sep 17 00:00:00 2001
From: Sina Zinsaz <sinazinsaz1@gmail.com>
Date: Sat, 18 Oct 2025 14:57:45 +0330
Subject: [PATCH 2/2] feat(docs): add new select component stories for Angular
 and React

---
 .../form-field/select/index.stories.ts        |  4 ++
 .../select/overview/color.stories.ts          | 57 ++++++++++++++++
 .../select/overview/default.stories.ts        |  2 +-
 .../select/overview/option-group.stories.ts   |  2 +-
 .../select/overview/reactiveform.stories.ts   | 65 ++++++++++++++++++
 .../select/overview/size.stories.ts           |  5 +-
 .../select/overview/type.stories.ts           | 58 ++++++++++++++++
 .../select/overview/withngmodel.stories.ts    | 68 +++++++++++++++++++
 .../form-field/select/index.stories.ts        |  5 +-
 .../select/overview/color.stories.tsx         | 62 +++++++++++++++++
 .../select/overview/default.stories.tsx       |  2 +-
 .../select/overview/error-state.stories.tsx   | 53 +++++++++++++++
 .../select/overview/size.stories.tsx          | 62 +++++++++++++++++
 .../select/overview/type.stories.tsx          | 58 ++++++++++++++++
 14 files changed, 496 insertions(+), 7 deletions(-)
 create mode 100644 apps/angular-kits-doc/stories/ui-components/form-field/select/overview/color.stories.ts
 create mode 100644 apps/angular-kits-doc/stories/ui-components/form-field/select/overview/reactiveform.stories.ts
 create mode 100644 apps/angular-kits-doc/stories/ui-components/form-field/select/overview/type.stories.ts
 create mode 100644 apps/angular-kits-doc/stories/ui-components/form-field/select/overview/withngmodel.stories.ts
 create mode 100644 apps/react-kits-doc/stories/ui-components/form-field/select/overview/color.stories.tsx
 create mode 100644 apps/react-kits-doc/stories/ui-components/form-field/select/overview/error-state.stories.tsx
 create mode 100644 apps/react-kits-doc/stories/ui-components/form-field/select/overview/size.stories.tsx
 create mode 100644 apps/react-kits-doc/stories/ui-components/form-field/select/overview/type.stories.tsx

diff --git a/apps/angular-kits-doc/stories/ui-components/form-field/select/index.stories.ts b/apps/angular-kits-doc/stories/ui-components/form-field/select/index.stories.ts
index 3b756260..301de90a 100644
--- a/apps/angular-kits-doc/stories/ui-components/form-field/select/index.stories.ts
+++ b/apps/angular-kits-doc/stories/ui-components/form-field/select/index.stories.ts
@@ -17,6 +17,10 @@ export { Default } from './overview/default.stories';
 export { Size } from './overview/size.stories';
 export { CustomPreview } from './overview/custom-preview.stories';
 export { OptionGroup } from './overview/option-group.stories';
+export { Type } from './overview/type.stories';
+export { Color } from './overview/color.stories';
+export { WithNgModel } from './overview/withngmodel.stories';
+export { ReactiveForm } from './overview/reactiveform.stories';
 
 const meta: StoriesMeta = {
   component: SelectComponent,
diff --git a/apps/angular-kits-doc/stories/ui-components/form-field/select/overview/color.stories.ts b/apps/angular-kits-doc/stories/ui-components/form-field/select/overview/color.stories.ts
new file mode 100644
index 00000000..fd1dbd70
--- /dev/null
+++ b/apps/angular-kits-doc/stories/ui-components/form-field/select/overview/color.stories.ts
@@ -0,0 +1,57 @@
+import { SelectComponent } from '@cocokits/angular-form-field';
+import { CCK_CONTROL, renderWithPageTab, renderWithThemeProp } from '@cocokits/storybook-addon-theme';
+import { StoryObj } from '@cocokits/storybook-addon-theme-angular';
+
+export const Color: StoryObj<SelectComponent> = {
+  name: 'Color',
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The color is adjustable to match the design language or emphasize the Select field in the form',
+      },
+    },
+    cckAddon: {
+      renderConditions: [renderWithThemeProp('color'), renderWithPageTab('Overview')],
+      singleControls: ['type'],
+      source: [
+        {
+          filename: 'example.component.html',
+          language: 'angular-html',
+          code: `
+            <% themeComponentConfig.color.values.map(color => { %>
+              <cck-form-field
+                <% if (typeof type !== 'undefined') { %> type='<%= type %>' <% } %>
+              >
+                <cck-label>Favorite food</cck-label>
+                <cck-select placeholder="Favorite food" color="<%= color %>">
+                  <cck-option value="Steak">Steak</cck-option>
+                  <cck-option value="Pizza">Pizza</cck-option>
+                  <cck-option value="Burger">Burger</cck-option>
+                </cck-select>
+              </cck-form-field>
+            <% }) %>
+          `,
+        },
+      ],
+      controls: [CCK_CONTROL.type()],
+    },
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      @for (color of cckControl.themeComponentConfig.color.values; let col = $index; track color) {
+        <cck-form-field>
+          <cck-label>Select - {{color}}</cck-label>
+          <cck-select placeholder="Favorite food" [color]="color" [type]="cckControl.type">
+            <cck-option value="Steak">Steak</cck-option>
+            <cck-option value="Pizza">Pizza</cck-option>
+            <cck-option value="Burger">Burger</cck-option>
+          </cck-select>
+        </cck-form-field>
+      }
+    `,
+  }),
+};
diff --git a/apps/angular-kits-doc/stories/ui-components/form-field/select/overview/default.stories.ts b/apps/angular-kits-doc/stories/ui-components/form-field/select/overview/default.stories.ts
index a643b599..ca97af7c 100644
--- a/apps/angular-kits-doc/stories/ui-components/form-field/select/overview/default.stories.ts
+++ b/apps/angular-kits-doc/stories/ui-components/form-field/select/overview/default.stories.ts
@@ -57,7 +57,7 @@ export const Default: StoryObj<SelectComponent> = {
       ...args,
     },
     template: `
-       <cck-form-field style="width: 100%">
+       <cck-form-field>
         @if(cckControl.label) {
           <cck-label>{{cckControl.label}}</cck-label>
         }
diff --git a/apps/angular-kits-doc/stories/ui-components/form-field/select/overview/option-group.stories.ts b/apps/angular-kits-doc/stories/ui-components/form-field/select/overview/option-group.stories.ts
index 01930a07..6a4d99f2 100644
--- a/apps/angular-kits-doc/stories/ui-components/form-field/select/overview/option-group.stories.ts
+++ b/apps/angular-kits-doc/stories/ui-components/form-field/select/overview/option-group.stories.ts
@@ -53,7 +53,7 @@ export const OptionGroup: StoryObj<SelectComponent> = {
       ...args,
     },
     template: `
-      <cck-form-field style="width: 100%">
+      <cck-form-field>
         <cck-label>Favorite Food</cck-label>
         <cck-select [multiple]="true" placeholder="Favorite Food">
           <cck-option-group label="Fast Foods">
diff --git a/apps/angular-kits-doc/stories/ui-components/form-field/select/overview/reactiveform.stories.ts b/apps/angular-kits-doc/stories/ui-components/form-field/select/overview/reactiveform.stories.ts
new file mode 100644
index 00000000..194ac11d
--- /dev/null
+++ b/apps/angular-kits-doc/stories/ui-components/form-field/select/overview/reactiveform.stories.ts
@@ -0,0 +1,65 @@
+import { moduleMetadata } from '@storybook/angular';
+import { ReactiveFormsModule, FormControl } from '@angular/forms';
+import { SelectComponent } from '@cocokits/angular-form-field';
+import { StoryObj } from '@cocokits/storybook-addon-theme-angular';
+import { CCK_CONTROL, renderWithPageTab, renderWithThemeProp } from '@cocokits/storybook-addon-theme';
+
+export const ReactiveForm: StoryObj<SelectComponent> = {
+  name: 'With ReactiveForms',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Integration with Angular Reactive Forms using FormControl',
+      },
+    },
+    cckAddon: {
+      renderConditions: [renderWithPageTab('Overview')],
+      singleControls: ['type'],
+      source: [
+        {
+          filename: 'example.component.html',
+          language: 'angular-html',
+          code: `
+            <cck-form-field>
+              <cck-label>Favorite food</cck-label>
+              <cck-select [formControl]="foodControl" placeholder="Pick one">
+                <cck-option value="Steak">Steak</cck-option>
+                <cck-option value="Pizza">Pizza</cck-option>
+                <cck-option value="Burger">Burger</cck-option>
+              </cck-select>
+            </cck-form-field>
+            
+            <p>Selected: {{ foodControl.value }}</p>
+          `,
+        },
+      ],
+      controls: [CCK_CONTROL.type()],
+    },
+  },
+  decorators: [
+    moduleMetadata({
+      imports: [ReactiveFormsModule],
+    }),
+  ],
+  render: (args) => {
+    const foodControl = new FormControl('Pizza');
+
+    return {
+      props: {
+        foodControl,
+        ...args,
+      },
+      template: `
+        <cck-form-field>
+            <cck-label>Favorite food</cck-label>
+            <cck-select placeholder="Pick one" [formControl]="foodControl" [type]="cckControl.type">
+                <cck-option value="Steak">Steak</cck-option>
+                <cck-option value="Pizza">Pizza</cck-option>
+                <cck-option value="Burger">Burger</cck-option>
+            </cck-select>
+        </cck-form-field>
+        <p>Selected: {{ foodControl.value }}</p>
+        `,
+    };
+  },
+};
\ No newline at end of file
diff --git a/apps/angular-kits-doc/stories/ui-components/form-field/select/overview/size.stories.ts b/apps/angular-kits-doc/stories/ui-components/form-field/select/overview/size.stories.ts
index 57d568f2..3f6a9728 100644
--- a/apps/angular-kits-doc/stories/ui-components/form-field/select/overview/size.stories.ts
+++ b/apps/angular-kits-doc/stories/ui-components/form-field/select/overview/size.stories.ts
@@ -21,7 +21,6 @@ export const Size: StoryObj<SelectComponent> = {
           code: `
             <% themeComponentConfig.size.values.map(size => { %>
 
-              <!-- <%= size %> -->
               <cck-form-field
                 size="<%= size %>"
                 <% if (typeof type !== 'undefined') { %> type='<%= type %>' <% } %>
@@ -46,9 +45,9 @@ export const Size: StoryObj<SelectComponent> = {
     },
     template: `
       @for (size of cckControl.themeComponentConfig.size.values; let col = $index; track size) {
-        <cck-form-field style="width: 100%">
+        <cck-form-field [size]="size">
           <cck-label>Select - {{size}}</cck-label>
-          <cck-select placeholder="Favorite food" [size]="size" [type]="cckControl.type">
+          <cck-select placeholder="Favorite food"  [type]="cckControl.type">
             <cck-option value="Steak">Steak</cck-option>
             <cck-option value="Pizza">Pizza</cck-option>
             <cck-option value="Burger">Burger</cck-option>
diff --git a/apps/angular-kits-doc/stories/ui-components/form-field/select/overview/type.stories.ts b/apps/angular-kits-doc/stories/ui-components/form-field/select/overview/type.stories.ts
new file mode 100644
index 00000000..a904e933
--- /dev/null
+++ b/apps/angular-kits-doc/stories/ui-components/form-field/select/overview/type.stories.ts
@@ -0,0 +1,58 @@
+import { SelectComponent } from '@cocokits/angular-form-field';
+import { CCK_CONTROL, renderWithPageTab, renderWithThemeProp } from '@cocokits/storybook-addon-theme';
+import { StoryObj } from '@cocokits/storybook-addon-theme-angular';
+
+export const Type: StoryObj<SelectComponent> = {
+  name: 'Type',
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The `type` property customizes the visual style of the select component, allowing for different appearances such as filled, outline, etc.',
+      },
+    },
+    cckAddon: {
+      renderConditions: [renderWithThemeProp('type'), renderWithPageTab('Overview')],
+      singleControls: ['size'],
+      source: [
+        {
+          filename: 'example.component.html',
+          language: 'angular-html',
+          code: `
+            <% themeComponentConfig.type.values.map(type => { %>
+                <cck-form-field
+                type="<%= type %>"
+                <% if (typeof size !== 'undefined') { %> size='<%= size %>' <% } %>
+              >
+                <cck-label>Favorite food</cck-label>
+                <cck-select placeholder="Favorite food">
+                  <cck-option value="Steak">Steak</cck-option>
+                  <cck-option value="Pizza">Pizza</cck-option>
+                  <cck-option value="Burger">Burger</cck-option>
+                </cck-select>
+              </cck-form-field>
+            <% }) %>
+          `,
+        },
+      ],
+      controls: [CCK_CONTROL.size()],
+    },
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      @for (type of cckControl.themeComponentConfig.type.values; track type) {
+        <cck-form-field [type]="type">
+          <cck-label>Select - {{type}}</cck-label>
+          <cck-select placeholder="Favorite food" [size]="cckControl.size">
+            <cck-option value="Steak">Steak</cck-option>
+            <cck-option value="Pizza">Pizza</cck-option>
+            <cck-option value="Burger">Burger</cck-option>
+          </cck-select>
+        </cck-form-field>
+      }
+    `,
+  }),
+};
\ No newline at end of file
diff --git a/apps/angular-kits-doc/stories/ui-components/form-field/select/overview/withngmodel.stories.ts b/apps/angular-kits-doc/stories/ui-components/form-field/select/overview/withngmodel.stories.ts
new file mode 100644
index 00000000..850be4a9
--- /dev/null
+++ b/apps/angular-kits-doc/stories/ui-components/form-field/select/overview/withngmodel.stories.ts
@@ -0,0 +1,68 @@
+import { moduleMetadata } from '@storybook/angular';
+import { FormsModule } from '@angular/forms';
+import { SelectComponent } from '@cocokits/angular-form-field';
+import { StoryObj } from '@cocokits/storybook-addon-theme-angular';
+import { CCK_CONTROL, renderWithPageTab, renderWithThemeProp } from '@cocokits/storybook-addon-theme';
+
+export const WithNgModel: StoryObj<SelectComponent> = {
+  name: 'With ngModel',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Use ngModel with the select component to enable two-way data binding.',
+      },
+    },
+    cckAddon: {
+      renderConditions: [renderWithPageTab('Overview')],
+      singleControls: ['type'],
+      controls: [CCK_CONTROL.type()],
+      source: [
+        {
+          filename: 'example.component.html',
+          language: 'angular-html',
+          code: `
+            <cck-form-field>
+              <cck-label>Select your food</cck-label>
+              <cck-select 
+                [(ngModel)]="selectedValue" 
+                placeholder="Tap to select food">
+                <cck-option value="Steak">Steak</cck-option>
+                <cck-option value="Pizza">Pizza</cck-option>
+                <cck-option value="Burger">Burger</cck-option>
+              </cck-select>
+            </cck-form-field>
+            
+            <p>
+             You selected: {{ selectedValue }}
+            </p>
+          `,
+        },
+      ],
+    },
+  },
+  decorators: [
+    moduleMetadata({
+      imports: [FormsModule],
+    }),
+  ],
+  render: () => ({
+    props: {
+      selectedValue: 'Pizza',
+    },
+    template: `
+      <cck-form-field>
+        <cck-label>Select your food</cck-label>
+        <cck-select 
+          [(ngModel)]="selectedValue" 
+          placeholder="Tap to select food">
+          <cck-option value="Steak">Steak</cck-option>
+          <cck-option value="Pizza">Pizza</cck-option>
+          <cck-option value="Burger">Burger</cck-option>
+        </cck-select>
+      </cck-form-field>
+      <p>
+              You selected: {{ selectedValue }}
+      </p>
+    `,
+  }),
+};
\ No newline at end of file
diff --git a/apps/react-kits-doc/stories/ui-components/form-field/select/index.stories.ts b/apps/react-kits-doc/stories/ui-components/form-field/select/index.stories.ts
index 1e83e473..74e2909b 100644
--- a/apps/react-kits-doc/stories/ui-components/form-field/select/index.stories.ts
+++ b/apps/react-kits-doc/stories/ui-components/form-field/select/index.stories.ts
@@ -6,7 +6,10 @@ import descriptionMd from './description.md?raw';
 export { Default } from './overview/default.stories';
 export { Options } from './overview/options.stories';
 export { CustomPreview } from './overview/custom-preview.stories';
-// export { Size } from './size.stories';
+export { Type } from './overview/type.stories';
+export { Size } from './overview/size.stories';
+export { Color } from './overview/color.stories';
+export { ErrorState } from './overview/error-state.stories';
 
 const meta: StoriesMeta<typeof Select> = {
   component: Select,
diff --git a/apps/react-kits-doc/stories/ui-components/form-field/select/overview/color.stories.tsx b/apps/react-kits-doc/stories/ui-components/form-field/select/overview/color.stories.tsx
new file mode 100644
index 00000000..69dbf585
--- /dev/null
+++ b/apps/react-kits-doc/stories/ui-components/form-field/select/overview/color.stories.tsx
@@ -0,0 +1,62 @@
+import { FormField, Label, Option, Select } from '@cocokits/react-form-field';
+import { CCK_CONTROL, renderWithPageTab, renderWithThemeProp } from '@cocokits/storybook-addon-theme';
+import { StoryObj } from '@cocokits/storybook-addon-theme-react';
+
+export const Color: StoryObj<typeof Select> = {
+  name: 'Color',
+  parameters: {
+    docs: {
+      description: {
+        story: 'The color is adjustable to match the design language or emphasize the Select field in the form',
+      },
+    },
+    cckAddon: {
+      renderConditions: [renderWithThemeProp('color'), renderWithPageTab('Overview')],
+      singleControls: ['type'],
+      source: [
+        {
+          filename: 'Source Code',
+          language: 'tsx',
+          code: `
+            import { FormField, Label, Option, Select } from "@cocokits/react-components";
+            export const MyComponent = () => {
+              return (
+                <>
+                  <% themeComponentConfig.color.values.map(color => { %>
+                    <FormField>
+                      <Label>Color: <%= color %></Label>
+                      <Select
+                        color="<%= color %>"
+                        <% if (typeof type !== 'undefined') { %> type='<%= type %>' <% } %>
+                      >
+                        <Option value="Steak">Steak</Option>
+                        <Option value="Pizza">Pizza</Option>
+                        <Option value="Burger">Burger</Option>
+                      </Select>
+                    </FormField>
+                  <% }) %>
+                </>
+              );
+            }
+          `,
+        },
+      ],
+      controls: [CCK_CONTROL.type()],
+    },
+  },
+
+  render: (args) => (
+    <>
+      {args.cckControl.themeComponentConfig.color?.values.map((color, index) => (
+        <FormField key={index}>
+          <Label>Color: {color}</Label>
+          <Select placeholder="..." color={color}>
+            <Option value="Steak">Steak</Option>
+            <Option value="Pizza">Pizza</Option>
+            <Option value="Burger">Burger</Option>
+          </Select>
+        </FormField>
+      ))}
+    </>
+  ),
+};
diff --git a/apps/react-kits-doc/stories/ui-components/form-field/select/overview/default.stories.tsx b/apps/react-kits-doc/stories/ui-components/form-field/select/overview/default.stories.tsx
index af0e3e0f..f2ab3b24 100644
--- a/apps/react-kits-doc/stories/ui-components/form-field/select/overview/default.stories.tsx
+++ b/apps/react-kits-doc/stories/ui-components/form-field/select/overview/default.stories.tsx
@@ -70,7 +70,7 @@ export const Default: StoryObj<typeof Select> = {
     },
   },
   render: (args) => (
-    <FormField style={{ minWidth: '200px' }}>
+    <FormField>
       {args.cckControl.label && <Label>{args.cckControl.label}</Label>}
       <Select
         {...reactThemeArgsToTemplate(args)}
diff --git a/apps/react-kits-doc/stories/ui-components/form-field/select/overview/error-state.stories.tsx b/apps/react-kits-doc/stories/ui-components/form-field/select/overview/error-state.stories.tsx
new file mode 100644
index 00000000..1bac485e
--- /dev/null
+++ b/apps/react-kits-doc/stories/ui-components/form-field/select/overview/error-state.stories.tsx
@@ -0,0 +1,53 @@
+import { FormField, Label, Option, Select } from '@cocokits/react-form-field';
+import { renderWithPageTab } from '@cocokits/storybook-addon-theme';
+import { StoryObj } from '@cocokits/storybook-addon-theme-react';
+
+export const ErrorState: StoryObj<typeof Select> = {
+  name: 'ErrorState',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstrates the Select component in an error state, showing a validation message.',
+      },
+    },
+    cckAddon: {
+      renderConditions: [renderWithPageTab('Overview')],
+      hasControl: false,
+      source: [
+        {
+          filename: 'Source Code',
+          language: 'tsx',
+          code: `
+            import { FormField, Label, Option, Select } from "@cocokits/react-components";
+                export const MyComponent = () => {
+                    return (
+                        <FormField>
+                        <Label>Choose Your Favorite Food</Label>
+                        <Select
+                            placeholder="..."
+                            required
+                            invalid
+                            >
+                            <Option value="Steak">Steak</Option>
+                            <Option value="Pizza">Pizza</Option>
+                            <Option value="Burger">Burger</Option>
+                        </Select>
+                        </FormField>
+                    );
+            };
+          `,
+        },
+      ],
+    },
+  },
+  render: () => (
+    <FormField style={{ minWidth: '250px' }}>
+      <Label>Choose Your Favorite Food</Label>
+      <Select placeholder="..." required invalid>
+        <Option value="Steak">Steak</Option>
+        <Option value="Pizza">Pizza</Option>
+        <Option value="Burger">Burger</Option>
+      </Select>
+    </FormField>
+  ),
+};
diff --git a/apps/react-kits-doc/stories/ui-components/form-field/select/overview/size.stories.tsx b/apps/react-kits-doc/stories/ui-components/form-field/select/overview/size.stories.tsx
new file mode 100644
index 00000000..79c05494
--- /dev/null
+++ b/apps/react-kits-doc/stories/ui-components/form-field/select/overview/size.stories.tsx
@@ -0,0 +1,62 @@
+import { FormField, Label, Option, Select } from '@cocokits/react-form-field';
+import { CCK_CONTROL, renderWithPageTab, renderWithThemeProp } from '@cocokits/storybook-addon-theme';
+import { StoryObj } from '@cocokits/storybook-addon-theme-react';
+
+export const Size: StoryObj<typeof Select> = {
+  name: 'Size',
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The size is adjustable to suit different design needs and screen dimensions, improving both aesthetics and usability.',
+      },
+    },
+    cckAddon: {
+      renderConditions: [renderWithThemeProp('size'), renderWithPageTab('Overview')],
+      singleControls: ['type'],
+      source: [
+        {
+          filename: 'Source Code',
+          language: 'tsx',
+          code: `
+            import { FormField, Label, Option, Select } from "@cocokits/react-components";
+            export const MyComponent = () => {
+              return (
+                <>
+                  <% themeComponentConfig.size.values.map(size => { %>
+                    <FormField>
+                      <Label>Select - <%= size %></Label>
+                      <Select
+                        size="<%= size %>"
+                        <% if (typeof type !== 'undefined') { %> type="<%= type %>" <% } %>
+                      >
+                        <Option value="Small">Small</Option>
+                        <Option value="Medium">Medium</Option>
+                        <Option value="Large">Large</Option>
+                      </Select>
+                    </FormField>
+                  <% }) %>
+                </>
+              );
+            }
+          `,
+        },
+      ],
+      controls: [CCK_CONTROL.type()],
+    },
+  },
+  render: (args) => (
+    <>
+      {args.cckControl.themeComponentConfig.size?.values.map((size, index) => (
+        <FormField key={index}>
+          <Label>Select - {size}</Label>
+          <Select placeholder="..." size={size}>
+            <Option value="Small">Small</Option>
+            <Option value="Medium">Medium</Option>
+            <Option value="Large">Large</Option>
+          </Select>
+        </FormField>
+      ))}
+    </>
+  ),
+};
diff --git a/apps/react-kits-doc/stories/ui-components/form-field/select/overview/type.stories.tsx b/apps/react-kits-doc/stories/ui-components/form-field/select/overview/type.stories.tsx
new file mode 100644
index 00000000..550ac954
--- /dev/null
+++ b/apps/react-kits-doc/stories/ui-components/form-field/select/overview/type.stories.tsx
@@ -0,0 +1,58 @@
+import { FormField, Label, Option, Select } from '@cocokits/react-form-field';
+import { renderWithPageTab, renderWithThemeProp } from '@cocokits/storybook-addon-theme';
+import { StoryObj } from '@cocokits/storybook-addon-theme-react';
+
+export const Type: StoryObj<typeof Select> = {
+  name: 'Type',
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The type prop adjusts the visual style of the Select component, allowing for different UI purposes like default, secondary, or ghost.',
+      },
+    },
+    cckAddon: {
+      renderConditions: [renderWithThemeProp('type'), renderWithPageTab('Overview')],
+      source: [
+        {
+          filename: 'Source Code',
+          language: 'tsx',
+          code: `
+            import { FormField, Label, Option, Select } from "@cocokits/react-components";
+    
+            export const MyComponent = () => {
+              return (
+                <>
+                  <% themeComponentConfig.type.values.map(type => { %>
+                    <FormField>
+                      <Label>Select - <%= type %></Label>
+                      <Select type="<%= type %>">
+                        <Option value="default">default</Option>
+                        <Option value="secondary">secondary</Option>
+                        <Option value="ghost">ghost</Option>
+                      </Select>
+                    </FormField>
+                  <% }) %>
+                </>
+              );
+            }
+          `,
+        },
+      ],
+    },
+  },
+  render: (args) => (
+    <>
+      {args.cckControl.themeComponentConfig.type?.values.map((type, index) => (
+        <FormField key={index}>
+          <Label>Select - {type}</Label>
+          <Select placeholder="..." type={type}>
+            <Option value="default">default</Option>
+            <Option value="secondary">secondary</Option>
+            <Option value="ghost">ghost</Option>
+          </Select>
+        </FormField>
+      ))}
+    </>
+  ),
+};