diff --git a/packages/web-react/src/components/TextField/demo/TextField.tsx b/packages/web-react/src/components/TextField/demo/TextField.tsx
deleted file mode 100644
index 3d6c8e6970..0000000000
--- a/packages/web-react/src/components/TextField/demo/TextField.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-// Because there is no `dist` directory during the CI run
-/* eslint-disable import/no-extraneous-dependencies, import/extensions, import/no-unresolved */
-import React from 'react';
-import { ComponentStory } from '@storybook/react';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore: No declaration file
-import { SpiritTextFieldProps } from '../../../types';
-import TextField from '../TextField';
-
-const Story: ComponentStory<typeof TextField> = (args: SpiritTextFieldProps) => <TextField {...args} />;
-
-Story.args = {
-  id: 'textfield-example',
-};
-
-export default Story;
diff --git a/packages/web-react/src/components/TextField/demo/TextFieldDefault.tsx b/packages/web-react/src/components/TextField/demo/TextFieldDefault.tsx
new file mode 100644
index 0000000000..0dec683971
--- /dev/null
+++ b/packages/web-react/src/components/TextField/demo/TextFieldDefault.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import TextField from '../TextField';
+
+const TextFieldDefault = () => (
+  <>
+    <TextField id="textfieldDefault" label="Label" name="textfieldDefault" placeholder="Placeholder" />
+
+    <TextField id="textfieldFilled" label="Label" name="textfieldFilled" placeholder="Placeholder" value="Filled" />
+
+    <TextField
+      id="textfieldPassword"
+      label="Label"
+      name="textfieldPassword"
+      placeholder="Placeholder"
+      value="Filled"
+      type="password"
+    />
+  </>
+);
+
+export default TextFieldDefault;
diff --git a/packages/web-react/src/components/TextField/demo/TextFieldDisabled.tsx b/packages/web-react/src/components/TextField/demo/TextFieldDisabled.tsx
index de04aefa4a..4edcc1916e 100644
--- a/packages/web-react/src/components/TextField/demo/TextFieldDisabled.tsx
+++ b/packages/web-react/src/components/TextField/demo/TextFieldDisabled.tsx
@@ -1,19 +1,20 @@
 import React from 'react';
 import TextField from '../TextField';
 
