diff --git a/src/components/NumberFormat/PercentFormatField.stories.tsx b/src/components/NumberFormat/PercentFormatField.stories.tsx
index a352e3e3..ac615f9b 100644
--- a/src/components/NumberFormat/PercentFormatField.stories.tsx
+++ b/src/components/NumberFormat/PercentFormatField.stories.tsx
@@ -1,59 +1,84 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryObj, Meta } from '@storybook/react';
 
 import { PercentFormatField } from './UnitNumberFormatField';
+import { Apple, HelpCircle, TrendingUp } from '@lifeomic/chromicons';
 
-export default {
+const meta: Meta<typeof PercentFormatField> = {
   title: 'Form Components/NumberFormat/PercentFormatField',
   component: PercentFormatField,
+  args: {
+    label: 'Percent Format Field',
+    value: 50,
+  },
   argTypes: {
     color: {
       control: 'radio',
       options: ['default', 'inverse'],
     },
   },
-} as ComponentMeta<typeof PercentFormatField>;
+};
+export default meta;
+type Story = StoryObj<typeof PercentFormatField>;
 
-const Template: ComponentStory<typeof PercentFormatField> = (args) => (
-  <PercentFormatField {...args} />
-);
+export const Default: Story = {};
 
-export const Default = Template.bind({});
-Default.args = {
-  label: 'Percent Format Field',
-  value: 50,
+export const Min: Story = {
+  args: {
+    min: 20,
+  },
 };
 
-export const Min = Template.bind({});
-Min.args = {
-  label: 'Percent Format Field',
-  value: 50,
-  min: 20,
+export const Max: Story = {
+  args: {
+    max: 70,
+  },
 };
 
-export const Max = Template.bind({});
-Max.args = {
-  label: 'Percent Format Field',
-  value: 50,
-  max: 70,
+export const Adornments: Story = {
+  args: {
+    startAdornment: <Apple />,
+    endAdornment: <TrendingUp />,
+  },
 };
 
-export const InverseDark = Template.bind({});
-InverseDark.parameters = {
-  backgrounds: { default: 'dark' },
+export const TooltipMessage: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Icon and Tooltip Message must be used at the same time for either of them to render.',
+      },
+    },
+  },
+  args: {
+    icon: HelpCircle,
+    tooltipMessage: 'Tooltip Message',
+  },
 };
