From e5141002788e7b8a97cbf4358e40f158d019d568 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oddbj=C3=B8rn=20=C3=98vernes?= <oddbjorn.overnes@gmail.com>
Date: Tue, 24 Feb 2026 12:13:46 +0100
Subject: [PATCH 01/14] wip FileUpload

---
 packages/css/src/file-upload.css              | 34 ++++++++++
 packages/css/src/index.css                    |  1 +
 .../file-upload/file-upload-button.tsx        | 19 ++++++
 .../file-upload/file-upload-description.tsx   | 19 ++++++
 .../file-upload/file-upload-label.tsx         | 19 ++++++
 .../file-upload/file-upload.stories.tsx       | 45 +++++++++++++
 .../components/file-upload/file-upload.tsx    | 37 +++++++++++
 .../react/src/components/file-upload/index.ts | 65 +++++++++++++++++++
 8 files changed, 239 insertions(+)
 create mode 100644 packages/css/src/file-upload.css
 create mode 100644 packages/react/src/components/file-upload/file-upload-button.tsx
 create mode 100644 packages/react/src/components/file-upload/file-upload-description.tsx
 create mode 100644 packages/react/src/components/file-upload/file-upload-label.tsx
 create mode 100644 packages/react/src/components/file-upload/file-upload.stories.tsx
 create mode 100644 packages/react/src/components/file-upload/file-upload.tsx
 create mode 100644 packages/react/src/components/file-upload/index.ts

diff --git a/packages/css/src/file-upload.css b/packages/css/src/file-upload.css
new file mode 100644
index 0000000000..f431334e8f
--- /dev/null
+++ b/packages/css/src/file-upload.css
@@ -0,0 +1,34 @@
+.ds-file-upload {
+  border: 2px dashed var(--ds-color-border-default);
+  width: auto;
+  border-radius: var(--ds-border-radius-md);
+  padding-block: var(--ds-size-8);
+  padding-inline: var(--ds-size-6);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: var(--ds-color-surface-default);
+  &:hover {
+    border-style: solid;
+    background-color: var(--ds-color-surface-tinted);
+  }
+  > * + * {
+    margin-top: var(--ds-size-4);
+  }
+  input {
+    display: none;
+  }
+  svg {
+    color: var(--ds-color-text-subtle);
+    height: var(--ds-size-8);
+    width: auto;
+  }
+  .ds-file-upload__label {
+    margin-top: var(--ds-size-2);
+    color: var(--ds-color-text-default);
+  }
+  .ds-file-upload__description {
+    color: var(--ds-color-neutral-text-subtle);
+    margin-top: 0;
+  }
+}
diff --git a/packages/css/src/index.css b/packages/css/src/index.css
index 23fb4ab15d..2ae7846935 100644
--- a/packages/css/src/index.css
+++ b/packages/css/src/index.css
@@ -14,6 +14,7 @@
 @import url('./input.css') layer(ds.components);
 @import url('./field.css') layer(ds.components);
 @import url('./fieldset.css') layer(ds.components);
+@import url('./file-upload.css') layer(ds.components);
 @import url('./alert.css') layer(ds.components);
 @import url('./popover.css') layer(ds.components);
 @import url('./skip-link.css') layer(ds.components);
