From 88982346544c0854ab8aaae4f471a4d44880a310 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oddbj=C3=B8rn=20=C3=98vernes?= <oddbjorn.overnes@gmail.com>
Date: Tue, 10 Feb 2026 13:59:06 +0100
Subject: [PATCH 1/6] chore(docs): add story for type=

---
 apps/www/app/app.css                          | 10 ++++++
 .../components/textfield/en/overview.mdx      |  4 +++
 .../components/textfield/no/overview.mdx      |  4 +++
 .../textfield/textfield.stories.tsx           | 36 ++++++++++++++++++-
 4 files changed, 53 insertions(+), 1 deletion(-)

diff --git a/apps/www/app/app.css b/apps/www/app/app.css
index a2255b570a..05854eb4d1 100644
--- a/apps/www/app/app.css
+++ b/apps/www/app/app.css
@@ -452,6 +452,16 @@
       }
     }
   }
+  /*this can be used to translate text in stories in some cases instead of a seperate english story*/
+  [data-lang] {
+    display: none;
+  }
+  :lang(en) [data-lang='en']  {
+    display: initial;
+  }
+  :lang(no) [data-lang='no'] {
+    display: initial;
+  }
 }
 @layer site.overrides {
   :root {
diff --git a/apps/www/app/content/components/textfield/en/overview.mdx b/apps/www/app/content/components/textfield/en/overview.mdx
index bfc55e4d4a..a46adf0ad3 100644
--- a/apps/www/app/content/components/textfield/en/overview.mdx
+++ b/apps/www/app/content/components/textfield/en/overview.mdx
@@ -35,6 +35,10 @@ It is legally required to mark mandatory fields. Read more about [required and o
 
 <Story story="RequiredEn" />
 
+### Type
+Since `Textfield` is based on native `input`, you can use most of the `type` values that `input` supports, but we have chosen to remove some of them from our exported type. You can see the valid type values in this select menu.
+<Story story="InputType" layout="block" />
+
 ## Guidelines
 `Input` is suitable for short, simple text.  
 `Textarea` is better for more detailed or longer responses.
diff --git a/apps/www/app/content/components/textfield/no/overview.mdx b/apps/www/app/content/components/textfield/no/overview.mdx
index 189d31543d..4628f49df7 100644
--- a/apps/www/app/content/components/textfield/no/overview.mdx
+++ b/apps/www/app/content/components/textfield/no/overview.mdx
@@ -38,6 +38,10 @@ Det er lovpålagt å markere påkrevde felt. Les om [obligatoriske og valgfrie f
 
 <Story story="Required" />
 
+### Type
+Siden `Textfield` er basert på native `input`, kan du bruke de fleste `type`-verdiene `input` støtter, men vi har valgt å fjerne noen av de fra vår eksporterte type. Du kan se de gyldige type verdiene i denne nedtrekksmenyen.
+<Story story="InputType" layout="block" />
+
 ## Retningslinjer
 `Input` er egnet til korte tekster og svar. `Textarea` er egnet til mer utfyllende og lengre svar. 
 
diff --git a/apps/www/app/content/components/textfield/textfield.stories.tsx b/apps/www/app/content/components/textfield/textfield.stories.tsx
index 27b72432f0..afa4836e70 100644
--- a/apps/www/app/content/components/textfield/textfield.stories.tsx
+++ b/apps/www/app/content/components/textfield/textfield.stories.tsx
@@ -1,4 +1,6 @@
-import { Tag, Textfield } from '@digdir/designsystemet-react';
+import { Tag, Textfield, Field, Label, Select, type TextfieldProps } from '@digdir/designsystemet-react';
+import { useState } from 'react';
+import { ArrowRightIcon } from '@navikt/aksel-icons';
 
 export const Preview = () => {
   return <Textfield label='Label' />;
@@ -73,3 +75,35 @@ export const RequiredEn = () => (
     required
   />
 );
+
+
+export const InputType = () => {
+  const [type, setType] = useState<TextfieldProps['type'] >('text');
+
+  return (
+    <div style={{ display: 'flex', gap: 'var(--ds-size-4)', alignItems: 'end', flexWrap: 'wrap' }}>
+      <Field>
+        <Label><span data-lang='no'>Velg</span><span data-lang='en'>Choose</span> type</Label>
+        <Select defaultValue='text' onChange={(e) => setType(e.target.value as TextfieldProps['type'])}>
+          <Select.Option value='text'>text</Select.Option>
+          <Select.Option value='color'>color</Select.Option>
+          <Select.Option value='date'>date</Select.Option>
+          <Select.Option value='datetime-local'>datetime-local</Select.Option>
+          <Select.Option value='email'>email</Select.Option>
+          <Select.Option value='file'>file</Select.Option>
+          <Select.Option value='month'>month</Select.Option>
+          <Select.Option value='hidden'>hidden</Select.Option>
+          <Select.Option value='number'>number</Select.Option>
+          <Select.Option value='password'>password</Select.Option>
+          <Select.Option value='search'>search</Select.Option>
+          <Select.Option value='tel'>tel</Select.Option>
+          <Select.Option value='time'>time</Select.Option>
+          <Select.Option value='url'>url</Select.Option>
+          <Select.Option value='week'>week</Select.Option>
+        </Select>
+      </Field>
+      <ArrowRightIcon aria-hidden fontSize={48}/>
+      <Textfield label={`type="${type}"`} type={type} />
+    </div>
+  );
+};

From 47e2c715daedf87472f2590e87adb17eae9e62ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oddbj=C3=B8rn=20=C3=98vernes?= <oddbjorn.overnes@gmail.com>
Date: Tue, 10 Feb 2026 14:06:25 +0100
Subject: [PATCH 2/6] use display: contents for translation

---
 apps/www/app/app.css | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/apps/www/app/app.css b/apps/www/app/app.css
index 05854eb4d1..59736c2b46 100644
--- a/apps/www/app/app.css
+++ b/apps/www/app/app.css
@@ -452,15 +452,18 @@
       }
     }
   }
-  /*this can be used to translate text in stories in some cases instead of a seperate english story*/
+  /*
+  this can be used to translate text in stories in some cases instead of a seperate english story. 
+  Wrap text in <span data-lang="en">text only visible for english</span>
+  */
   [data-lang] {
     display: none;
   }
   :lang(en) [data-lang='en']  {
-    display: initial;
+    display: contents;
   }
   :lang(no) [data-lang='no'] {
-    display: initial;
+    display: contents;
   }
 }
 @layer site.overrides {

From b581d1b24341cc2e96458dae5aab761f36a40e97 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oddbj=C3=B8rn=20=C3=98vernes?= <oddbjorn.overnes@gmail.com>
Date: Tue, 10 Feb 2026 14:36:17 +0100
Subject: [PATCH 3/6] biome

---
 apps/www/app/app.css                          |  2 +-
 .../textfield/textfield.stories.tsx           | 35 ++++++++++++++-----
 2 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/apps/www/app/app.css b/apps/www/app/app.css
index 59736c2b46..8bf2b84929 100644
--- a/apps/www/app/app.css
+++ b/apps/www/app/app.css
@@ -459,7 +459,7 @@
   [data-lang] {
     display: none;
   }
-  :lang(en) [data-lang='en']  {
+  :lang(en) [data-lang='en'] {
     display: contents;
   }
   :lang(no) [data-lang='no'] {
diff --git a/apps/www/app/content/components/textfield/textfield.stories.tsx b/apps/www/app/content/components/textfield/textfield.stories.tsx
index afa4836e70..89de95fcc6 100644
--- a/apps/www/app/content/components/textfield/textfield.stories.tsx
+++ b/apps/www/app/content/components/textfield/textfield.stories.tsx
@@ -1,6 +1,13 @@
-import { Tag, Textfield, Field, Label, Select, type TextfieldProps } from '@digdir/designsystemet-react';
-import { useState } from 'react';
+import {
+  Field,
+  Label,
+  Select,
+  Tag,
+  Textfield,
+  type TextfieldProps,
+} from '@digdir/designsystemet-react';
 import { ArrowRightIcon } from '@navikt/aksel-icons';
+import { useState } from 'react';
 
 export const Preview = () => {
   return <Textfield label='Label' />;
@@ -76,15 +83,27 @@ export const RequiredEn = () => (
   />
 );
 
-
 export const InputType = () => {
-  const [type, setType] = useState<TextfieldProps['type'] >('text');
+  const [type, setType] = useState<TextfieldProps['type']>('text');
 
   return (
-    <div style={{ display: 'flex', gap: 'var(--ds-size-4)', alignItems: 'end', flexWrap: 'wrap' }}>
+    <div
+      style={{
+        display: 'flex',
+        gap: 'var(--ds-size-4)',
+        alignItems: 'end',
+        flexWrap: 'wrap',
+      }}
+    >
       <Field>
-        <Label><span data-lang='no'>Velg</span><span data-lang='en'>Choose</span> type</Label>
-        <Select defaultValue='text' onChange={(e) => setType(e.target.value as TextfieldProps['type'])}>
+        <Label>
+          <span data-lang='no'>Velg</span>
+          <span data-lang='en'>Choose</span> type
+        </Label>
+        <Select
+          defaultValue='text'
+          onChange={(e) => setType(e.target.value as TextfieldProps['type'])}
+        >
           <Select.Option value='text'>text</Select.Option>
           <Select.Option value='color'>color</Select.Option>
           <Select.Option value='date'>date</Select.Option>
@@ -102,7 +121,7 @@ export const InputType = () => {
           <Select.Option value='week'>week</Select.Option>
         </Select>
       </Field>
-      <ArrowRightIcon aria-hidden fontSize={48}/>
+      <ArrowRightIcon aria-hidden fontSize={48} />
       <Textfield label={`type="${type}"`} type={type} />
     </div>
   );

From b314536320bafdaf8ba7350f7da2c26c2d2a667a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oddbj=C3=B8rn=20=C3=98vernes?= <oddbjorn.overnes@gmail.com>
Date: Fri, 13 Feb 2026 09:58:55 +0100
Subject: [PATCH 4/6] Update
 apps/www/app/content/components/textfield/en/overview.mdx

Co-authored-by: Tobias Barsnes <tobias.barsnes@digdir.no>
---
 apps/www/app/content/components/textfield/en/overview.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/www/app/content/components/textfield/en/overview.mdx b/apps/www/app/content/components/textfield/en/overview.mdx
index a46adf0ad3..cb30c571af 100644
--- a/apps/www/app/content/components/textfield/en/overview.mdx
+++ b/apps/www/app/content/components/textfield/en/overview.mdx
@@ -36,7 +36,7 @@ It is legally required to mark mandatory fields. Read more about [required and o
 <Story story="RequiredEn" />
 
 ### Type
-Since `Textfield` is based on native `input`, you can use most of the `type` values that `input` supports, but we have chosen to remove some of them from our exported type. You can see the valid type values in this select menu.
+Since `Textfield` is based on native `input`, you can use most of the `type` values that `input` supports, but we have chosen to remove some of them from our exported type. You can see the valid type values in the select menu below.
 <Story story="InputType" layout="block" />
 
 ## Guidelines

From a46a301ab3c41c96ef690ce36e199c84d4e6aa9c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oddbj=C3=B8rn=20=C3=98vernes?= <oddbjorn.overnes@gmail.com>
Date: Fri, 13 Feb 2026 09:59:07 +0100
Subject: [PATCH 5/6] Update
 apps/www/app/content/components/textfield/no/overview.mdx

Co-authored-by: Tobias Barsnes <tobias.barsnes@digdir.no>
---
 apps/www/app/content/components/textfield/no/overview.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/www/app/content/components/textfield/no/overview.mdx b/apps/www/app/content/components/textfield/no/overview.mdx
index 4628f49df7..e845723826 100644
--- a/apps/www/app/content/components/textfield/no/overview.mdx
+++ b/apps/www/app/content/components/textfield/no/overview.mdx
@@ -39,7 +39,7 @@ Det er lovpålagt å markere påkrevde felt. Les om [obligatoriske og valgfrie f
 <Story story="Required" />
 
 ### Type
-Siden `Textfield` er basert på native `input`, kan du bruke de fleste `type`-verdiene `input` støtter, men vi har valgt å fjerne noen av de fra vår eksporterte type. Du kan se de gyldige type verdiene i denne nedtrekksmenyen.
+Siden `Textfield` er basert på native `input`, kan du bruke de fleste `type`-verdiene `input` støtter, men vi har valgt å fjerne noen av de fra vår eksporterte type. Du kan se de gyldige type verdiene i nedtrekksmenyen nedenfor.
 <Story story="InputType" layout="block" />
 
 ## Retningslinjer

From 28b9e861a9a8f5a059c718abdf67ccf66042cdd7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oddbj=C3=B8rn=20=C3=98vernes?= <oddbjorn.overnes@gmail.com>
Date: Fri, 13 Feb 2026 09:59:58 +0100
Subject: [PATCH 6/6] Update
 apps/www/app/content/components/textfield/textfield.stories.tsx

Co-authored-by: Tobias Barsnes <tobias.barsnes@digdir.no>
---
 apps/www/app/content/components/textfield/textfield.stories.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/www/app/content/components/textfield/textfield.stories.tsx b/apps/www/app/content/components/textfield/textfield.stories.tsx
index 89de95fcc6..25f2a0934e 100644
--- a/apps/www/app/content/components/textfield/textfield.stories.tsx
+++ b/apps/www/app/content/components/textfield/textfield.stories.tsx
@@ -102,6 +102,7 @@ export const InputType = () => {
         </Label>
         <Select
           defaultValue='text'
+          lang='en'
           onChange={(e) => setType(e.target.value as TextfieldProps['type'])}
         >
           <Select.Option value='text'>text</Select.Option>