diff --git a/README.md b/README.md
index e0754989..cad70910 100644
--- a/README.md
+++ b/README.md
@@ -20,7 +20,9 @@ This implementation supports the latest version of the NHS.UK Frontend library a
 
 ## Polymorphic Components
 
-A few components in this library are polymorphic, meaning they can accept a different component as a prop. This is particularly useful when you want to use a custom component, say a `Link` component from a routing library, instead of the default `a` tag.
+A few components in this library are polymorphic, meaning they can accept a different component as a prop and render as that component. This is particularly useful when you want to use a custom component, say a `Link` component from a routing library, instead of the default `a` tag.
+
+This feature is was taken from [Mantine](https://github.com/mantinedev/mantine), have a look at their [polymorphic components documentation](https://mantine.dev/guides/polymorphic/) for more information.
 
 Here is an example of how you can use a custom `Link` component with the `Header.Logo` component:
 
@@ -43,7 +45,7 @@ export const AppHeader = () => (
 );
 ```
 
-### Full List of Polymorphic Components
+## Full List of Polymorphic Components
 
 <details>
 <summary>Click to expand</summary>
diff --git a/packages/nhsuk-frontend-react/README.md b/packages/nhsuk-frontend-react/README.md
index e0754989..cad70910 100644
--- a/packages/nhsuk-frontend-react/README.md
+++ b/packages/nhsuk-frontend-react/README.md
@@ -20,7 +20,9 @@ This implementation supports the latest version of the NHS.UK Frontend library a
 
 ## Polymorphic Components
 
-A few components in this library are polymorphic, meaning they can accept a different component as a prop. This is particularly useful when you want to use a custom component, say a `Link` component from a routing library, instead of the default `a` tag.
+A few components in this library are polymorphic, meaning they can accept a different component as a prop and render as that component. This is particularly useful when you want to use a custom component, say a `Link` component from a routing library, instead of the default `a` tag.
+
+This feature is was taken from [Mantine](https://github.com/mantinedev/mantine), have a look at their [polymorphic components documentation](https://mantine.dev/guides/polymorphic/) for more information.
 
 Here is an example of how you can use a custom `Link` component with the `Header.Logo` component:
 
@@ -43,7 +45,7 @@ export const AppHeader = () => (
 );
 ```
 
-### Full List of Polymorphic Components
+## Full List of Polymorphic Components
 
 <details>
 <summary>Click to expand</summary>
diff --git a/packages/nhsuk-frontend-react/src/components/form-elements/input/Input.stories.tsx b/packages/nhsuk-frontend-react/src/components/form-elements/input/Input.stories.tsx
index 0aa3bdb9..d87c4e58 100644
--- a/packages/nhsuk-frontend-react/src/components/form-elements/input/Input.stories.tsx
+++ b/packages/nhsuk-frontend-react/src/components/form-elements/input/Input.stories.tsx
@@ -22,6 +22,7 @@ const meta: Meta = {
         '5',
         '10',
         '20',
+        '30',
         'full',
         'one-half',
         'one-third',
@@ -47,6 +48,7 @@ export const Default: Story = {
 export const WithFixedWidth: Story = {
   render: (args) => (
     <>
+      <Input {...args} label="30 character width" width="30" />
       <Input {...args} label="20 character width" width="20" />
       <Input {...args} label="10 character width" width="10" />
       <Input {...args} label="5 character width" width="5" />