diff --git a/packages/react/src/components/file-upload/file-upload-button.tsx b/packages/react/src/components/file-upload/file-upload-button.tsx
new file mode 100644
index 0000000000..f088a694ef
--- /dev/null
+++ b/packages/react/src/components/file-upload/file-upload-button.tsx
@@ -0,0 +1,19 @@
+import { forwardRef, type HTMLAttributes } from 'react';
+import type { ButtonProps } from '../button/button';
+import { Button } from '../button/button';
+
+export type FileUploadButtonProps = Pick<ButtonProps, 'variant'> &
+  HTMLAttributes<HTMLSpanElement>;
+
+export const FileUploadButton = forwardRef<
+  HTMLSpanElement,
+  FileUploadButtonProps
+>(function FileUploadButton({ className, children, ...rest }, ref) {
+  return (
+    <Button variant='secondary' asChild>
+      <span className={className} ref={ref} {...rest}>
+        {children}
+      </span>
+    </Button>
+  );
+});
diff --git a/packages/react/src/components/file-upload/file-upload-description.tsx b/packages/react/src/components/file-upload/file-upload-description.tsx
new file mode 100644
index 0000000000..17698c3e09
--- /dev/null
+++ b/packages/react/src/components/file-upload/file-upload-description.tsx
@@ -0,0 +1,19 @@
+import cl from 'clsx/lite';
+import { forwardRef, type HTMLAttributes } from 'react';
+import { Paragraph, type ParagraphProps } from '../paragraph/paragraph';
+
+export type FileUploadDescriptionProps = ParagraphProps &
+  HTMLAttributes<HTMLParagraphElement>;
+
+export const FileUploadDescription = forwardRef<
+  HTMLParagraphElement,
+  FileUploadDescriptionProps
+>(function FileUploadDescription({ className, ...rest }, ref) {
+  return (
+    <Paragraph
+      className={cl(className, 'ds-file-upload__description')}
+      ref={ref}
+      {...rest}
+    />
+  );
+});
diff --git a/packages/react/src/components/file-upload/file-upload-label.tsx b/packages/react/src/components/file-upload/file-upload-label.tsx
new file mode 100644
index 0000000000..45ad5983a6
--- /dev/null
+++ b/packages/react/src/components/file-upload/file-upload-label.tsx
@@ -0,0 +1,19 @@
+import { forwardRef, type HTMLAttributes } from 'react';
+import { Paragraph, type ParagraphProps } from '../paragraph/paragraph';
+import cl from 'clsx/lite';
+
+export type FileUploadLabelProps = ParagraphProps &
+  HTMLAttributes<HTMLParagraphElement>;
+
+export const FileUploadLabel = forwardRef<
+  HTMLParagraphElement,
+  FileUploadLabelProps
+>(function FileUploadLabel({ className, ...rest }, ref) {
+  return (
+    <Paragraph
+      className={cl(className, 'ds-file-upload__label')}
+      ref={ref}
+      {...rest}
+    />
+  );
+});
diff --git a/packages/react/src/components/file-upload/file-upload.stories.tsx b/packages/react/src/components/file-upload/file-upload.stories.tsx
new file mode 100644
index 0000000000..522f979ff6
--- /dev/null
+++ b/packages/react/src/components/file-upload/file-upload.stories.tsx
@@ -0,0 +1,45 @@
+import { CloudUpIcon } from '@navikt/aksel-icons';
+import type { Meta, StoryFn, StoryObj } from '@storybook/react-vite';
+
+import { FileUpload } from './';
+
+type Story = StoryObj<typeof FileUpload>;
+
+const meta: Meta<typeof FileUpload> = {
+  title: 'Komponenter/FileUpload',
+  component: FileUpload,
+  parameters: {
+    customStyles: {
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'center',
+      alignItems: 'center',
+      flexWrap: 'wrap',
+      gap: 'var(--ds-size-4)',
+    },
+  },
+};
+
+export default meta;
+
+export const Preview: Story = {
+  render: ({ ...args }) => {
+    return (
+      <FileUpload {...args}>
+        <CloudUpIcon aria-hidden='true' />
+        <FileUpload.Button>Upload file</FileUpload.Button>
+      </FileUpload>
+    );
+  },
+};
+
+export const Variants: StoryFn<typeof FileUpload> = () => (
+  <FileUpload>
+    <CloudUpIcon aria-hidden='true' />
+    <FileUpload.Label>Drop file here</FileUpload.Label>
+    <FileUpload.Description>
+      File must be in csv format and less than 2MB
+    </FileUpload.Description>
+    <FileUpload.Button>Upload file</FileUpload.Button>
+  </FileUpload>
+);
diff --git a/packages/react/src/components/file-upload/file-upload.tsx b/packages/react/src/components/file-upload/file-upload.tsx
new file mode 100644
index 0000000000..afaf7027e0
--- /dev/null
+++ b/packages/react/src/components/file-upload/file-upload.tsx
@@ -0,0 +1,37 @@
+import cl from 'clsx/lite';
+import type { HTMLAttributes, ReactNode } from 'react';
+import { forwardRef } from 'react';
+import type { DefaultProps } from '../../types';
+import type { MergeRight } from '../../utilities';
+
+export type FileUploadProps = MergeRight<
+  DefaultProps & HTMLAttributes<HTMLLabelElement>,
+  {
+    /** Instances of `FileUpload.Button`, `FileUpload.label` or other React nodes */
+    children: ReactNode;
+  }
+>;
+
+/**
+ * FileUpload component to present a file upload area.
+ *
+ * @example
+ * <FileUpload>
+ *    <CloudUpIcon aria-hidden='true' />
+ *    <FileUpload.Label>Drop file here</FileUpload.Label>
+ *    <FileUpload.Description>
+ *      File must be in csv format and less than 2MB
+ *    </FileUpload.Description>
+ *    <FileUpload.Button>Upload file</FileUpload.Button>
+ *  </FileUpload>
+ */
+export const FileUpload = forwardRef<HTMLLabelElement, FileUploadProps>(
+  function FileUpload({ className, children, ...rest }, ref) {
+    return (
+      <label ref={ref} className={cl(`ds-file-upload`, className)} {...rest}>
+        {children}
+        <input type='file' />
+      </label>
+    );
+  },
+);
diff --git a/packages/react/src/components/file-upload/index.ts b/packages/react/src/components/file-upload/index.ts
new file mode 100644
index 0000000000..8f64e0d8eb
--- /dev/null
+++ b/packages/react/src/components/file-upload/index.ts
@@ -0,0 +1,65 @@
+import { FileUpload as FileUploadParent } from './file-upload';
+import { FileUploadButton } from './file-upload-button';
+import { FileUploadDescription } from './file-upload-description';
+import { FileUploadLabel } from './file-upload-label';
+
+type FileUpload = typeof FileUploadParent & {
+  /**
+   * Use `FileUpload.Button` to add a fake button for click affordance
+   *
+   * Place as a descendant of `FileUpload`
+   *
+   * @example
+   * <FileUpload>
+   *   <FileUpload.Button>Upload file</FileUpload.Button>
+   * </FileUpload>
+   */
+  Button: typeof FileUploadButton;
+  /**
+   * Use `FileUpload.Label` to add primary text inside FileUpload
+   *
+   * Place as a descendant of `FileUpload`
+   *
+   * @example
+   * <FileUpload>
+   *   <FileUpload.Label>Drop file here</FileUpload.Label>
+   * </FileUpload>
+   */
+  Label: typeof FileUploadLabel;
+  /**
+   * Use `FileUpload.Description` to add secondary text inside FileUpload
+   *
+   * Place as a descendant of `FileUpload`
+   *
+   * @example
+   * <FileUpload>
+   *   <FileUpload.Description>File must be in csv format and less than 2MB</FileUpload.Description>
+   * </FileUpload>
+   */
+  Description: typeof FileUploadDescription;
+};
+/**
+ * FileUpload component to present a file upload area.
+ *
+ * @example
+ * <FileUpload>
+ *  <FileUpload.Label>Drop file here</FileUpload.Label>
+ *  <FileUpload.Description>File must be in csv format</FileUpload.Description>
+ *  <FileUpload.Button>Upload file</FileUpload.Button>
+ * </FileUpload>
+ */
+const FileUploadComponent: FileUpload = Object.assign(FileUploadParent, {
+  Button: FileUploadButton,
+  Label: FileUploadLabel,
+  Description: FileUploadDescription,
+});
+
+FileUploadComponent.Button.displayName = 'FileUpload.Button';
+FileUploadComponent.Label.displayName = 'FileUpload.Label';
+FileUploadComponent.Description.displayName = 'FileUpload.Description';
+
+export type { FileUploadProps } from './file-upload';
+export type { FileUploadButtonProps } from './file-upload-button';
+export type { FileUploadDescriptionProps } from './file-upload-description';
+export type { FileUploadLabelProps } from './file-upload-label';
+export { FileUploadComponent as FileUpload };

