From 1fc4d2c41f55b98eec5a01f9f7a6ad9becd6a4dc Mon Sep 17 00:00:00 2001
From: Nicolas T <nicolas@yapla.be>
Date: Tue, 17 Feb 2026 11:54:48 +0100
Subject: [PATCH] Add required prop to Upload component

---
 CHANGELOG.md                                  |  6 +++++
 .../antwerp-ui/react-components/package.json  |  2 +-
 .../src/lib/molecules/upload/Upload.spec.tsx  | 26 ++++++++++++++++---
 .../lib/molecules/upload/Upload.stories.jsx   |  8 ++++++
 .../src/lib/molecules/upload/Upload.tsx       |  4 ++-
 5 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 58f070e9..c46e42f4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## 7.11.2 - 2026-02-17
+
+### Added
+
+- `required` prop on Upload component
+
 ## 7.11.1 - 2026-01-07
 
 ### Fixed
diff --git a/packages/antwerp-ui/react-components/package.json b/packages/antwerp-ui/react-components/package.json
index 8ec98abe..14ad3414 100644
--- a/packages/antwerp-ui/react-components/package.json
+++ b/packages/antwerp-ui/react-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@a-ui/react",
-  "version": "7.11.0",
+  "version": "7.11.2",
   "license": "MIT",
   "main": "./index.js",
   "types": "./index.d.ts",
diff --git a/packages/antwerp-ui/react-components/src/lib/molecules/upload/Upload.spec.tsx b/packages/antwerp-ui/react-components/src/lib/molecules/upload/Upload.spec.tsx
index fd50a5de..79bab04f 100644
--- a/packages/antwerp-ui/react-components/src/lib/molecules/upload/Upload.spec.tsx
+++ b/packages/antwerp-ui/react-components/src/lib/molecules/upload/Upload.spec.tsx
@@ -71,17 +71,37 @@ describe('UI Components - Molecules - Upload', () => {
     expect(baseElement.getElementsByClassName('m-upload__error').length).toBe(0);
     expect(baseElement.getElementsByClassName('a-button--danger').length).toBe(0);
     rerender(
-      <Upload id="test-upload" onChange={onChangeMock} onDelete={() => {}} acceptedFormat="image/png" files={[mockFile, mockFileCSV]} />
+      <Upload
+        id="test-upload"
+        onChange={onChangeMock}
+        onDelete={() => {}}
+        acceptedFormat="image/png"
+        files={[mockFile, mockFileCSV]}
+      />
     );
     expect(baseElement.getElementsByClassName('m-upload__error').length).toBe(1);
     expect(getByText('Dit bestandsformaat is niet toegestaan.')).toBeTruthy();
     rerender(
-      <Upload id="test-upload" onChange={onChangeMock} onDelete={() => {}} acceptedFormat="image/*" files={[mockFile, mockFileCSV]} />
+      <Upload
+        id="test-upload"
+        onChange={onChangeMock}
+        onDelete={() => {}}
+        acceptedFormat="image/*"
+        files={[mockFile, mockFileCSV]}
+      />
     );
     expect(baseElement.getElementsByClassName('m-upload__error').length).toBe(1);
     expect(baseElement.getElementsByClassName('a-button--danger').length).toBe(1);
     expect(getByText('Dit bestandsformaat is niet toegestaan.')).toBeTruthy();
-    rerender(<Upload id="test-upload" onChange={onChangeMock} onDelete={() => {}} acceptedFormat="image/*" files={[mockFile]} />);
+    rerender(
+      <Upload
+        id="test-upload"
+        onChange={onChangeMock}
+        onDelete={() => {}}
+        acceptedFormat="image/*"
+        files={[mockFile]}
+      />
+    );
     expect(baseElement.getElementsByClassName('m-upload__error').length).toBe(0);
   });
 
diff --git a/packages/antwerp-ui/react-components/src/lib/molecules/upload/Upload.stories.jsx b/packages/antwerp-ui/react-components/src/lib/molecules/upload/Upload.stories.jsx
index 6bfabb23..0326f2d6 100644
--- a/packages/antwerp-ui/react-components/src/lib/molecules/upload/Upload.stories.jsx
+++ b/packages/antwerp-ui/react-components/src/lib/molecules/upload/Upload.stories.jsx
@@ -60,6 +60,14 @@ export default {
         defaultValue: { summary: true }
       }
     },
+    required: {
+      control: { type: 'boolean' },
+      description: 'Sets `required` attribute on `input`.',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false }
+      }
+    },
     disabled: {
       control: { type: 'boolean' },
       description: 'Disables the input.',
diff --git a/packages/antwerp-ui/react-components/src/lib/molecules/upload/Upload.tsx b/packages/antwerp-ui/react-components/src/lib/molecules/upload/Upload.tsx
index 4c6a06ef..8ac4d6b3 100644
--- a/packages/antwerp-ui/react-components/src/lib/molecules/upload/Upload.tsx
+++ b/packages/antwerp-ui/react-components/src/lib/molecules/upload/Upload.tsx
@@ -16,6 +16,7 @@ export function Upload({
   maxSizeLabel = 'Maximale bestandsgrootte:',
   hideMaxSizeLabel = false,
   multiple = true,
+  required = false,
   onChange,
   onDelete,
   sizeErrorLabel = 'Maximale bestandsgrootte overschreden.',
@@ -53,6 +54,7 @@ export function Upload({
             id={id}
             type="file"
             multiple={multiple}
+            required={required}
             onChange={handleChange}
             accept={acceptedFormat}
             className="m-upload__input"
@@ -61,7 +63,7 @@ export function Upload({
           />
           <div className="m-upload__content">
             <label htmlFor={id} className="m-upload__message u-margin-bottom">
-              {label}
+              {label} {required && <span className="u-text-danger">*</span>}
             </label>
           </div>
         </div>