Add required prop to Upload component

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

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",

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);
   });
 

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.',

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>