From e6c2009efe6b753ce582218e2dfc362fb6b9dffa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oddbj=C3=B8rn=20=C3=98vernes?= <oddbjorn.overnes@gmail.com>
Date: Tue, 24 Feb 2026 12:25:03 +0100
Subject: [PATCH 02/14] format

---
 packages/react/src/components/file-upload/file-upload-label.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/components/file-upload/file-upload-label.tsx b/packages/react/src/components/file-upload/file-upload-label.tsx
index 45ad5983a6..f8ca345115 100644
--- a/packages/react/src/components/file-upload/file-upload-label.tsx
+++ b/packages/react/src/components/file-upload/file-upload-label.tsx
@@ -1,6 +1,6 @@
+import cl from 'clsx/lite';
 import { forwardRef, type HTMLAttributes } from 'react';
 import { Paragraph, type ParagraphProps } from '../paragraph/paragraph';
-import cl from 'clsx/lite';
 
 export type FileUploadLabelProps = ParagraphProps &
   HTMLAttributes<HTMLParagraphElement>;

From fa60cdc1801d2ac98465e11e491a96d3e2392220 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oddbj=C3=B8rn=20=C3=98vernes?= <oddbjorn.overnes@gmail.com>
Date: Tue, 24 Feb 2026 12:42:29 +0100
Subject: [PATCH 03/14] hover & variant