-InverseDark.args = {
-  label: 'Percent Format Field',
-  value: 50,
-  color: 'inverse',
+
+export const RequiredAndError: Story = {
+  args: {
+    hasError: true,
+    showRequiredLabel: true,
+    errorMessage: 'This is required',
+  },
 };
 
-export const InverseBlue = Template.bind({});
-InverseBlue.parameters = {
-  backgrounds: { default: 'blue' },
+export const InverseDark: Story = {
+  parameters: {
+    backgrounds: { default: 'dark' },
+  },
+  args: {
+    color: 'inverse',
+  },
 };
-InverseBlue.args = {
-  label: 'Percent Format Field',
-  value: 50,
-  color: 'inverse',
+
+export const InverseBlue: Story = {
+  parameters: {
+    backgrounds: { default: 'blue' },
+  },
+  args: {
+    color: 'inverse',
+  },
 };
diff --git a/src/components/NumberFormat/PhoneNumberFormatField.stories.tsx b/src/components/NumberFormat/PhoneNumberFormatField.stories.tsx
index 053d205e..0ac36ae3 100644
--- a/src/components/NumberFormat/PhoneNumberFormatField.stories.tsx
+++ b/src/components/NumberFormat/PhoneNumberFormatField.stories.tsx
@@ -1,9 +1,8 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryObj, Meta } from '@storybook/react';
 
 import { PhoneNumberFormatField } from './PhoneNumberFormatField';
 
-export default {
+const meta: Meta<typeof PhoneNumberFormatField> = {
   title: 'Form Components/NumberFormat/PhoneNumberFormatField',
   component: PhoneNumberFormatField,
   argTypes: {
@@ -12,38 +11,40 @@ export default {
       options: ['default', 'inverse'],
     },
   },
-} as ComponentMeta<typeof PhoneNumberFormatField>;
-
-const Template: ComponentStory<typeof PhoneNumberFormatField> = (args) => (
-  <PhoneNumberFormatField {...args} />
-);
+};
+export default meta;
+type Story = StoryObj<typeof PhoneNumberFormatField>;
 
-export const Default = Template.bind({});
-Default.args = {};
+export const Default: Story = {};
 
-export const Placeholder = Template.bind({});
-Placeholder.args = {
-  placeholder: 'placeholder',
+export const Placeholder: Story = {
+  args: {
+    placeholder: 'placeholder',
+  },
 };
 
-export const Error = Template.bind({});
-Error.args = {
-  hasError: true,
-  errorMessage: 'This is required',
+export const RequiredAndError: Story = {
+  args: {
+    hasError: true,
+    showRequiredLabel: true,
+    errorMessage: 'This is required',
+  },
 };
 
-export const InverseDark = Template.bind({});
-InverseDark.parameters = {
-  backgrounds: { default: 'dark' },
-};
-InverseDark.args = {
-  color: 'inverse',
+export const InverseDark: Story = {
+  parameters: {
+    backgrounds: { default: 'dark' },
+  },
+  args: {
+    color: 'inverse',
+  },
 };
 
-export const InverseBlue = Template.bind({});
-InverseBlue.parameters = {
-  backgrounds: { default: 'blue' },
-};
-InverseBlue.args = {
-  color: 'inverse',
+export const InverseBlue: Story = {
+  parameters: {
+    backgrounds: { default: 'blue' },
+  },
+  args: {
+    color: 'inverse',
+  },
 };
diff --git a/src/components/NumberFormat/PriceFormatField.stories.tsx b/src/components/NumberFormat/PriceFormatField.stories.tsx
index 7b1a1d6d..23ea1873 100644
--- a/src/components/NumberFormat/PriceFormatField.stories.tsx
+++ b/src/components/NumberFormat/PriceFormatField.stories.tsx
@@ -1,59 +1,84 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryObj, Meta } from '@storybook/react';
 
 import { PriceFormatField } from './UnitNumberFormatField';
+import { Apple, HelpCircle, TrendingUp } from '@lifeomic/chromicons';
 
-export default {
+const meta: Meta<typeof PriceFormatField> = {
   title: 'Form Components/NumberFormat/PriceFormatField',
   component: PriceFormatField,
+  args: {
+    label: 'Price Format Field',
+    value: 50,
+  },
   argTypes: {
     color: {
       control: 'radio',
       options: ['default', 'inverse'],
     },
   },
-} as ComponentMeta<typeof PriceFormatField>;
+};
+export default meta;
+type Story = StoryObj<typeof PriceFormatField>;
 
-const Template: ComponentStory<typeof PriceFormatField> = (args) => (
-  <PriceFormatField {...args} />
-);
+export const Default: Story = {};
 
-export const Default = Template.bind({});
-Default.args = {
-  label: 'Price Format Field',
-  value: 50,
+export const Min: Story = {
+  args: {
+    min: 20,
+  },
 };
 
-export const Min = Template.bind({});
-Min.args = {
-  label: 'Price Format Field',
-  value: 50,
-  min: 20,
+export const Max: Story = {
+  args: {
+    max: 70,
+  },
 };
 
-export const Max = Template.bind({});
-Max.args = {
-  label: 'Price Format Field',
-  value: 50,
-  max: 70,
+export const Adornments: Story = {
+  args: {
+    startAdornment: <Apple />,
+    endAdornment: <TrendingUp />,
+  },
 };
 
-export const InverseDark = Template.bind({});
-InverseDark.parameters = {
-  backgrounds: { default: 'dark' },
+export const TooltipMessage: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Icon and Tooltip Message must be used at the same time for either of them to render.',
+      },
+    },
+  },
+  args: {
+    icon: HelpCircle,
+    tooltipMessage: 'Tooltip Message',
+  },
 };
-InverseDark.args = {
-  label: 'Price Format Field',
-  value: 50,
-  color: 'inverse',
+
+export const RequiredAndError: Story = {
+  args: {
+    hasError: true,
+    showRequiredLabel: true,
+    errorMessage: 'This is required',
+  },
 };
 
-export const InverseBlue = Template.bind({});
-InverseBlue.parameters = {
-  backgrounds: { default: 'blue' },
+export const InverseDark: Story = {
+  parameters: {
+    backgrounds: { default: 'dark' },
+  },
+  args: {
+    color: 'inverse',
+  },
 };
-InverseBlue.args = {
-  label: 'Price Format Field',
-  value: 50,
-  color: 'inverse',
+
+export const InverseBlue: Story = {
+  parameters: {
+    backgrounds: { default: 'blue' },
+  },
+  args: {
+    color: 'inverse',
+  },
 };
diff --git a/src/components/NumberFormat/UnitNumberFormatField.stories.tsx b/src/components/NumberFormat/UnitNumberFormatField.stories.tsx
index 14c8c9c3..383dc3eb 100644
--- a/src/components/NumberFormat/UnitNumberFormatField.stories.tsx
+++ b/src/components/NumberFormat/UnitNumberFormatField.stories.tsx
@@ -1,80 +1,97 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryObj, Meta } from '@storybook/react';
 
 import { UnitNumberFormatField } from './UnitNumberFormatField';
+import { Apple, HelpCircle, TrendingUp } from '@lifeomic/chromicons';
 
-export default {
+const meta: Meta<typeof UnitNumberFormatField> = {
   title: 'Form Components/NumberFormat/UnitNumberFormatField',
   component: UnitNumberFormatField,
+  args: {
+    label: 'Unit Number Format Field',
+    value: 50,
+    units: 'units',
+  },
   argTypes: {
     color: {
       control: 'radio',
       options: ['default', 'inverse'],
     },
   },
-} as ComponentMeta<typeof UnitNumberFormatField>;
+};
+export default meta;
+type Story = StoryObj<typeof UnitNumberFormatField>;
 
-const Template: ComponentStory<typeof UnitNumberFormatField> = (args) => (
-  <UnitNumberFormatField {...args} />
-);
+export const Default: Story = {};
 
-export const Default = Template.bind({});
-Default.args = {
-  label: 'Unit Number Format Field',
-  value: 50,
-  units: 'units',
+export const Min: Story = {
+  args: {
+    min: 20,
+  },
 };
 
-export const Min = Template.bind({});
-Min.args = {
-  label: 'Unit Number Format Field',
-  value: 50,
-  units: 'units',
-  min: 20,
+export const Max: Story = {
+  args: {
+    max: 70,
+  },
 };
 
-export const Max = Template.bind({});
-Max.args = {
-  label: 'Unit Number Format Field',
-  value: 50,
-  units: 'units',
-  max: 70,
+export const DecimalScale: Story = {
+  args: {
+    decimalScale: 2,
+  },
 };
 
-export const DecimalScale = Template.bind({});
-DecimalScale.args = {
-  label: 'Unit Number Format Field',
-  value: 50,
-  units: 'units',
-  decimalScale: 2,
+export const PrefixUnits: Story = {
+  args: {
+    prefixUnits: true,
+  },
 };
 
-export const PrefixUnits = Template.bind({});
-PrefixUnits.args = {
-  label: 'Unit Number Format Field',
-  value: 50,
-  units: 'units',
-  prefixUnits: true,
+export const Adornments: Story = {
+  args: {
+    startAdornment: <Apple />,
+    endAdornment: <TrendingUp />,
+  },
 };
 
-export const InverseDark = Template.bind({});
-InverseDark.parameters = {
-  backgrounds: { default: 'dark' },
+export const TooltipMessage: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Icon and Tooltip Message must be used at the same time for either of them to render.',
+      },
+    },
+  },
+  args: {
+    icon: HelpCircle,
+    tooltipMessage: 'Tooltip Message',
+  },
 };
-InverseDark.args = {
-  label: 'Unit Number Format Field',
-  value: 50,
-  units: 'units',
-  color: 'inverse',
+
+export const RequiredAndError: Story = {
+  args: {
+    hasError: true,
+    showRequiredLabel: true,
+    errorMessage: 'This is required',
+  },
 };
 
-export const InverseBlue = Template.bind({});
-InverseBlue.parameters = {
-  backgrounds: { default: 'blue' },
+export const InverseDark: Story = {
+  parameters: {
+    backgrounds: { default: 'dark' },
+  },
+  args: {
+    color: 'inverse',
+  },
 };
-InverseBlue.args = {
-  label: 'Unit Number Format Field',
-  value: 50,
-  units: 'units',
-  color: 'inverse',
+
+export const InverseBlue: Story = {
+  parameters: {
+    backgrounds: { default: 'blue' },
+  },
+  args: {
+    color: 'inverse',
+  },
 };