diff --git a/src/forms/NewFormikNumberField.stories.tsx b/src/forms/NewFormikNumberField.stories.tsx
index 6729c17..c31a85b 100644
--- a/src/forms/NewFormikNumberField.stories.tsx
+++ b/src/forms/NewFormikNumberField.stories.tsx
@@ -25,7 +25,7 @@ export const Default = () => (
                 name="name"
                 label="Label"
                 tooltip="Tooltip for this input"
-                className={{ root: 'mb-1' }}
+                className={{ root: 'mb-1 w-80' }}
                 placeholder="Placeholder"
               />
               <Button type="submit">Submit</Button>
diff --git a/src/forms/NewFormikNumberField.tsx b/src/forms/NewFormikNumberField.tsx
index 718d5a3..f6666bc 100644
--- a/src/forms/NewFormikNumberField.tsx
+++ b/src/forms/NewFormikNumberField.tsx
@@ -87,7 +87,7 @@ export function FormikNumberField({
 
   if (name) {
     return (
-      <div className={twMerge('w-80', className?.root)}>
+      <div className={twMerge('w-full', className?.root)}>
         <NumberField
           id={id}
           value={field.value}
@@ -117,7 +117,7 @@ export function FormikNumberField({
   }
 
   return (
-    <div className={twMerge('w-80', className?.root)}>
+    <div className={twMerge('w-full', className?.root)}>
       <NumberField
         id={id}
         value={value!}
diff --git a/src/forms/NewFormikTextField.stories.tsx b/src/forms/NewFormikTextField.stories.tsx
index efcf95f..af7b41e 100644
--- a/src/forms/NewFormikTextField.stories.tsx
+++ b/src/forms/NewFormikTextField.stories.tsx
@@ -26,7 +26,7 @@ export const Default = () => (
                 name="name"
                 label="Label"
                 tooltip="Tooltip for this input"
-                className={{ root: 'mb-1' }}
+                className={{ root: 'mb-1 w-80' }}
                 placeholder="Placeholder"
               />
               <Button type="submit">Submit</Button>
diff --git a/src/forms/NewFormikTextField.tsx b/src/forms/NewFormikTextField.tsx
index cc22341..7011f88 100644
--- a/src/forms/NewFormikTextField.tsx
+++ b/src/forms/NewFormikTextField.tsx
@@ -91,7 +91,7 @@ export function FormikTextField({
 
   if (name) {
     return (
-      <div className={twMerge('w-80', className?.root)}>
+      <div className={twMerge('w-full', className?.root)}>
         <TextField
           id={id}
           data={data}
@@ -115,7 +115,7 @@ export function FormikTextField({
     )
   } else {
     return (
-      <div className={twMerge('w-80', className?.root)}>
+      <div className={twMerge('w-full', className?.root)}>
         <TextField
           id={id}
           data={data}
diff --git a/src/forms/NewFormikTextareaField.stories.tsx b/src/forms/NewFormikTextareaField.stories.tsx
index 1725127..f240c31 100644
--- a/src/forms/NewFormikTextareaField.stories.tsx
+++ b/src/forms/NewFormikTextareaField.stories.tsx
@@ -25,7 +25,7 @@ export const Default = () => (
                 name="name"
                 label="Label"
                 tooltip="Tooltip for this input"
-                className={{ root: 'mb-1' }}
+                className={{ root: 'mb-1 w-96' }}
                 placeholder="Placeholder"
               />
               <Button type="submit">Submit</Button>
diff --git a/src/forms/NumberField.stories.tsx b/src/forms/NumberField.stories.tsx
index 0ee0e22..3daac25 100644
--- a/src/forms/NumberField.stories.tsx
+++ b/src/forms/NumberField.stories.tsx
@@ -10,7 +10,11 @@ export function Default() {
         precision (negative and positive) and its value is maintained as a
         string.
       </div>
-      <NumberField value={value} onChange={(newValue) => setValue(newValue)} />
+      <NumberField
+        value={value}
+        onChange={(newValue) => setValue(newValue)}
+        className={{ field: 'w-80' }}
+      />
       <div>Value: {value}</div>
     </div>
   )
diff --git a/src/forms/NumberField.tsx b/src/forms/NumberField.tsx
index 2119812..d9ecc98 100644
--- a/src/forms/NumberField.tsx
+++ b/src/forms/NumberField.tsx
@@ -116,7 +116,7 @@ export function NumberField({
         />
       )}
 
-      <div className="flex flex-row items-center gap-2">
+      <div className="flex w-full flex-row items-center gap-2">
         <input
           id={id}
           data-cy={data?.cy}
diff --git a/src/forms/TextField.stories.tsx b/src/forms/TextField.stories.tsx
index 1cf4dbb..a89622b 100644
--- a/src/forms/TextField.stories.tsx
+++ b/src/forms/TextField.stories.tsx
@@ -11,7 +11,9 @@ export const Default = () => {
       <TextField
         label="Label"
         tooltip="Tooltip for this input"
-        className={{ field: 'mb-1' }}
+        className={{
+          field: 'mb-1 w-80',
+        }}
         placeholder="Placeholder"
         value={value}
         onChange={setValue}
diff --git a/src/forms/TextField.tsx b/src/forms/TextField.tsx
index 4c5d401..4387e16 100644
--- a/src/forms/TextField.tsx
+++ b/src/forms/TextField.tsx
@@ -124,8 +124,8 @@ export function TextField({
         />
       )}
 
-      <div className="flex flex-row items-center gap-2">
-        <div className="relative">
+      <div className="flex w-full flex-row items-center gap-2">
+        <div className="relative w-full">
           {name && field ? (
             <input
               {...field}
diff --git a/src/forms/TextareaField.stories.tsx b/src/forms/TextareaField.stories.tsx
index 641e918..de4c959 100644
--- a/src/forms/TextareaField.stories.tsx
+++ b/src/forms/TextareaField.stories.tsx
@@ -14,6 +14,7 @@ export const Default = () => {
         placeholder="Placeholder"
         value={value}
         onChange={setValue}
+        className={{ root: 'w-[30rem]' }}
       />
     </div>
   )
diff --git a/src/forms/TextareaField.tsx b/src/forms/TextareaField.tsx
index 52ca247..245f07e 100644
--- a/src/forms/TextareaField.tsx
+++ b/src/forms/TextareaField.tsx
@@ -74,7 +74,6 @@ export interface TextareaFieldOnChangeProps extends TextareaFieldProps {
  * @param className - The optional className object allows you to override the default styling.
  * @returns Text field component with optional label, tooltip, error message and icon.
  */
-
 export function TextareaField({
   id,
   data,
@@ -98,7 +97,7 @@ export function TextareaField({
   ...props
 }: TextareaFieldNameProps | TextareaFieldOnChangeProps) {
   return (
-    <div className={twMerge('flex flex-col', className?.root)}>
+    <div className={twMerge('flex w-full flex-col', className?.root)}>
       <div
         className={twMerge(
           'flex w-full flex-row',