---
 packages/css/src/file-upload.css                           | 6 ++++++
 .../src/components/file-upload/file-upload-button.tsx      | 7 +++++--
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/css/src/file-upload.css b/packages/css/src/file-upload.css
index f431334e8f..f8b176906f 100644
--- a/packages/css/src/file-upload.css
+++ b/packages/css/src/file-upload.css
@@ -11,6 +11,12 @@
   &:hover {
     border-style: solid;
     background-color: var(--ds-color-surface-tinted);
+    cursor: pointer;
+    .ds-button {
+      /*link or not link hover to button?*/
+      --dsc-button-background: var(--dsc-button-background--hover);
+      --dsc-button-color: var(--dsc-button-color--hover);
+    }
   }
   > * + * {
     margin-top: var(--ds-size-4);
diff --git a/packages/react/src/components/file-upload/file-upload-button.tsx b/packages/react/src/components/file-upload/file-upload-button.tsx
index f088a694ef..c987a8f8ce 100644
--- a/packages/react/src/components/file-upload/file-upload-button.tsx
+++ b/packages/react/src/components/file-upload/file-upload-button.tsx
@@ -8,9 +8,12 @@ export type FileUploadButtonProps = Pick<ButtonProps, 'variant'> &
 export const FileUploadButton = forwardRef<
   HTMLSpanElement,
   FileUploadButtonProps
->(function FileUploadButton({ className, children, ...rest }, ref) {
+>(function FileUploadButton(
+  { className, variant = 'secondary', children, ...rest },
+  ref,
+) {
   return (
-    <Button variant='secondary' asChild>
+    <Button variant={variant} asChild>
       <span className={className} ref={ref} {...rest}>
         {children}
       </span>

From c14b4c16de6b9e62c913cfdc79e843adc38bcbf0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oddbj=C3=B8rn=20=C3=98vernes?= <oddbjorn.overnes@gmail.com>
Date: Tue, 24 Feb 2026 12:46:28 +0100
Subject: [PATCH 04/14] variant story

---
 .../file-upload/file-upload.stories.tsx       | 30 ++++++++++++++-----
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/packages/react/src/components/file-upload/file-upload.stories.tsx b/packages/react/src/components/file-upload/file-upload.stories.tsx
index 522f979ff6..9d68787534 100644
--- a/packages/react/src/components/file-upload/file-upload.stories.tsx
+++ b/packages/react/src/components/file-upload/file-upload.stories.tsx
@@ -27,6 +27,10 @@ export const Preview: Story = {
     return (
       <FileUpload {...args}>
         <CloudUpIcon aria-hidden='true' />
+        <FileUpload.Label>Drop file here</FileUpload.Label>
+        <FileUpload.Description>
+          File must be in csv format and less than 2MB
+        </FileUpload.Description>
         <FileUpload.Button>Upload file</FileUpload.Button>
       </FileUpload>
     );
@@ -34,12 +38,22 @@ export const Preview: Story = {
 };
 
 export const Variants: StoryFn<typeof FileUpload> = () => (
-  <FileUpload>
-    <CloudUpIcon aria-hidden='true' />
-    <FileUpload.Label>Drop file here</FileUpload.Label>
-    <FileUpload.Description>
-      File must be in csv format and less than 2MB
-    </FileUpload.Description>
-    <FileUpload.Button>Upload file</FileUpload.Button>
-  </FileUpload>
+  <>
+    <FileUpload>
+      <CloudUpIcon aria-hidden='true' />
+      <FileUpload.Label>Drop file here</FileUpload.Label>
+      <FileUpload.Description>
+        File must be in csv format and less than 2MB
+      </FileUpload.Description>
+      <FileUpload.Button>Upload file</FileUpload.Button>
+    </FileUpload>
+    <FileUpload data-color='neutral'>
+      <CloudUpIcon aria-hidden='true' />
+      <FileUpload.Label>Drop file here</FileUpload.Label>
+      <FileUpload.Description>
+        File must be in csv format and less than 2MB
+      </FileUpload.Description>
+      <FileUpload.Button>Upload file</FileUpload.Button>
+    </FileUpload>
+  </>
 );

From 64a26c7ce74b21ba71f638b5af58b4a160b0d75b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oddbj=C3=B8rn=20=C3=98vernes?= <oddbjorn.overnes@gmail.com>
Date: Tue, 24 Feb 2026 15:21:12 +0100
Subject: [PATCH 05/14] link variant

---
 .../src/components/file-upload/file-upload.mdx   | 16 ++++++++++++++++
 .../file-upload/file-upload.stories.tsx          | 12 +++++++++++-
 2 files changed, 27 insertions(+), 1 deletion(-)
 create mode 100644 packages/react/src/components/file-upload/file-upload.mdx

diff --git a/packages/react/src/components/file-upload/file-upload.mdx b/packages/react/src/components/file-upload/file-upload.mdx
new file mode 100644
index 0000000000..a793b58920
--- /dev/null
+++ b/packages/react/src/components/file-upload/file-upload.mdx
@@ -0,0 +1,16 @@
+import { Meta, Canvas, Controls, Primary } from '@storybook/addon-docs/blocks';
+import * as FileStories from './file-upload.stories';
+
+<Meta of={FileStories} />
+
+**Dokumentasjonen har blitt flyttet til [Designsystemet.no](https://designsystemet.no/no/components).**
+
+<Primary />
+<Controls />
+
+
+<Canvas of={FileStories.Variants} />
+
+<Canvas of={FileStories.LinkAlt} />
+
+
diff --git a/packages/react/src/components/file-upload/file-upload.stories.tsx b/packages/react/src/components/file-upload/file-upload.stories.tsx
index 9d68787534..b3cd59207f 100644
--- a/packages/react/src/components/file-upload/file-upload.stories.tsx
+++ b/packages/react/src/components/file-upload/file-upload.stories.tsx
@@ -1,6 +1,5 @@
 import { CloudUpIcon } from '@navikt/aksel-icons';
 import type { Meta, StoryFn, StoryObj } from '@storybook/react-vite';
-
 import { FileUpload } from './';
 
 type Story = StoryObj<typeof FileUpload>;
@@ -57,3 +56,14 @@ export const Variants: StoryFn<typeof FileUpload> = () => (
     </FileUpload>
   </>
 );
+export const LinkAlt: StoryFn<typeof FileUpload> = () => (
+  <FileUpload>
+    <CloudUpIcon aria-hidden='true' />
+    <FileUpload.Label>
+      Drop files or <span className='ds-link'>click to browse</span>
+    </FileUpload.Label>
+    <FileUpload.Description>
+      File must be in csv format and less than 2MB
+    </FileUpload.Description>
+  </FileUpload>
+);

From 50e66a84399605a9dcf68f6fa4f32cbd6db3a25f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oddbj=C3=B8rn=20=C3=98vernes?= <oddbjorn.overnes@gmail.com>
Date: Wed, 25 Feb 2026 09:49:32 +0100
Subject: [PATCH 06/14] test with Field

---
 packages/css/src/file-upload.css                |  6 ++----
 .../src/components/file-upload/file-upload.mdx  |  3 +++
 .../file-upload/file-upload.stories.tsx         | 17 +++++++++++++++++
 .../src/components/file-upload/file-upload.tsx  |  2 +-
 4 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/packages/css/src/file-upload.css b/packages/css/src/file-upload.css
index f8b176906f..6b2d4ada5d 100644
--- a/packages/css/src/file-upload.css
+++ b/packages/css/src/file-upload.css
@@ -1,4 +1,5 @@
-.ds-file-upload {
+/*double class to increase specificity above .ds-field*/
+.ds-file-upload.ds-file-upload {
   border: 2px dashed var(--ds-color-border-default);
   width: auto;
   border-radius: var(--ds-border-radius-md);
@@ -21,9 +22,6 @@
   > * + * {
     margin-top: var(--ds-size-4);
   }
-  input {
-    display: none;
-  }
   svg {
     color: var(--ds-color-text-subtle);
     height: var(--ds-size-8);
diff --git a/packages/react/src/components/file-upload/file-upload.mdx b/packages/react/src/components/file-upload/file-upload.mdx
index a793b58920..d5f3c3a6bf 100644
--- a/packages/react/src/components/file-upload/file-upload.mdx
+++ b/packages/react/src/components/file-upload/file-upload.mdx
@@ -13,4 +13,7 @@ import * as FileStories from './file-upload.stories';
 
 <Canvas of={FileStories.LinkAlt} />
 
+### Inside Field
+<Canvas of={FileStories.FieldTest} />
+
 
diff --git a/packages/react/src/components/file-upload/file-upload.stories.tsx b/packages/react/src/components/file-upload/file-upload.stories.tsx
index b3cd59207f..a4b931dee7 100644
--- a/packages/react/src/components/file-upload/file-upload.stories.tsx
+++ b/packages/react/src/components/file-upload/file-upload.stories.tsx
@@ -1,5 +1,6 @@
 import { CloudUpIcon } from '@navikt/aksel-icons';
 import type { Meta, StoryFn, StoryObj } from '@storybook/react-vite';
+import { Field, Label, ValidationMessage } from '../';
 import { FileUpload } from './';
 
 type Story = StoryObj<typeof FileUpload>;
@@ -67,3 +68,19 @@ export const LinkAlt: StoryFn<typeof FileUpload> = () => (
     </FileUpload.Description>
   </FileUpload>
 );
+
+export const FieldTest: StoryFn<typeof FileUpload> = () => (
+  <Field>
+    <Label>Upload files</Label>
+    <Field.Description>Some description</Field.Description>
+    <FileUpload>
+      <CloudUpIcon aria-hidden='true' />
+      <FileUpload.Label>Drop file here</FileUpload.Label>
+      <FileUpload.Description>
+        File must be in csv format and less than 2MB
+      </FileUpload.Description>
+      <FileUpload.Button>Upload file</FileUpload.Button>
+    </FileUpload>
+    <ValidationMessage>Invalid file format</ValidationMessage>
+  </Field>
+);
diff --git a/packages/react/src/components/file-upload/file-upload.tsx b/packages/react/src/components/file-upload/file-upload.tsx
index afaf7027e0..c7c547350b 100644
--- a/packages/react/src/components/file-upload/file-upload.tsx
+++ b/packages/react/src/components/file-upload/file-upload.tsx
@@ -30,7 +30,7 @@ export const FileUpload = forwardRef<HTMLLabelElement, FileUploadProps>(
     return (
       <label ref={ref} className={cl(`ds-file-upload`, className)} {...rest}>
         {children}
-        <input type='file' />
+        <input type='file' hidden />
       </label>
     );
   },

From 000c0a732c65f655ace34b1ab645bb86979e89d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oddbj=C3=B8rn=20=C3=98vernes?= <oddbjorn.overnes@gmail.com>
Date: Wed, 25 Feb 2026 10:49:49 +0100
Subject: [PATCH 07/14] keyboard focusable

---
 packages/css/src/file-upload.css                       | 10 ++++++++--
 .../react/src/components/file-upload/file-upload.tsx   |  2 +-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/css/src/file-upload.css b/packages/css/src/file-upload.css
index 6b2d4ada5d..bb863cdae6 100644
--- a/packages/css/src/file-upload.css
+++ b/packages/css/src/file-upload.css
@@ -1,4 +1,4 @@
-/*double class to increase specificity above .ds-field*/
+/*double class to increase specificity above .ds-field :is() (0.2.0 + order)*/
 .ds-file-upload.ds-file-upload {
   border: 2px dashed var(--ds-color-border-default);
   width: auto;
@@ -9,12 +9,18 @@
   flex-direction: column;
   align-items: center;
   background-color: var(--ds-color-surface-default);
+  @composes ds-print-preserve from './base.css';
+
+  &:focus-within {
+    @composes ds-focus--visible from './base.css';
+  }
+
   &:hover {
     border-style: solid;
     background-color: var(--ds-color-surface-tinted);
     cursor: pointer;
     .ds-button {
-      /*link or not link hover to button?*/
+      /*link hover to button*/
       --dsc-button-background: var(--dsc-button-background--hover);
       --dsc-button-color: var(--dsc-button-color--hover);
     }
diff --git a/packages/react/src/components/file-upload/file-upload.tsx b/packages/react/src/components/file-upload/file-upload.tsx
index c7c547350b..685894bf13 100644
--- a/packages/react/src/components/file-upload/file-upload.tsx
+++ b/packages/react/src/components/file-upload/file-upload.tsx
@@ -30,7 +30,7 @@ export const FileUpload = forwardRef<HTMLLabelElement, FileUploadProps>(
     return (
       <label ref={ref} className={cl(`ds-file-upload`, className)} {...rest}>
         {children}
-        <input type='file' hidden />
+        <input type='file' className='ds-sr-only' />
       </label>
     );
   },

From 0f227cc07a9b8dea7b9bc56700edfd8094205587 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oddbj=C3=B8rn=20=C3=98vernes?= <oddbjorn.overnes@gmail.com>
Date: Wed, 25 Feb 2026 15:21:18 +0100
Subject: [PATCH 08/14] rest should go to input

---
 .../components/file-upload/file-upload.tsx    | 25 +++++++++++++++----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/components/file-upload/file-upload.tsx b/packages/react/src/components/file-upload/file-upload.tsx
index 685894bf13..6871b4578d 100644
--- a/packages/react/src/components/file-upload/file-upload.tsx
+++ b/packages/react/src/components/file-upload/file-upload.tsx
@@ -5,7 +5,7 @@ import type { DefaultProps } from '../../types';
 import type { MergeRight } from '../../utilities';
 
 export type FileUploadProps = MergeRight<
-  DefaultProps & HTMLAttributes<HTMLLabelElement>,
+  DefaultProps & HTMLAttributes<HTMLInputElement>,
   {
     /** Instances of `FileUpload.Button`, `FileUpload.label` or other React nodes */
     children: ReactNode;
@@ -25,12 +25,27 @@ export type FileUploadProps = MergeRight<
  *    <FileUpload.Button>Upload file</FileUpload.Button>
  *  </FileUpload>
  */
-export const FileUpload = forwardRef<HTMLLabelElement, FileUploadProps>(
-  function FileUpload({ className, children, ...rest }, ref) {
+export const FileUpload = forwardRef<HTMLInputElement, FileUploadProps>(
+  function FileUpload(
+    {
+      className,
+      style,
+      'data-size': size,
+      'data-color': color,
+      children,
+      ...rest
+    },
+    ref,
+  ) {
     return (
-      <label ref={ref} className={cl(`ds-file-upload`, className)} {...rest}>
+      <label
+        className={cl(`ds-file-upload`, className)}
+        style={style}
+        data-size={size}
+        data-color={color}
+      >
         {children}
-        <input type='file' className='ds-sr-only' />
+        <input ref={ref} type='file' className='ds-sr-only' {...rest} />
       </label>
     );
   },

From 52fb1e7262100c1bf948b0dfc2b717bf4d1948cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oddbj=C3=B8rn=20=C3=98vernes?= <oddbjorn.overnes@gmail.com>
Date: Wed, 25 Feb 2026 15:35:13 +0100
Subject: [PATCH 09/14] change the prop-delegation cabal

---
 packages/css/src/file-upload.css              |  1 +
 .../components/file-upload/file-upload.mdx    |  1 -
 .../components/file-upload/file-upload.tsx    | 27 ++++++++++++++++---
 3 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/packages/css/src/file-upload.css b/packages/css/src/file-upload.css
index bb863cdae6..24c2cb010d 100644
--- a/packages/css/src/file-upload.css
+++ b/packages/css/src/file-upload.css
@@ -1,5 +1,6 @@
 /*double class to increase specificity above .ds-field :is() (0.2.0 + order)*/
 .ds-file-upload.ds-file-upload {
+  /*todo: component variables*/
   border: 2px dashed var(--ds-color-border-default);
   width: auto;
   border-radius: var(--ds-border-radius-md);
diff --git a/packages/react/src/components/file-upload/file-upload.mdx b/packages/react/src/components/file-upload/file-upload.mdx
index d5f3c3a6bf..3cd3d71ac8 100644
--- a/packages/react/src/components/file-upload/file-upload.mdx
+++ b/packages/react/src/components/file-upload/file-upload.mdx
@@ -16,4 +16,3 @@ import * as FileStories from './file-upload.stories';
 ### Inside Field
 <Canvas of={FileStories.FieldTest} />
 
-
diff --git a/packages/react/src/components/file-upload/file-upload.tsx b/packages/react/src/components/file-upload/file-upload.tsx
index 6871b4578d..d80b6b7949 100644
--- a/packages/react/src/components/file-upload/file-upload.tsx
+++ b/packages/react/src/components/file-upload/file-upload.tsx
@@ -5,10 +5,18 @@ import type { DefaultProps } from '../../types';
 import type { MergeRight } from '../../utilities';
 
 export type FileUploadProps = MergeRight<
-  DefaultProps & HTMLAttributes<HTMLInputElement>,
+  DefaultProps & HTMLAttributes<HTMLLabelElement>,
   {
-    /** Instances of `FileUpload.Button`, `FileUpload.label` or other React nodes */
+    /** Instances of `FileUpload.Button`, `FileUpload.Label`, `FileUpload.Description` or other React nodes */
     children: ReactNode;
+    /** File input accept attribute */
+    accept?: string;
+    /** Allow multiple file selection */
+    multiple?: boolean;
+    /** Disable file input */
+    disabled?: boolean;
+    /** Capture attribute for file input */
+    capture?: boolean | 'user' | 'environment';
   }
 >;
 
@@ -33,6 +41,10 @@ export const FileUpload = forwardRef<HTMLInputElement, FileUploadProps>(
       'data-size': size,
       'data-color': color,
       children,
+      accept,
+      multiple,
+      disabled,
+      capture,
       ...rest
     },
     ref,
@@ -43,9 +55,18 @@ export const FileUpload = forwardRef<HTMLInputElement, FileUploadProps>(
         style={style}
         data-size={size}
         data-color={color}
+        {...rest}
       >
         {children}
-        <input ref={ref} type='file' className='ds-sr-only' {...rest} />
+        <input
+          ref={ref}
+          type='file'
+          className='ds-sr-only'
+          accept={accept}
+          multiple={multiple}
+          disabled={disabled}
+          capture={capture}
+        />
       </label>
     );
   },

From aed55db9923ea0f6c54c16eae61982bb62199d6b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oddbj=C3=B8rn=20=C3=98vernes?= <oddbjorn.overnes@gmail.com>
Date: Thu, 26 Feb 2026 13:30:00 +0100
Subject: [PATCH 10/14] adding some state variants for development

---
 packages/css/src/file-upload.css              |  1 +
 .../components/file-upload/file-upload.mdx    |  6 ++
 .../file-upload/file-upload.stories.tsx       | 56 ++++++++++++++++++-
 .../components/file-upload/file-upload.tsx    |  4 ++
 4 files changed, 66 insertions(+), 1 deletion(-)

diff --git a/packages/css/src/file-upload.css b/packages/css/src/file-upload.css
index 24c2cb010d..02b481e887 100644
--- a/packages/css/src/file-upload.css
+++ b/packages/css/src/file-upload.css
@@ -10,6 +10,7 @@
   flex-direction: column;
   align-items: center;
   background-color: var(--ds-color-surface-default);
+  user-select: none;
   @composes ds-print-preserve from './base.css';
 
   &:focus-within {
diff --git a/packages/react/src/components/file-upload/file-upload.mdx b/packages/react/src/components/file-upload/file-upload.mdx
index 3cd3d71ac8..cc0ddea819 100644
--- a/packages/react/src/components/file-upload/file-upload.mdx
+++ b/packages/react/src/components/file-upload/file-upload.mdx
@@ -11,8 +11,14 @@ import * as FileStories from './file-upload.stories';
 
 <Canvas of={FileStories.Variants} />
 
+### Link variant
 <Canvas of={FileStories.LinkAlt} />
 
 ### Inside Field
 <Canvas of={FileStories.FieldTest} />
 
+### readOnly test
+<Canvas of={FileStories.ReadOnly} />
+
+### Disabled test
+<Canvas of={FileStories.Disabled} />
diff --git a/packages/react/src/components/file-upload/file-upload.stories.tsx b/packages/react/src/components/file-upload/file-upload.stories.tsx
index a4b931dee7..6c6ee64e42 100644
--- a/packages/react/src/components/file-upload/file-upload.stories.tsx
+++ b/packages/react/src/components/file-upload/file-upload.stories.tsx
@@ -72,7 +72,7 @@ export const LinkAlt: StoryFn<typeof FileUpload> = () => (
 export const FieldTest: StoryFn<typeof FileUpload> = () => (
   <Field>
     <Label>Upload files</Label>
-    <Field.Description>Some description</Field.Description>
+    <Field.Description>Inside Field</Field.Description>
     <FileUpload>
       <CloudUpIcon aria-hidden='true' />
       <FileUpload.Label>Drop file here</FileUpload.Label>
@@ -84,3 +84,57 @@ export const FieldTest: StoryFn<typeof FileUpload> = () => (
     <ValidationMessage>Invalid file format</ValidationMessage>
   </Field>
 );
+
+export const ReadOnly: StoryFn<typeof FileUpload> = () => (
+  <>
+    <Field>
+      <Label>Upload files</Label>
+      <Field.Description>Inside Field</Field.Description>
+      <FileUpload readOnly={true}>
+        <CloudUpIcon aria-hidden='true' />
+        <FileUpload.Label>Drop file here</FileUpload.Label>
+        <FileUpload.Description>
+          File must be in csv format and less than 2MB
+        </FileUpload.Description>
+        <FileUpload.Button>Upload file</FileUpload.Button>
+      </FileUpload>
+      <ValidationMessage>Invalid file format</ValidationMessage>
+    </Field>
+    <FileUpload readOnly={true}>
+      <CloudUpIcon aria-hidden='true' />
+      <FileUpload.Label>
+        Drop files or <span className='ds-link'>click to browse</span>
+      </FileUpload.Label>
+      <FileUpload.Description>
+        File must be in csv format and less than 2MB
+      </FileUpload.Description>
+    </FileUpload>
+  </>
+);
+
+export const Disabled: StoryFn<typeof FileUpload> = () => (
+  <>
+    <Field>
+      <Label>Upload files</Label>
+      <Field.Description>Inside Field</Field.Description>
+      <FileUpload disabled={true}>
+        <CloudUpIcon aria-hidden='true' />
+        <FileUpload.Label>Drop file here</FileUpload.Label>
+        <FileUpload.Description>
+          File must be in csv format and less than 2MB
+        </FileUpload.Description>
+        <FileUpload.Button>Upload file</FileUpload.Button>
+      </FileUpload>
+      <ValidationMessage>Invalid file format</ValidationMessage>
+    </Field>
+    <FileUpload disabled={true}>
+      <CloudUpIcon aria-hidden='true' />
+      <FileUpload.Label>
+        Drop files or <span className='ds-link'>click to browse</span>
+      </FileUpload.Label>
+      <FileUpload.Description>
+        File must be in csv format and less than 2MB
+      </FileUpload.Description>
+    </FileUpload>
+  </>
+);
diff --git a/packages/react/src/components/file-upload/file-upload.tsx b/packages/react/src/components/file-upload/file-upload.tsx
index d80b6b7949..4a5818f49a 100644
--- a/packages/react/src/components/file-upload/file-upload.tsx
+++ b/packages/react/src/components/file-upload/file-upload.tsx
@@ -15,6 +15,8 @@ export type FileUploadProps = MergeRight<
     multiple?: boolean;
     /** Disable file input */
     disabled?: boolean;
+    /** Readonly file input */
+    readOnly?: boolean;
     /** Capture attribute for file input */
     capture?: boolean | 'user' | 'environment';
   }
@@ -44,6 +46,7 @@ export const FileUpload = forwardRef<HTMLInputElement, FileUploadProps>(
       accept,
       multiple,
       disabled,
+      readOnly,
       capture,
       ...rest
     },
@@ -66,6 +69,7 @@ export const FileUpload = forwardRef<HTMLInputElement, FileUploadProps>(
           multiple={multiple}
           disabled={disabled}
           capture={capture}
+          readOnly={readOnly}
         />
       </label>
     );

From 29ab53992f32a3b3b593e0a136d238857455ab52 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oddbj=C3=B8rn=20=C3=98vernes?= <oddbjorn.overnes@gmail.com>
Date: Thu, 26 Feb 2026 14:36:59 +0100
Subject: [PATCH 11/14] suggested readonly style

---
 packages/css/src/file-upload.css | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/css/src/file-upload.css b/packages/css/src/file-upload.css
index 02b481e887..67add584b8 100644
--- a/packages/css/src/file-upload.css
+++ b/packages/css/src/file-upload.css
@@ -17,7 +17,8 @@
     @composes ds-focus--visible from './base.css';
   }
 
-  &:hover {
+  &:hover,
+  &:has([readonly]) {
     border-style: solid;
     background-color: var(--ds-color-surface-tinted);
     cursor: pointer;
@@ -27,6 +28,10 @@
       --dsc-button-color: var(--dsc-button-color--hover);
     }
   }
+  &:has([readonly]) {
+    cursor: not-allowed;
+  }
+
   > * + * {
     margin-top: var(--ds-size-4);
   }

From 7cd6b6cdc4d3a13e2018113b073707b2b7810ded Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oddbj=C3=B8rn=20=C3=98vernes?= <oddbjorn.overnes@gmail.com>
Date: Thu, 26 Feb 2026 14:37:22 +0100
Subject: [PATCH 12/14] wip working example

---
 .../src/components/file-upload/file-upload.mdx   |  2 ++
 .../file-upload/file-upload.stories.tsx          | 16 ++++++++++++++++
 2 files changed, 18 insertions(+)

diff --git a/packages/react/src/components/file-upload/file-upload.mdx b/packages/react/src/components/file-upload/file-upload.mdx
index cc0ddea819..048466c72b 100644
--- a/packages/react/src/components/file-upload/file-upload.mdx
+++ b/packages/react/src/components/file-upload/file-upload.mdx
@@ -8,6 +8,8 @@ import * as FileStories from './file-upload.stories';
 <Primary />
 <Controls />
 
+### working example
+<Canvas of={FileStories.WorkingExample} />
 
 <Canvas of={FileStories.Variants} />
 
diff --git a/packages/react/src/components/file-upload/file-upload.stories.tsx b/packages/react/src/components/file-upload/file-upload.stories.tsx
index 6c6ee64e42..d7da3a09f2 100644
--- a/packages/react/src/components/file-upload/file-upload.stories.tsx
+++ b/packages/react/src/components/file-upload/file-upload.stories.tsx
@@ -138,3 +138,19 @@ export const Disabled: StoryFn<typeof FileUpload> = () => (
     </FileUpload>
   </>
 );
+
+export const WorkingExample: StoryFn<typeof FileUpload> = () => {
+  return (
+    <div>
+      <FileUpload accept='.svg'>
+        <CloudUpIcon aria-hidden='true' />
+        <FileUpload.Label>Drop file here</FileUpload.Label>
+        <FileUpload.Description>
+          File must be in svg format
+        </FileUpload.Description>
+        <FileUpload.Button>Upload file</FileUpload.Button>
+      </FileUpload>
+      <ul>{/* list uploaded files */}</ul>
+    </div>
+  );
+};

From 9fc9e41f027db8d58ab52723dd58aa9944e66310 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oddbj=C3=B8rn=20=C3=98vernes?= <oddbjorn.overnes@gmail.com>
Date: Fri, 27 Feb 2026 09:08:53 +0100
Subject: [PATCH 13/14] functional example for testing

---
 .../components/file-upload/file-upload.mdx    |  2 +-
 .../file-upload/file-upload.stories.tsx       | 92 +++++++++++++++++--
 2 files changed, 83 insertions(+), 11 deletions(-)

diff --git a/packages/react/src/components/file-upload/file-upload.mdx b/packages/react/src/components/file-upload/file-upload.mdx
index 048466c72b..cb4d3edb19 100644
--- a/packages/react/src/components/file-upload/file-upload.mdx
+++ b/packages/react/src/components/file-upload/file-upload.mdx
@@ -8,7 +8,7 @@ import * as FileStories from './file-upload.stories';
 <Primary />
 <Controls />
 
-### working example
+### working example for testing
 <Canvas of={FileStories.WorkingExample} />
 
 <Canvas of={FileStories.Variants} />
diff --git a/packages/react/src/components/file-upload/file-upload.stories.tsx b/packages/react/src/components/file-upload/file-upload.stories.tsx
index d7da3a09f2..ff8ea525d4 100644
--- a/packages/react/src/components/file-upload/file-upload.stories.tsx
+++ b/packages/react/src/components/file-upload/file-upload.stories.tsx
@@ -1,6 +1,7 @@
-import { CloudUpIcon } from '@navikt/aksel-icons';
+import { CircleSlashIcon, CloudUpIcon } from '@navikt/aksel-icons';
 import type { Meta, StoryFn, StoryObj } from '@storybook/react-vite';
-import { Field, Label, ValidationMessage } from '../';
+import { type ChangeEvent, type DragEvent, useRef, useState } from 'react';
+import { Button, Field, Label, ValidationMessage } from '../';
 import { FileUpload } from './';
 
 type Story = StoryObj<typeof FileUpload>;
@@ -140,17 +141,88 @@ export const Disabled: StoryFn<typeof FileUpload> = () => (
 );
 
 export const WorkingExample: StoryFn<typeof FileUpload> = () => {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [uploadedFiles, setUploadedFiles] = useState<File[]>([]);
+  const [isDragging, setIsDragging] = useState(false);
+  const [isReadOnly, setIsReadOnly] = useState(false);
+
+  const addFiles = (files: FileList) => {
+    setUploadedFiles((prev) => [...prev, ...Array.from(files)]);
+    setIsReadOnly(true);
+  };
+
+  const handleDrop = (event: DragEvent<HTMLLabelElement>) => {
+    event.preventDefault();
+    setIsDragging(false);
+    if (event.dataTransfer.files.length > 0) {
+      addFiles(event.dataTransfer.files);
+    }
+  };
+
+  const handleChange = (event: ChangeEvent<HTMLLabelElement>) => {
+    const target = event.target;
+    if (!(target instanceof HTMLInputElement)) {
+      return;
+    }
+
+    if (target.files && target.files.length > 0) {
+      addFiles(target.files);
+    }
+  };
+
+  const handleReset = () => {
+    setUploadedFiles([]);
+    setIsReadOnly(false);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  };
+
   return (
     <div>
-      <FileUpload accept='.svg'>
-        <CloudUpIcon aria-hidden='true' />
-        <FileUpload.Label>Drop file here</FileUpload.Label>
-        <FileUpload.Description>
-          File must be in svg format
-        </FileUpload.Description>
-        <FileUpload.Button>Upload file</FileUpload.Button>
+      <FileUpload
+        ref={fileInputRef}
+        accept='.svg'
+        readOnly={isReadOnly}
+        onDragOver={(event) => {
+          event.preventDefault();
+          setIsDragging(true);
+        }}
+        onDragLeave={() => setIsDragging(false)}
+        onDrop={handleDrop}
+        onChange={handleChange}
+      >
+        {isReadOnly && (
+          <>
+            <CircleSlashIcon aria-hidden='true' />
+            <FileUpload.Label>You can not upload more files</FileUpload.Label>
+          </>
+        )}
+        {!isReadOnly && (
+          <>
+            <CloudUpIcon aria-hidden='true' />
+            <FileUpload.Label>
+              {isDragging ? 'Drop file to upload' : 'Drop file here'}
+            </FileUpload.Label>
+            <FileUpload.Description>
+              File must be in svg format
+            </FileUpload.Description>
+            <FileUpload.Button>Upload file</FileUpload.Button>
+          </>
+        )}
       </FileUpload>
-      <ul>{/* list uploaded files */}</ul>
+      {uploadedFiles.length > 0 && (
+        <>
+          <ul>
+            {uploadedFiles.map((file, index) => (
+              <li key={`${file.name}-${file.lastModified}-${index}`}>
+                {file.name}
+              </li>
+            ))}
+          </ul>
+          <Button onClick={handleReset}>Clear file</Button>
+        </>
+      )}
     </div>
   );
 };

From 9be26245ee8f065b910dc05678913347c6706e93 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oddbj=C3=B8rn=20=C3=98vernes?= <oddbjorn.overnes@gmail.com>
Date: Fri, 27 Feb 2026 09:16:54 +0100
Subject: [PATCH 14/14] wider

---
 .../react/src/components/file-upload/file-upload.stories.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/components/file-upload/file-upload.stories.tsx b/packages/react/src/components/file-upload/file-upload.stories.tsx
index ff8ea525d4..cf53b9f6dd 100644
--- a/packages/react/src/components/file-upload/file-upload.stories.tsx
+++ b/packages/react/src/components/file-upload/file-upload.stories.tsx
@@ -179,7 +179,7 @@ export const WorkingExample: StoryFn<typeof FileUpload> = () => {
   };
 
   return (
-    <div>
+    <div style={{ minWidth: 'max(50vw, 300px)' }}>
       <FileUpload
         ref={fileInputRef}
         accept='.svg'