-// @see: https://github.com/storybookjs/storybook/issues/8104#issuecomment-932310244
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Story = (props: unknown) => (
-  <div style={{ display: 'flex', flexWrap: 'wrap', gap: '1.5rem 1rem' }}>
-    <TextField id="textfield-disabled" label="Disabled" name="textfield-disabled" isDisabled />
+const TextFieldDisabled = () => (
+  <>
+    <TextField id="textfieldDisabled" label="Label" name="textfieldDisabled" placeholder="Placeholder" isDisabled />
+
     <TextField
-      id="textfield-disabled-filled"
-      label="Disabled filled"
-      name="textfield-disabled-filled"
-      value="TextField value"
+      id="textfieldDisabledFilled"
+      label="Label"
+      name="textfieldDisabledFilled"
+      placeholder="Placeholder"
+      value="Filled"
       isDisabled
+      isRequired
     />
-  </div>
+  </>
 );
 
-export default Story;
+export default TextFieldDisabled;
diff --git a/packages/web-react/src/components/TextField/demo/TextFieldFluid.tsx b/packages/web-react/src/components/TextField/demo/TextFieldFluid.tsx
index d7133bcb75..473ffdd5d3 100644
--- a/packages/web-react/src/components/TextField/demo/TextFieldFluid.tsx
+++ b/packages/web-react/src/components/TextField/demo/TextFieldFluid.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import TextField from '../TextField';
 
-// @see: https://github.com/storybookjs/storybook/issues/8104#issuecomment-932310244
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Story = (props: unknown) => <TextField id="textfield-fluid" label="Fluid" name="textfield-fluid" isFluid />;
+const TextFieldFluid = () => (
+  <TextField id="textfieldFluid" isFluid label="Label" name="textfieldFluid" placeholder="Placeholder" value="Filled" />
+);
 
-export default Story;
+export default TextFieldFluid;
diff --git a/packages/web-react/src/components/TextField/demo/TextFieldHelperText.tsx b/packages/web-react/src/components/TextField/demo/TextFieldHelperText.tsx
index 9f1b5bacd7..74467481fb 100644
--- a/packages/web-react/src/components/TextField/demo/TextFieldHelperText.tsx
+++ b/packages/web-react/src/components/TextField/demo/TextFieldHelperText.tsx
@@ -1,18 +1,14 @@
-// Because there is no `dist` directory during the CI run
-/* eslint-disable import/no-extraneous-dependencies, import/extensions, import/no-unresolved */
 import React from 'react';
-import { ComponentStory } from '@storybook/react';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore: No declaration file
-import { SpiritTextFieldProps } from '../../../types';
 import TextField from '../TextField';
 
-const Story: ComponentStory<typeof TextField> = (args: SpiritTextFieldProps) => <TextField {...args} />;
+const TextFieldHelperText = () => (
+  <TextField
+    helperText="Helper text"
+    id="textfieldHelperText"
+    label="Label"
+    name="textfieldHelperText"
+    placeholder="Placeholder"
+  />
+);
 
-Story.args = {
-  id: 'textfield-helper-text-example',
-  label: 'Label with helper text',
-  helperText: 'Custom helper text',
-};
-
-export default Story;
+export default TextFieldHelperText;
diff --git a/packages/web-react/src/components/TextField/demo/TextFieldHiddenLabel.tsx b/packages/web-react/src/components/TextField/demo/TextFieldHiddenLabel.tsx
new file mode 100644
index 0000000000..cd86358452
--- /dev/null
+++ b/packages/web-react/src/components/TextField/demo/TextFieldHiddenLabel.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import TextField from '../TextField';
+
+const TextFieldHiddenLabel = () => (
+  <TextField
+    id="textfieldHiddenLabel"
+    label="Label"
+    name="textfieldHiddenLabel"
+    placeholder="Placeholder"
+    isLabelHidden
+  />
+);
+
+export default TextFieldHiddenLabel;
diff --git a/packages/web-react/src/components/TextField/demo/TextFieldInline.tsx b/packages/web-react/src/components/TextField/demo/TextFieldInline.tsx
new file mode 100644
index 0000000000..a26671d985
--- /dev/null
+++ b/packages/web-react/src/components/TextField/demo/TextFieldInline.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { Button } from '../../Button';
+import TextField from '../TextField';
+
+const TextFieldInline = () => (
+  <>
+    <div style={{ display: 'flex', gap: '1rem', alignItems: 'flex-start', maxWidth: '320px' }}>
+      <TextField
+        id="textfieldInline"
+        isLabelHidden
+        label="Hidden Label"
+        name="textfieldInline"
+        placeholder="Placeholder"
+        value="Filled"
+      />
+      <Button>Button</Button>
+    </div>
+
+    <div style={{ display: 'flex', gap: '1rem', alignItems: 'flex-start', maxWidth: '320px' }}>
+      <TextField
+        id="textfieldInlineFirst"
+        isLabelHidden
+        label="Hidden Label"
+        name="textfieldInlineFirst"
+        placeholder="Placeholder"
+        value="Filled"
+      />
+      <TextField
+        id="textfieldInlinePassword"
+        isLabelHidden
+        label="Hidden Label"
+        hasPasswordToggle
+        name="textfieldInlinePassword"
+        validationState="danger"
+        validationText="Too short"
+        placeholder="Placeholder"
+        value="1234"
+      />
+      <Button>Button</Button>
+    </div>
+  </>
+);
+
+export default TextFieldInline;
diff --git a/packages/web-react/src/components/TextField/demo/TextFieldInputWidth.tsx b/packages/web-react/src/components/TextField/demo/TextFieldInputWidth.tsx
index 649f63ebdb..ffd72e64e7 100644
--- a/packages/web-react/src/components/TextField/demo/TextFieldInputWidth.tsx
+++ b/packages/web-react/src/components/TextField/demo/TextFieldInputWidth.tsx
@@ -1,10 +1,15 @@
 import React from 'react';
 import TextField from '../TextField';
 
-// @see: https://github.com/storybookjs/storybook/issues/8104#issuecomment-932310244
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Story = (props: unknown) => (
-  <TextField id="textfield-with-input-width" label="Width 10 em" name="textfield-with-size" inputWidth={10} />
+const TextFieldInputWidth = () => (
+  <TextField
+    id="textfieldSize"
+    isFluid
+    label="4000 (in Roman numerals)"
+    name="textfieldSize"
+    placeholder="Placeholder"
+    inputWidth={4}
+  />
 );
 
-export default Story;
+export default TextFieldInputWidth;
diff --git a/packages/web-react/src/components/TextField/demo/TextFieldLabelHidden.tsx b/packages/web-react/src/components/TextField/demo/TextFieldLabelHidden.tsx
deleted file mode 100644
index e83c5370d6..0000000000
--- a/packages/web-react/src/components/TextField/demo/TextFieldLabelHidden.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-import TextField from '../TextField';
-
-// @see: https://github.com/storybookjs/storybook/issues/8104#issuecomment-932310244
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Story = (props: unknown) => (
-  <TextField id="textfield-label-hidden" label="Hidden label" name="textfield-label-hidden" isLabelHidden />
-);
-
-export default Story;
diff --git a/packages/web-react/src/components/TextField/demo/TextFieldPasswordToggle.tsx b/packages/web-react/src/components/TextField/demo/TextFieldPasswordToggle.tsx
index 72d75974ec..6be5b714c2 100644
--- a/packages/web-react/src/components/TextField/demo/TextFieldPasswordToggle.tsx
+++ b/packages/web-react/src/components/TextField/demo/TextFieldPasswordToggle.tsx
@@ -1,15 +1,25 @@
 import React from 'react';
 import TextField from '../TextField';
 
-// @see: https://github.com/storybookjs/storybook/issues/8104#issuecomment-932310244
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Story = (props: unknown) => (
-  <TextField
-    id="textfield-password-toggle"
-    label="Password toggle"
-    name="textfield-password-toggle"
-    hasPasswordToggle
-  />
+const TextFieldPasswordToggle = () => (
+  <>
+    <TextField
+      id="textfieldPasswordToggle"
+      label="Password Toggle"
+      hasPasswordToggle
+      name="textfieldPasswordToggle"
+      placeholder="Password must be at least 6 characters long"
+    />
+
+    <TextField
+      id="textfieldPasswordToggleDisabled"
+      label="Password Toggle"
+      hasPasswordToggle
+      isDisabled
+      name="textfieldPasswordToggleDisabled"
+      placeholder="Password must be at least 6 characters long"
+    />
+  </>
 );
 
-export default Story;
+export default TextFieldPasswordToggle;
diff --git a/packages/web-react/src/components/TextField/demo/TextFieldRequired.tsx b/packages/web-react/src/components/TextField/demo/TextFieldRequired.tsx
index b5be91612e..cb8855bf69 100644
--- a/packages/web-react/src/components/TextField/demo/TextFieldRequired.tsx
+++ b/packages/web-react/src/components/TextField/demo/TextFieldRequired.tsx
@@ -1,10 +1,8 @@
 import React from 'react';
 import TextField from '../TextField';
 
-// @see: https://github.com/storybookjs/storybook/issues/8104#issuecomment-932310244
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Story = (props: unknown) => (
-  <TextField id="textfield-required" label="Required" name="textfield-required" isRequired />
+const TextFieldRequired = () => (
+  <TextField id="textfieldRequired" label="Label" name="textfieldRequired" placeholder="Placeholder" isRequired />
 );
 
-export default Story;
+export default TextFieldRequired;
diff --git a/packages/web-react/src/components/TextField/demo/TextFieldType.tsx b/packages/web-react/src/components/TextField/demo/TextFieldType.tsx
deleted file mode 100644
index c46e7dca52..0000000000
--- a/packages/web-react/src/components/TextField/demo/TextFieldType.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import TextField from '../TextField';
-
-// @see: https://github.com/storybookjs/storybook/issues/8104#issuecomment-932310244
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Story = (props: unknown) => (
-  <div style={{ display: 'flex', flexWrap: 'wrap', gap: '1.5rem 1rem' }}>
-    <TextField id="textfield-email" label="Type email" name="textfield-email" type="email" />
-    <TextField id="textfield-number" label="Type number" name="textfield-number" type="number" />
-    <TextField id="textfield-password" label="Type password" name="textfield-password" type="password" />
-    <TextField id="textfield-search" label="Type search" name="textfield-search" type="search" />
-    <TextField id="textfield-tel" label="Type tel" name="textfield-tel" type="tel" />
-    <TextField id="textfield-text" label="Type text" name="textfield-text" type="text" />
-    <TextField id="textfield-url" label="Type url" name="textfield-url" type="url" />
-  </div>
-);
-
-export default Story;
diff --git a/packages/web-react/src/components/TextField/demo/TextFieldValidation.tsx b/packages/web-react/src/components/TextField/demo/TextFieldValidation.tsx
new file mode 100644
index 0000000000..4e6c68e95e
--- /dev/null
+++ b/packages/web-react/src/components/TextField/demo/TextFieldValidation.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import TextField from '../TextField';
+
+const TextFieldValidation = () => (
+  <>
+    <TextField
+      id="textfieldSuccess"
+      label="Label"
+      name="textfieldSuccess"
+      placeholder="Placeholder"
+      validationState="success"
+      value="Filled"
+    />
+
+    <TextField
+      id="textfieldWarning"
+      label="Label"
+      validationText="Validation text"
+      name="textfieldWarning"
+      placeholder="Placeholder"
+      validationState="warning"
+      value="Filled"
+    />
+
+    <TextField
+      id="textfieldDanger"
+      label="Label"
+      validationText={['Validation text', 'Second validation text']}
+      name="textfieldDanger"
+      placeholder="Placeholder"
+      validationState="danger"
+      value="Filled"
+    />
+
+    <TextField
+      id="textfieldDangerHelper"
+      isRequired
+      label="Label"
+      helperText="This is helper text"
+      validationText="Danger validation text"
+      validationState="danger"
+      name="textfieldDangerHelper"
+      placeholder="Placeholder"
+      value="Filled"
+    />
+  </>
+);
+
+export default TextFieldValidation;
diff --git a/packages/web-react/src/components/TextField/demo/TextFieldValidationState.tsx b/packages/web-react/src/components/TextField/demo/TextFieldValidationState.tsx
deleted file mode 100644
index 770c8ffd6a..0000000000
--- a/packages/web-react/src/components/TextField/demo/TextFieldValidationState.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react';
-import TextField from '../TextField';
-
-// @see: https://github.com/storybookjs/storybook/issues/8104#issuecomment-932310244
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Story = (props: unknown) => (
-  <div style={{ display: 'flex', flexWrap: 'wrap', gap: '1.5rem 1rem' }}>
-    <TextField
-      id="textfield-success"
-      label="Validation success"
-      name="textfield-success"
-      validationState="success"
-      validationText="Validation text"
-    />
-    <TextField
-      id="textfield-warning"
-      label="Validation warning"
-      name="textfield-warning"
-      validationState="warning"
-      validationText="Validation text"
-    />
-    <TextField
-      id="textfield-danger"
-      label="Validation danger"
-      name="textfield-danger"
-      validationState="danger"
-      validationText={['Validation text', 'Second validation text']}
-    />
-  </div>
-);
-
-export default Story;
diff --git a/packages/web-react/src/components/TextField/demo/index.tsx b/packages/web-react/src/components/TextField/demo/index.tsx
index d6734753c9..9b2d66e158 100644
--- a/packages/web-react/src/components/TextField/demo/index.tsx
+++ b/packages/web-react/src/components/TextField/demo/index.tsx
@@ -5,52 +5,52 @@ import ReactDOM from 'react-dom/client';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment, import/extensions, import/no-unresolved
 // @ts-ignore: No declaration file
 import icons from '@lmc-eu/spirit-icons/dist/icons';
-import { IconsProvider } from '../../../context';
 import DocsSection from '../../../../docs/DocsSections';
-import TextField from './TextField';
+import { IconsProvider } from '../../../context';
+import TextFieldDefault from './TextFieldDefault';
+import TextFieldRequired from './TextFieldRequired';
+import TextFieldHiddenLabel from './TextFieldHiddenLabel';
+import TextFieldHelperText from './TextFieldHelperText';
 import TextFieldDisabled from './TextFieldDisabled';
+import TextFieldValidation from './TextFieldValidation';
 import TextFieldFluid from './TextFieldFluid';
 import TextFieldInputWidth from './TextFieldInputWidth';
-import TextFieldLabelHidden from './TextFieldLabelHidden';
+import TextFieldInline from './TextFieldInline';
 import TextFieldPasswordToggle from './TextFieldPasswordToggle';
-import TextFieldLabelRequired from './TextFieldRequired';
-import TextFieldType from './TextFieldType';
-import TextFieldValidationState from './TextFieldValidationState';
-import TextFieldHelperText from './TextFieldHelperText';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <IconsProvider value={icons}>
       <DocsSection title="Default">
-        <TextField {...TextField.args} />
+        <TextFieldDefault />
+      </DocsSection>
+      <DocsSection title="Required">
+        <TextFieldRequired />
+      </DocsSection>
+      <DocsSection title="Hidden Label">
+        <TextFieldHiddenLabel />
+      </DocsSection>
+      <DocsSection title="Helper Text">
+        <TextFieldHelperText />
       </DocsSection>
       <DocsSection title="Disabled">
         <TextFieldDisabled />
       </DocsSection>
+      <DocsSection title="Validation State with Validation Text">
+        <TextFieldValidation />
+      </DocsSection>
       <DocsSection title="Fluid">
         <TextFieldFluid />
       </DocsSection>
-      <DocsSection title="Input Width">
+      <DocsSection title="Size">
         <TextFieldInputWidth />
       </DocsSection>
-      <DocsSection title="Label Hidden">
-        <TextFieldLabelHidden />
+      <DocsSection title="Inline">
+        <TextFieldInline />
       </DocsSection>
       <DocsSection title="Password Toggle">
         <TextFieldPasswordToggle />
       </DocsSection>
-      <DocsSection title="Required">
-        <TextFieldLabelRequired />
-      </DocsSection>
-      <DocsSection title="Field Type">
-        <TextFieldType />
-      </DocsSection>
-      <DocsSection title="Validation State">
-        <TextFieldValidationState />
-      </DocsSection>
-      <DocsSection title="Helper Text">
-        <TextFieldHelperText {...TextFieldHelperText.args} />
-      </DocsSection>
     </IconsProvider>
   </React.StrictMode>,
 );