From 309e91c6348f468ed5eedcf1657920fa31a3d4d0 Mon Sep 17 00:00:00 2001
From: Anneke Sinnema <mail@annekesinnema.nl>
Date: Wed, 7 Oct 2026 11:48:51 +0200
Subject: [PATCH] feat(#144): make form fields required by default

Signed-off-by: Anneke Sinnema <mail@annekesinnema.nl>
---
 .changeset/required-form-fields.md            |  8 ++
 packages/angular/.storybook/preview.ts        |  1 +
 .../lib/ui/checkbox/src/lib/hlm-checkbox.ts   | 17 +++++
 .../lib/ui/field/src/lib/hlm-field-label.ts   | 18 ++++-
 .../ui/field/src/lib/hlm-field-required.ts    | 46 ++++++++++++
 .../src/lib/ui/field/src/lib/hlm-field.css    |  9 +++
 .../lib/ui/field/src/lib/hlm-field.stories.ts | 61 +++++++++++++++
 .../src/lib/ui/field/src/lib/hlm-field.ts     | 19 ++++-
 .../src/lib/hlm-input-group-input.ts          |  2 +-
 .../src/lib/hlm-input-group-textarea.ts       |  2 +-
 .../lib/ui/input-otp/src/lib/hlm-input-otp.ts | 14 ++++
 .../lib/ui/input/src/lib/hlm-input.stories.ts | 38 ++++++++--
 .../src/lib/ui/input/src/lib/hlm-input.ts     | 15 +++-
 .../src/lib/hlm-native-select.ts              | 14 ++++
 .../ui/radio-group/src/lib/hlm-radio-group.ts |  4 +
 .../ui/select/src/lib/hlm-select-trigger.ts   | 14 ++++
 .../src/lib/ui/switch/src/lib/hlm-switch.ts   | 17 +++++
 .../textarea/src/lib/hlm-textarea.stories.ts  | 26 +++++--
 .../lib/ui/textarea/src/lib/hlm-textarea.ts   | 16 +++-
 packages/contracts/src/field.ts               | 10 ++-
 packages/contracts/src/index.ts               |  2 +-
 packages/react/.storybook/preview.ts          |  1 +
 .../src/components/ui/checkbox/checkbox.tsx   |  4 +
 .../src/components/ui/field/field-context.ts  | 19 +++++
 .../src/components/ui/field/field.module.css  |  8 ++
 .../src/components/ui/field/field.stories.tsx | 59 +++++++++++++++
 .../react/src/components/ui/field/field.tsx   | 56 +++++++++++---
 .../src/components/ui/input-otp/input-otp.tsx |  4 +
 .../src/components/ui/input/input.stories.tsx | 28 ++++++-
 .../react/src/components/ui/input/input.tsx   |  4 +
 .../ui/native-select/native-select.tsx        | 11 ++-
 .../components/ui/radio-group/radio-group.tsx |  4 +
 .../react/src/components/ui/select/select.tsx |  4 +
 .../react/src/components/ui/switch/switch.tsx |  4 +
 .../ui/textarea/textarea.stories.tsx          | 28 ++++++-
 .../src/components/ui/textarea/textarea.tsx   | 12 ++-
 .../04-validatie-van-formulieren.mdx          |  2 +-
 .../05-verplichte-en-optionele-velden.mdx     | 75 +++++++++++++++++++
 ...deo-en-audio.mdx => 06-video-en-audio.mdx} |  0
 ...groting.mdx => 07-touch-en-vergroting.mdx} |  0
 .../01-overzicht.mdx                          |  0
 ...gankelijkheid-in-andere-design-systems.mdx |  0
 .../04-je-werk-testen/02-handmatig-testen.mdx |  4 +-
 .../30-validatie-van-formulieren.mdx          |  5 +-
 44 files changed, 639 insertions(+), 46 deletions(-)
 create mode 100644 .changeset/required-form-fields.md
 create mode 100644 packages/angular/src/lib/ui/field/src/lib/hlm-field-required.ts
 create mode 100644 packages/react/src/components/ui/field/field-context.ts
 create mode 100644 packages/storybook-config/docs/curve/02-voor-designers/05-verplichte-en-optionele-velden.mdx
 rename packages/storybook-config/docs/curve/02-voor-designers/{05-video-en-audio.mdx => 06-video-en-audio.mdx} (100%)
 rename packages/storybook-config/docs/curve/02-voor-designers/{06-touch-en-vergroting.mdx => 07-touch-en-vergroting.mdx} (100%)
 rename packages/storybook-config/docs/curve/02-voor-designers/{07-meer-leren => 08-meer-leren}/01-overzicht.mdx (100%)
 rename packages/storybook-config/docs/curve/02-voor-designers/{07-meer-leren => 08-meer-leren}/02-toegankelijkheid-in-andere-design-systems.mdx (100%)

diff --git a/.changeset/required-form-fields.md b/.changeset/required-form-fields.md
new file mode 100644
index 00000000..36da7823
--- /dev/null
+++ b/.changeset/required-form-fields.md
@@ -0,0 +1,8 @@
+---
+'@surfnet/curve-react': minor
+'@surfnet/curve-angular': minor
+---
+
+Form fields are now required by default. Input, Textarea, NativeSelect, Select, Checkbox, Switch, RadioGroup and InputOTP get `aria-required="true"` unless they sit in an optional field, so screen readers announce them as required. Mark the exceptions with `<Field optional>` (React) or `<div hlmField optional>` (Angular): the label then shows an "(optioneel)" suffix (override with `optionalText`) and the control drops `aria-required`. An explicit `aria-required` on a control still wins. This only affects what is announced, not validation.
+
+**Action needed:** add `optional` to the Fields in your forms that are not required, or they will be announced as required.
diff --git a/packages/angular/.storybook/preview.ts b/packages/angular/.storybook/preview.ts
index 5ccf13c9..e984f6bb 100644
--- a/packages/angular/.storybook/preview.ts
+++ b/packages/angular/.storybook/preview.ts
@@ -49,6 +49,7 @@ export default {
               'Toegankelijk ontwerpen',
               'Microcopy',
               'Validatie van formulieren',
+              'Verplichte en optionele velden',
               'Touch en vergroting',
               'Meer leren',
               ['Overzicht', 'Toegankelijkheid in andere design systems'],
diff --git a/packages/angular/src/lib/ui/checkbox/src/lib/hlm-checkbox.ts b/packages/angular/src/lib/ui/checkbox/src/lib/hlm-checkbox.ts
index 670ed721..50d6ebf9 100644
--- a/packages/angular/src/lib/ui/checkbox/src/lib/hlm-checkbox.ts
+++ b/packages/angular/src/lib/ui/checkbox/src/lib/hlm-checkbox.ts
@@ -20,6 +20,11 @@ import type { ChangeFn, TouchFn } from '@spartan-ng/brain/forms';
 import { HlmIcon } from '../../../icon/src';
 import { hlm } from '../../../utils/src';
 import type { ClassValue } from 'clsx';
+import {
+  ariaRequiredAttribute,
+  injectAriaRequired,
+  syncAriaRequired,
+} from '../../../field/src/lib/hlm-field-required';
 
 export const HLM_CHECKBOX_VALUE_ACCESSOR = {
   provide: NG_VALUE_ACCESSOR,
@@ -40,6 +45,7 @@ export const HLM_CHECKBOX_VALUE_ACCESSOR = {
     'data-slot': 'checkbox',
     '[attr.aria-label]': 'null',
     '[attr.aria-labelledby]': 'null',
+    '[attr.aria-required]': 'null',
     '[attr.data-disabled]': '_disabled() ? "" : null',
   },
   template: `
@@ -117,6 +123,17 @@ export class HlmCheckbox implements ControlValueAccessor {
 
   protected readonly _disabled = linkedSignal(this.disabled);
 
+  /** Explicit `aria-required`; when absent, the surrounding field decides (required by default). */
+  public readonly ariaRequiredOverride = input<boolean | undefined, unknown>(undefined, {
+    alias: 'aria-required',
+    transform: ariaRequiredAttribute,
+  });
+
+  constructor() {
+    // CURVE: required by default unless inside an optional field (issue #144).
+    syncAriaRequired('button[role="checkbox"]', injectAriaRequired(this.ariaRequiredOverride));
+  }
+
   private readonly _brnCheckbox = viewChild.required(BrnCheckbox);
 
   private readonly _spartanInvalid = computed(
diff --git a/packages/angular/src/lib/ui/field/src/lib/hlm-field-label.ts b/packages/angular/src/lib/ui/field/src/lib/hlm-field-label.ts
index 29d0560c..fb7e6488 100644
--- a/packages/angular/src/lib/ui/field/src/lib/hlm-field-label.ts
+++ b/packages/angular/src/lib/ui/field/src/lib/hlm-field-label.ts
@@ -1,13 +1,27 @@
-import { Directive } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, input } from '@angular/core';
 import { HlmLabel } from '../../../label/src';
 import { classes } from '../../../utils/src';
+import { HlmField } from './hlm-field';
 
-@Directive({
+@Component({
   selector: '[hlmFieldLabel],hlm-field-label',
   hostDirectives: [HlmLabel],
   host: { 'data-slot': 'field-label' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  // CURVE: "(optioneel)" suffix when the surrounding field is optional (issue #144).
+  template: `
+    <ng-content />
+    @if (_field?.optional()) {
+      <span data-slot="field-optional" class="curve-field-optional">{{ optionalText() }}</span>
+    }
+  `,
 })
 export class HlmFieldLabel {
+  protected readonly _field = inject(HlmField, { optional: true });
+
+  /** Suffix shown when the surrounding field is `optional`. */
+  public readonly optionalText = input('(optioneel)');
+
   constructor() {
     // Adds to hlmLabel's `curve-label`; `group/field-label` and `peer/field-label` stay as hooks.
     classes(() => 'curve-field-label group/field-label peer/field-label');
diff --git a/packages/angular/src/lib/ui/field/src/lib/hlm-field-required.ts b/packages/angular/src/lib/ui/field/src/lib/hlm-field-required.ts
new file mode 100644
index 00000000..a81794c5
--- /dev/null
+++ b/packages/angular/src/lib/ui/field/src/lib/hlm-field-required.ts
@@ -0,0 +1,46 @@
+import {
+  afterRenderEffect,
+  computed,
+  ElementRef,
+  inject,
+  Renderer2,
+  signal,
+  type Signal,
+} from '@angular/core';
+import { HlmField } from './hlm-field';
+
+// CURVE: fields are required by default (issue #144). Internal: not re-exported from the
+// field barrel, so `hlmField optional` stays the only public way to mark a field optional.
+
+/**
+ * `aria-required` for a form control: an explicit value wins, otherwise the surrounding
+ * `hlmField` decides (required unless `optional`). Returns `'true'` or `null` for `[attr.aria-required]`.
+ */
+export function injectAriaRequired(
+  own: Signal<boolean | undefined> = signal(undefined),
+): Signal<'true' | null> {
+  const field = inject(HlmField, { optional: true });
+  return computed(() => ((own() ?? !field?.optional()) ? 'true' : null));
+}
+
+/** Writes `aria-required` onto an element a Brain component renders inside this host. */
+export function syncAriaRequired(selector: string, value: Signal<'true' | null>): void {
+  const host = inject<ElementRef<HTMLElement>>(ElementRef);
+  const renderer = inject(Renderer2);
+  afterRenderEffect(() => {
+    const required = value();
+    const el = host.nativeElement.querySelector(selector);
+    if (!el) return;
+    if (required) {
+      renderer.setAttribute(el, 'aria-required', required);
+    } else {
+      renderer.removeAttribute(el, 'aria-required');
+    }
+  });
+}
+
+/** Parses an `aria-required` input; an absent value stays `undefined` so the Field default applies. */
+export function ariaRequiredAttribute(value: unknown): boolean | undefined {
+  if (value === undefined || value === null) return undefined;
+  return value !== false && value !== 'false';
+}
diff --git a/packages/angular/src/lib/ui/field/src/lib/hlm-field.css b/packages/angular/src/lib/ui/field/src/lib/hlm-field.css
index b9a4abfb..5baf103e 100644
--- a/packages/angular/src/lib/ui/field/src/lib/hlm-field.css
+++ b/packages/angular/src/lib/ui/field/src/lib/hlm-field.css
@@ -100,6 +100,15 @@
   line-height: 1.375;
 }
 
+/* "(optioneel)" suffix. Label gap is 8px; issue #144 asks for 4px to the label text. */
+.curve-field-optional {
+  margin-inline-start: calc(var(--spacing, 0.25rem) * -1);
+  font-size: 0.875rem;
+  line-height: 1;
+  font-weight: 400;
+  color: var(--muted-foreground);
+}
+
 .curve-field-label:has(:is([data-state='checked'], [data-checked]:not([data-checked='false']))) {
   border-color: color-mix(in oklab, var(--primary) 30%, transparent);
   background-color: color-mix(in oklab, var(--primary) 5%, transparent);
diff --git a/packages/angular/src/lib/ui/field/src/lib/hlm-field.stories.ts b/packages/angular/src/lib/ui/field/src/lib/hlm-field.stories.ts
index 33e700ff..25a911f4 100644
--- a/packages/angular/src/lib/ui/field/src/lib/hlm-field.stories.ts
+++ b/packages/angular/src/lib/ui/field/src/lib/hlm-field.stories.ts
@@ -37,9 +37,19 @@ const meta: Meta<HlmField> = {
         defaultValue: { summary: fieldContract.defaults.orientations },
       },
     },
+    optional: {
+      control: 'boolean',
+      description: fieldContract.props.necessities
+        .map((necessity) => `\`${necessity}\` — ${fieldContract.docs.necessities[necessity]}`)
+        .join('\n\n'),
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
   },
   args: {
     orientation: fieldContract.defaults.orientations,
+    optional: false,
   },
 };
 
@@ -119,3 +129,54 @@ export const Group: Story = {
 		`,
   }),
 };
+
+/**
+ * Fields are required by default. Mark the exception with `optional`: the label gets an
+ * "(optioneel)" suffix and the control loses `aria-required`.
+ */
+export const Optional: Story = {
+  render: () => ({
+    template: `
+			<div class="w-full max-w-md">
+				<div hlmField optional class="w-72">
+					<label hlmFieldLabel for="phone">Telefoonnummer</label>
+					<input hlmInput id="phone" type="tel" autocomplete="tel" />
+				</div>
+			</div>
+		`,
+  }),
+};
+
+/**
+ * Required and optional fields side by side. Only the optional ones are marked; `optionalText`
+ * swaps the suffix for an English form. A consent checkbox stays required, a newsletter one is optional.
+ */
+export const MixedForm: Story = {
+  render: () => ({
+    template: `
+			<div hlmFieldGroup class="w-72">
+				<div hlmField>
+					<label hlmFieldLabel for="mixed-name">Full name</label>
+					<input hlmInput id="mixed-name" autocomplete="name" />
+				</div>
+				<div hlmField>
+					<label hlmFieldLabel for="mixed-email">Email</label>
+					<input hlmInput id="mixed-email" type="email" autocomplete="email" />
+				</div>
+				<div hlmField optional>
+					<label hlmFieldLabel for="mixed-phone" optionalText="(optional)">Phone number</label>
+					<input hlmInput id="mixed-phone" type="tel" autocomplete="tel" />
+					<p hlmFieldDescription>Only used if we can't reach you by email.</p>
+				</div>
+				<div hlmField orientation="horizontal" optional>
+					<hlm-checkbox inputId="mixed-newsletter" />
+					<label hlmFieldLabel for="mixed-newsletter" optionalText="(optional)">Send me the newsletter</label>
+				</div>
+				<div hlmField orientation="horizontal">
+					<hlm-checkbox inputId="mixed-terms" />
+					<label hlmFieldLabel for="mixed-terms">I accept the terms of use</label>
+				</div>
+			</div>
+		`,
+  }),
+};
diff --git a/packages/angular/src/lib/ui/field/src/lib/hlm-field.ts b/packages/angular/src/lib/ui/field/src/lib/hlm-field.ts
index d186b8a8..5f98fc27 100644
--- a/packages/angular/src/lib/ui/field/src/lib/hlm-field.ts
+++ b/packages/angular/src/lib/ui/field/src/lib/hlm-field.ts
@@ -1,7 +1,8 @@
-import { Directive, input } from '@angular/core';
+import { booleanAttribute, Directive, input } from '@angular/core';
+import type { BooleanInput } from '@angular/cdk/coercion';
 import { BrnField } from '@spartan-ng/brain/field';
 import { classes } from '../../../utils/src';
-import type { FieldOrientationName } from '@surfnet/curve-contracts';
+import type { FieldNecessityName, FieldOrientationName } from '@surfnet/curve-contracts';
 
 const fieldOrientationClasses = {
   vertical: 'curve-field--vertical',
@@ -9,6 +10,13 @@ const fieldOrientationClasses = {
   responsive: 'curve-field--responsive',
 } satisfies Record<FieldOrientationName, string>;
 
+// CURVE: fields are required by default (issue #144). `optional` drives both the label's
+// "(optioneel)" suffix and the controls' `aria-required`.
+const fieldNecessityAttrs = {
+  required: null,
+  optional: 'true',
+} satisfies Record<FieldNecessityName, string | null>;
+
 export type FieldVariants = { orientation?: FieldOrientationName | null };
 
 @Directive({
@@ -19,11 +27,18 @@ export type FieldVariants = { orientation?: FieldOrientationName | null };
   host: {
     'data-slot': 'field',
     '[attr.data-orientation]': 'orientation()',
+    '[attr.data-optional]': '_optionalAttr()',
   },
 })
 export class HlmField {
   public readonly orientation = input<FieldVariants['orientation']>('vertical');
 
+  /** Mark this field optional. Fields are required by default. */
+  public readonly optional = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
+
+  protected readonly _optionalAttr = () =>
+    fieldNecessityAttrs[this.optional() ? 'optional' : 'required'];
+
   constructor() {
     // `group/field` stays as a hook for consumers' Tailwind.
     classes(() => [
diff --git a/packages/angular/src/lib/ui/input-group/src/lib/hlm-input-group-input.ts b/packages/angular/src/lib/ui/input-group/src/lib/hlm-input-group-input.ts
index 37bcd859..2b51b79b 100644
--- a/packages/angular/src/lib/ui/input-group/src/lib/hlm-input-group-input.ts
+++ b/packages/angular/src/lib/ui/input-group/src/lib/hlm-input-group-input.ts
@@ -4,7 +4,7 @@ import { classes } from '../../../utils/src';
 
 @Directive({
   selector: 'input[hlmInputGroupInput]',
-  hostDirectives: [HlmInput],
+  hostDirectives: [{ directive: HlmInput, inputs: ['aria-required'] }],
   host: { 'data-slot': 'input-group-control' },
 })
 export class HlmInputGroupInput {
diff --git a/packages/angular/src/lib/ui/input-group/src/lib/hlm-input-group-textarea.ts b/packages/angular/src/lib/ui/input-group/src/lib/hlm-input-group-textarea.ts
index f5764886..8a877df7 100644
--- a/packages/angular/src/lib/ui/input-group/src/lib/hlm-input-group-textarea.ts
+++ b/packages/angular/src/lib/ui/input-group/src/lib/hlm-input-group-textarea.ts
@@ -4,7 +4,7 @@ import { classes } from '../../../utils/src';
 
 @Directive({
   selector: 'textarea[hlmInputGroupTextarea]',
-  hostDirectives: [HlmTextarea],
+  hostDirectives: [{ directive: HlmTextarea, inputs: ['aria-required'] }],
   host: { 'data-slot': 'input-group-control' },
 })
 export class HlmInputGroupTextarea {
diff --git a/packages/angular/src/lib/ui/input-otp/src/lib/hlm-input-otp.ts b/packages/angular/src/lib/ui/input-otp/src/lib/hlm-input-otp.ts
index 2283a5c0..fb84872a 100644
--- a/packages/angular/src/lib/ui/input-otp/src/lib/hlm-input-otp.ts
+++ b/packages/angular/src/lib/ui/input-otp/src/lib/hlm-input-otp.ts
@@ -1,6 +1,11 @@
 import { afterRenderEffect, Directive, ElementRef, inject, input, Renderer2 } from '@angular/core';
 import { BrnInputOtp } from '@spartan-ng/brain/input-otp';
 import { classes } from '../../../utils/src';
+import {
+  ariaRequiredAttribute,
+  injectAriaRequired,
+  syncAriaRequired,
+} from '../../../field/src/lib/hlm-field-required';
 
 @Directive({
   selector: 'brn-input-otp[hlmInputOtp], brn-input-otp[hlm]',
@@ -8,6 +13,7 @@ import { classes } from '../../../utils/src';
     'data-slot': 'input-otp',
     // Consume aria-label on the host so it can be forwarded to the inner <input>.
     '[attr.aria-label]': 'null',
+    '[attr.aria-required]': 'null',
   },
 })
 export class HlmInputOtp {
@@ -23,8 +29,16 @@ export class HlmInputOtp {
   /** Screen-reader announcement when every slot is filled, including after paste. */
   public readonly completeAnnouncement = input('Verification code complete');
 
+  /** Explicit `aria-required`; when absent, the surrounding field decides (required by default). */
+  public readonly ariaRequiredOverride = input<boolean | undefined, unknown>(undefined, {
+    alias: 'aria-required',
+    transform: ariaRequiredAttribute,
+  });
+
   constructor() {
     classes(() => 'curve-input-otp');
+    // CURVE: required by default unless inside an optional field (issue #144).
+    syncAriaRequired('input[data-slot="input-otp"]', injectAriaRequired(this.ariaRequiredOverride));
 
     afterRenderEffect(() => {
       const label = this.ariaLabel();
diff --git a/packages/angular/src/lib/ui/input/src/lib/hlm-input.stories.ts b/packages/angular/src/lib/ui/input/src/lib/hlm-input.stories.ts
index 9aa5b416..ebc2b609 100644
--- a/packages/angular/src/lib/ui/input/src/lib/hlm-input.stories.ts
+++ b/packages/angular/src/lib/ui/input/src/lib/hlm-input.stories.ts
@@ -8,16 +8,32 @@ import {
 import { argsToTemplate, type Meta, moduleMetadata, type StoryObj } from '@storybook/angular';
 import { inputContract } from '@surfnet/curve-contracts';
 import { HlmInput, HlmInputImports } from '..';
-import { HlmButton, HlmLabel } from '../../../../../public-api';
+import { HlmButton, HlmFieldImports, HlmLabel } from '../../../../../public-api';
 
-const meta: Meta<HlmInput> = {
+/** Native `<input>` attributes the stories expose as controls, on top of HlmInput's own inputs. */
+type InputArgs = HlmInput & {
+  type: string;
+  placeholder: string;
+  disabled: boolean;
+  /** Story-only: drives the wrapping `hlmField optional`. */
+  optional: boolean;
+};
+
+const meta: Meta<InputArgs> = {
   title: 'Components/Input',
   // Unverified: shadcn/ui WCAG 2.2 AA audit (thefrontkit, 2026).
   tags: ['a11y-minor'],
   component: HlmInput,
   decorators: [
     moduleMetadata({
-      imports: [HlmInputImports, HlmLabel, HlmButton, FormsModule, ReactiveFormsModule],
+      imports: [
+        HlmInputImports,
+        HlmFieldImports,
+        HlmLabel,
+        HlmButton,
+        FormsModule,
+        ReactiveFormsModule,
+      ],
     }),
   ],
   parameters: {
@@ -39,23 +55,33 @@ const meta: Meta<HlmInput> = {
     },
     placeholder: { control: 'text' },
     disabled: { control: 'boolean' },
+    optional: {
+      control: 'boolean',
+      description:
+        'Fields are required by default (`aria-required="true"`). Story control for the wrapping `hlmField optional`: the label gets "(optioneel)" and the control drops `aria-required`.',
+      table: { defaultValue: { summary: 'false' } },
+    },
   },
   args: {
     type: 'text',
     placeholder: 'Type something…',
     disabled: false,
+    optional: false,
   },
 };
 
 export default meta;
-type Story = StoryObj<HlmInput>;
+type Story = StoryObj<InputArgs>;
 
-/** The default input — tweak it via the controls. */
+/** The default input with its label — tweak it via the controls; toggle `optional` to see the label suffix. */
 export const Default: Story = {
   render: ({ ...args }) => ({
     props: args,
     template: `
-    	<input hlmInput type="text" class="w-72" ${argsToTemplate(args)} />
+			<div hlmField class="w-72" [optional]="optional">
+				<label hlmFieldLabel for="input-default">Naam</label>
+				<input hlmInput id="input-default" ${argsToTemplate(args, { exclude: ['optional'] })} />
+			</div>
     `,
   }),
 };
diff --git a/packages/angular/src/lib/ui/input/src/lib/hlm-input.ts b/packages/angular/src/lib/ui/input/src/lib/hlm-input.ts
index 97c6ca3b..d6b8bf9f 100644
--- a/packages/angular/src/lib/ui/input/src/lib/hlm-input.ts
+++ b/packages/angular/src/lib/ui/input/src/lib/hlm-input.ts
@@ -1,4 +1,8 @@
-import { Directive } from '@angular/core';
+import { Directive, input } from '@angular/core';
+import {
+  ariaRequiredAttribute,
+  injectAriaRequired,
+} from '../../../field/src/lib/hlm-field-required';
 import { BrnFieldControlDescribedBy } from '@spartan-ng/brain/field';
 import { BrnInput } from '@spartan-ng/brain/input';
 import { classes } from '../../../utils/src';
@@ -9,8 +13,17 @@ import { classes } from '../../../utils/src';
     { directive: BrnInput, inputs: ['id', 'forceInvalid'] },
     BrnFieldControlDescribedBy,
   ],
+  host: { '[attr.aria-required]': '_ariaRequired()' },
 })
 export class HlmInput {
+  /** Explicit `aria-required`; when absent, the surrounding field decides (required by default). */
+  public readonly ariaRequiredOverride = input<boolean | undefined, unknown>(undefined, {
+    alias: 'aria-required',
+    transform: ariaRequiredAttribute,
+  });
+
+  protected readonly _ariaRequired = injectAriaRequired(this.ariaRequiredOverride);
+
   constructor() {
     classes(() => 'curve-input');
   }
diff --git a/packages/angular/src/lib/ui/native-select/src/lib/hlm-native-select.ts b/packages/angular/src/lib/ui/native-select/src/lib/hlm-native-select.ts
index 6b99d810..231dafdd 100644
--- a/packages/angular/src/lib/ui/native-select/src/lib/hlm-native-select.ts
+++ b/packages/angular/src/lib/ui/native-select/src/lib/hlm-native-select.ts
@@ -16,6 +16,10 @@ import { phosphorCaretDown } from '@ng-icons/phosphor-icons/regular';
 import { BrnFieldControl, provideBrnLabelable } from '@spartan-ng/brain/field';
 import { type ChangeFn, type TouchFn } from '@spartan-ng/brain/forms';
 import { classes, hlm } from '../../../utils/src';
+import {
+  ariaRequiredAttribute,
+  injectAriaRequired,
+} from '../../../field/src/lib/hlm-field-required';
 import type { ClassValue } from 'clsx';
 import type { NativeSelectSizeName } from '@surfnet/curve-contracts';
 
@@ -38,6 +42,7 @@ export const HLM_NATIVE_SELECT_VALUE_ACCESSOR = {
   host: {
     'data-slot': 'native-select-wrapper',
     '[attr.data-size]': 'size()',
+    '[attr.aria-required]': 'null',
   },
   template: `
     <select
@@ -45,6 +50,7 @@ export const HLM_NATIVE_SELECT_VALUE_ACCESSOR = {
       [id]="selectId()"
       [class]="_computedSelectClass()"
       [attr.data-size]="size()"
+      [attr.aria-required]="_ariaRequired()"
       [attr.aria-invalid]="_ariaInvalid() ? 'true' : null"
       [attr.data-invalid]="_ariaInvalid() ? 'true' : null"
       [attr.data-dirty]="_dirty?.() ? 'true' : null"
@@ -102,6 +108,14 @@ export class HlmNativeSelect implements ControlValueAccessor {
     alias: 'aria-invalid',
   });
 
+  /** Explicit `aria-required`; when absent, the surrounding field decides (required by default). */
+  public readonly ariaRequiredOverride = input<boolean | undefined, unknown>(undefined, {
+    alias: 'aria-required',
+    transform: ariaRequiredAttribute,
+  });
+
+  protected readonly _ariaRequired = injectAriaRequired(this.ariaRequiredOverride);
+
   protected readonly _ariaInvalid = computed(() => this.ariaInvalidOverride() ?? this._invalid?.());
 
   public readonly valueInput = input<string | undefined | null>('', { alias: 'value' });
diff --git a/packages/angular/src/lib/ui/radio-group/src/lib/hlm-radio-group.ts b/packages/angular/src/lib/ui/radio-group/src/lib/hlm-radio-group.ts
index e3ef1db1..58abd837 100644
--- a/packages/angular/src/lib/ui/radio-group/src/lib/hlm-radio-group.ts
+++ b/packages/angular/src/lib/ui/radio-group/src/lib/hlm-radio-group.ts
@@ -3,6 +3,7 @@ import { BrnFieldControlDescribedBy } from '@spartan-ng/brain/field';
 import { BrnRadioGroup } from '@spartan-ng/brain/radio-group';
 import { classes } from '../../../utils/src';
 import type { ClassValue } from 'clsx';
+import { injectAriaRequired } from '../../../field/src/lib/hlm-field-required';
 
 @Directive({
   selector: '[hlmRadioGroup],hlm-radio-group',
@@ -16,6 +17,7 @@ import type { ClassValue } from 'clsx';
   ],
   host: {
     'data-slot': 'radio-group',
+    '[attr.aria-required]': '_ariaRequired()',
     '[attr.aria-invalid]': '_ariaInvalid() ? "true" : null',
     '[attr.data-invalid]': '_ariaInvalid() ? "true" : null',
     '[attr.data-dirty]': '_dirty() ? "true" : null',
@@ -25,6 +27,8 @@ import type { ClassValue } from 'clsx';
 export class HlmRadioGroup {
   public readonly userClass = input<ClassValue>('', { alias: 'class' });
   private readonly _brnRadioGroup = inject(BrnRadioGroup);
+  // CURVE: required by default unless inside an optional field (issue #144).
+  protected readonly _ariaRequired = injectAriaRequired();
   protected readonly _ariaInvalid = computed(() => this._brnRadioGroup.controlState?.()?.invalid);
 
   protected readonly _touched = computed(() => this._brnRadioGroup.controlState?.()?.touched);
diff --git a/packages/angular/src/lib/ui/select/src/lib/hlm-select-trigger.ts b/packages/angular/src/lib/ui/select/src/lib/hlm-select-trigger.ts
index d8378866..18e33259 100644
--- a/packages/angular/src/lib/ui/select/src/lib/hlm-select-trigger.ts
+++ b/packages/angular/src/lib/ui/select/src/lib/hlm-select-trigger.ts
@@ -13,12 +13,17 @@ import { BrnSelectTrigger } from '@spartan-ng/brain/select';
 import { hlm } from '../../../utils/src';
 import type { SelectTriggerSizeName } from '@surfnet/curve-contracts';
 import type { ClassValue } from 'clsx';
+import {
+  ariaRequiredAttribute,
+  injectAriaRequired,
+} from '../../../field/src/lib/hlm-field-required';
 
 @Component({
   selector: 'hlm-select-trigger',
   imports: [NgIcon, BrnSelectTrigger, BrnFieldControlDescribedBy],
   providers: [provideIcons({ phosphorCaretUpDown })],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { '[attr.aria-required]': 'null' },
   template: `
     <button
       brnSelectTrigger
@@ -28,6 +33,7 @@ import type { ClassValue } from 'clsx';
       [class]="_computedClass()"
       [attr.data-size]="size()"
       [attr.aria-label]="ariaLabel()"
+      [attr.aria-required]="_ariaRequired()"
       data-slot="select-trigger"
     >
       <ng-content />
@@ -48,6 +54,14 @@ export class HlmSelectTrigger {
 
   public readonly size = input<SelectTriggerSizeName>('default');
 
+  /** Explicit `aria-required`; when absent, the surrounding field decides (required by default). */
+  public readonly ariaRequiredOverride = input<boolean | undefined, unknown>(undefined, {
+    alias: 'aria-required',
+    transform: ariaRequiredAttribute,
+  });
+
+  protected readonly _ariaRequired = injectAriaRequired(this.ariaRequiredOverride);
+
   /** Whether to force the trigger into an invalid state. */
   public readonly forceInvalid = input<boolean, BooleanInput>(false, {
     transform: booleanAttribute,
diff --git a/packages/angular/src/lib/ui/switch/src/lib/hlm-switch.ts b/packages/angular/src/lib/ui/switch/src/lib/hlm-switch.ts
index 5ac8cda7..c04b2979 100644
--- a/packages/angular/src/lib/ui/switch/src/lib/hlm-switch.ts
+++ b/packages/angular/src/lib/ui/switch/src/lib/hlm-switch.ts
@@ -16,6 +16,11 @@ import { hlm } from '../../../utils/src';
 import type { ClassValue } from 'clsx';
 import type { SwitchSizeName } from '@surfnet/curve-contracts';
 import { HlmSwitchThumb } from './hlm-switch-thumb';
+import {
+  ariaRequiredAttribute,
+  injectAriaRequired,
+  syncAriaRequired,
+} from '../../../field/src/lib/hlm-field-required';
 
 export const HLM_SWITCH_VALUE_ACCESSOR = {
   provide: NG_VALUE_ACCESSOR,
@@ -33,6 +38,7 @@ export const HLM_SWITCH_VALUE_ACCESSOR = {
     '[attr.aria-label]': 'null',
     '[attr.aria-labelledby]': 'null',
     '[attr.aria-describedby]': 'null',
+    '[attr.aria-required]': 'null',
   },
   template: `
     <brn-switch
@@ -90,6 +96,17 @@ export class HlmSwitch implements ControlValueAccessor {
 
   protected readonly _disabled = linkedSignal(this.disabled);
 
+  /** Explicit `aria-required`; when absent, the surrounding field decides (required by default). */
+  public readonly ariaRequiredOverride = input<boolean | undefined, unknown>(undefined, {
+    alias: 'aria-required',
+    transform: ariaRequiredAttribute,
+  });
+
+  constructor() {
+    // CURVE: required by default unless inside an optional field (issue #144).
+    syncAriaRequired('button[role="switch"]', injectAriaRequired(this.ariaRequiredOverride));
+  }
+
   protected _onChange?: ChangeFn<boolean>;
   protected _onTouched?: TouchFn;
 
diff --git a/packages/angular/src/lib/ui/textarea/src/lib/hlm-textarea.stories.ts b/packages/angular/src/lib/ui/textarea/src/lib/hlm-textarea.stories.ts
index 19d729da..cdb54619 100644
--- a/packages/angular/src/lib/ui/textarea/src/lib/hlm-textarea.stories.ts
+++ b/packages/angular/src/lib/ui/textarea/src/lib/hlm-textarea.stories.ts
@@ -1,15 +1,19 @@
 import type { Meta, StoryObj } from '@storybook/angular';
 import { argsToTemplate, moduleMetadata } from '@storybook/angular';
 import { HlmTextarea, HlmTextareaImports } from '..';
+import { HlmFieldImports } from '../../../field/src';
 import { textareaContract } from '@surfnet/curve-contracts';
 import { FormGroup, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
 
-const meta: Meta<HlmTextarea> = {
+/** Story-only `optional` drives the wrapping `hlmField optional`. */
+type TextareaArgs = HlmTextarea & { placeholder: string; disabled: boolean; optional: boolean };
+
+const meta: Meta<TextareaArgs> = {
   title: 'Components/Textarea',
   component: HlmTextarea,
   decorators: [
     moduleMetadata({
-      imports: [HlmTextareaImports, ReactiveFormsModule],
+      imports: [HlmTextareaImports, HlmFieldImports, ReactiveFormsModule],
     }),
   ],
   parameters: {
@@ -26,22 +30,32 @@ const meta: Meta<HlmTextarea> = {
   argTypes: {
     placeholder: { control: 'text' },
     disabled: { control: 'boolean' },
+    optional: {
+      control: 'boolean',
+      description:
+        'Fields are required by default (`aria-required="true"`). Story control for the wrapping `hlmField optional`: the label gets "(optioneel)" and the control drops `aria-required`.',
+      table: { defaultValue: { summary: 'false' } },
+    },
   },
   args: {
     placeholder: 'Type something…',
     disabled: false,
+    optional: false,
   },
-} as Meta<HlmTextarea>;
+} as Meta<TextareaArgs>;
 
 export default meta;
-type Story = StoryObj<HlmTextarea>;
+type Story = StoryObj<TextareaArgs>;
 
-/** Default textarea — auto-sizes to content. */
+/** Default textarea with its label — auto-sizes to content; toggle `optional` to see the label suffix. */
 export const Default: Story = {
   render: (args) => ({
     props: args,
     template: `
-			<textarea hlmTextarea ${argsToTemplate(args)}></textarea>
+			<div hlmField class="w-72" [optional]="optional">
+				<label hlmFieldLabel for="textarea-default">Toelichting</label>
+				<textarea hlmTextarea id="textarea-default" ${argsToTemplate(args, { exclude: ['optional'] })}></textarea>
+			</div>
 		`,
   }),
 };
diff --git a/packages/angular/src/lib/ui/textarea/src/lib/hlm-textarea.ts b/packages/angular/src/lib/ui/textarea/src/lib/hlm-textarea.ts
index 2e0336a0..5fecd57d 100644
--- a/packages/angular/src/lib/ui/textarea/src/lib/hlm-textarea.ts
+++ b/packages/angular/src/lib/ui/textarea/src/lib/hlm-textarea.ts
@@ -1,4 +1,8 @@
-import { Directive } from '@angular/core';
+import { Directive, input } from '@angular/core';
+import {
+  ariaRequiredAttribute,
+  injectAriaRequired,
+} from '../../../field/src/lib/hlm-field-required';
 import { BrnFieldControlDescribedBy } from '@spartan-ng/brain/field';
 import { BrnTextarea } from '@spartan-ng/brain/textarea';
 import { classes } from '../../../utils/src';
@@ -9,9 +13,17 @@ import { classes } from '../../../utils/src';
     { directive: BrnTextarea, inputs: ['id', 'forceInvalid'] },
     BrnFieldControlDescribedBy,
   ],
-  host: { 'data-slot': 'textarea' },
+  host: { 'data-slot': 'textarea', '[attr.aria-required]': '_ariaRequired()' },
 })
 export class HlmTextarea {
+  /** Explicit `aria-required`; when absent, the surrounding field decides (required by default). */
+  public readonly ariaRequiredOverride = input<boolean | undefined, unknown>(undefined, {
+    alias: 'aria-required',
+    transform: ariaRequiredAttribute,
+  });
+
+  protected readonly _ariaRequired = injectAriaRequired(this.ariaRequiredOverride);
+
   constructor() {
     classes(() => 'curve-textarea');
   }
diff --git a/packages/contracts/src/field.ts b/packages/contracts/src/field.ts
index 457f103a..7c9ed27a 100644
--- a/packages/contracts/src/field.ts
+++ b/packages/contracts/src/field.ts
@@ -3,19 +3,27 @@ import { defineContract } from './define-contract.js';
 export const fieldContract = defineContract({
   props: {
     orientations: ['vertical', 'horizontal', 'responsive'],
+    necessities: ['required', 'optional'],
   },
   defaults: {
     orientations: 'vertical',
+    necessities: 'required',
   },
   docs: {
     description:
-      'A form-field wrapper that lays out a label, control, description, and error message.',
+      'A form-field wrapper that lays out a label, control, description, and error message. Fields are required by default; mark the exceptions with `optional`.',
     orientations: {
       vertical: 'Label stacked above the control — the default.',
       horizontal: 'Label beside the control — e.g. a checkbox row.',
       responsive: 'Stacks on narrow containers, switches to horizontal when space allows.',
     },
+    necessities: {
+      required: 'The default. The control gets `aria-required="true"`; the label shows no marker.',
+      optional:
+        'The label gets an "(optioneel)" suffix and the control no `aria-required`. Validation stays with the app.',
+    },
   },
 });
 
 export type FieldOrientationName = (typeof fieldContract.props.orientations)[number];
+export type FieldNecessityName = (typeof fieldContract.props.necessities)[number];
diff --git a/packages/contracts/src/index.ts b/packages/contracts/src/index.ts
index d001c896..776f5136 100644
--- a/packages/contracts/src/index.ts
+++ b/packages/contracts/src/index.ts
@@ -20,7 +20,7 @@ export { datePickerContract } from './date-picker.js';
 export { dialogContract } from './dialog.js';
 export { dropdownMenuContract, type DropdownMenuItemVariantName } from './dropdown-menu.js';
 export { emptyContract, type EmptyMediaVariantName } from './empty.js';
-export { fieldContract, type FieldOrientationName } from './field.js';
+export { fieldContract, type FieldNecessityName, type FieldOrientationName } from './field.js';
 export { hoverCardContract } from './hover-card.js';
 export { inputContract } from './input.js';
 export { inputGroupContract } from './input-group.js';
diff --git a/packages/react/.storybook/preview.ts b/packages/react/.storybook/preview.ts
index 7ed91d21..a28bac83 100644
--- a/packages/react/.storybook/preview.ts
+++ b/packages/react/.storybook/preview.ts
@@ -49,6 +49,7 @@ export default {
               'Toegankelijk ontwerpen',
               'Microcopy',
               'Validatie van formulieren',
+              'Verplichte en optionele velden',
               'Touch en vergroting',
               'Meer leren',
               ['Overzicht', 'Toegankelijkheid in andere design systems'],
diff --git a/packages/react/src/components/ui/checkbox/checkbox.tsx b/packages/react/src/components/ui/checkbox/checkbox.tsx
index 61ea54a0..567b8f8a 100644
--- a/packages/react/src/components/ui/checkbox/checkbox.tsx
+++ b/packages/react/src/components/ui/checkbox/checkbox.tsx
@@ -4,13 +4,17 @@ import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';
 import { CheckIcon } from '@phosphor-icons/react';
 
 import { cn } from '@/lib/utils';
+import { useAriaRequired } from '@/components/ui/field/field-context';
 
 import styles from './checkbox.module.css';
 
 function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
+  // CURVE: required by default unless inside <Field optional> (issue #144).
+  const ariaRequired = useAriaRequired(props['aria-required']);
   return (
     <CheckboxPrimitive.Root
       data-slot="checkbox"
+      aria-required={ariaRequired}
       className={cn(styles.checkbox, className)}
       {...props}
     >
diff --git a/packages/react/src/components/ui/field/field-context.ts b/packages/react/src/components/ui/field/field-context.ts
new file mode 100644
index 00000000..ecb3dc6d
--- /dev/null
+++ b/packages/react/src/components/ui/field/field-context.ts
@@ -0,0 +1,19 @@
+'use client';
+
+import { createContext, useContext } from 'react';
+import type { FieldNecessityName } from '@surfnet/curve-contracts';
+
+// CURVE: fields are required by default (issue #144). Internal: not re-exported from the
+// barrel, so `Field optional` stays the only public way to mark a field optional.
+export const FieldContext = createContext<{ necessity: FieldNecessityName } | null>(null);
+
+/** `true` unless inside a `<Field optional>`. Outside a Field: required. */
+export function useFieldRequired() {
+  return useContext(FieldContext)?.necessity !== 'optional';
+}
+
+/** `aria-required` for a form control: an explicit value wins, otherwise the Field decides. */
+export function useAriaRequired(own: React.AriaAttributes['aria-required']) {
+  const required = useFieldRequired();
+  return own ?? (required || undefined);
+}
diff --git a/packages/react/src/components/ui/field/field.module.css b/packages/react/src/components/ui/field/field.module.css
index 7c946f25..6ad5db38 100644
--- a/packages/react/src/components/ui/field/field.module.css
+++ b/packages/react/src/components/ui/field/field.module.css
@@ -105,6 +105,14 @@
 .fieldLabel > [data-slot='field'] {
   padding: calc(var(--spacing, 0.25rem) * 3);
 }
+.optional {
+  /* Label gap is 8px; issue #144 asks for 4px between label text and the suffix. */
+  margin-inline-start: calc(var(--spacing, 0.25rem) * -1);
+  font-size: 0.875rem;
+  line-height: 1;
+  font-weight: 400;
+  color: var(--muted-foreground);
+}
 
 .fieldTitle {
   display: flex;
diff --git a/packages/react/src/components/ui/field/field.stories.tsx b/packages/react/src/components/ui/field/field.stories.tsx
index 6cbb7f8f..35b6ec91 100644
--- a/packages/react/src/components/ui/field/field.stories.tsx
+++ b/packages/react/src/components/ui/field/field.stories.tsx
@@ -40,9 +40,19 @@ const meta = {
         defaultValue: { summary: fieldContract.defaults.orientations },
       },
     },
+    optional: {
+      control: 'boolean',
+      description: fieldContract.props.necessities
+        .map((necessity) => `\`${necessity}\` — ${fieldContract.docs.necessities[necessity]}`)
+        .join('\n\n'),
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
   },
   args: {
     orientation: fieldContract.defaults.orientations,
+    optional: false,
   },
 } satisfies Meta<typeof Field>;
 
@@ -98,3 +108,52 @@ export const Group: Story = {
     </FieldGroup>
   ),
 };
+
+/**
+ * Fields are required by default. Mark the exception with `optional`: the label gets an
+ * "(optioneel)" suffix and the control loses `aria-required`.
+ */
+export const Optional: Story = {
+  render: () => (
+    <Field optional className="w-72">
+      <FieldLabel htmlFor="phone">Telefoonnummer</FieldLabel>
+      <Input id="phone" type="tel" autoComplete="tel" />
+    </Field>
+  ),
+};
+
+/**
+ * Required and optional fields side by side. Only the optional ones are marked; `optionalText`
+ * swaps the suffix for an English form. A consent checkbox stays required, a newsletter one is optional.
+ */
+export const MixedForm: Story = {
+  render: () => (
+    <FieldGroup className="w-72">
+      <Field>
+        <FieldLabel htmlFor="mixed-name">Full name</FieldLabel>
+        <Input id="mixed-name" autoComplete="name" />
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="mixed-email">Email</FieldLabel>
+        <Input id="mixed-email" type="email" autoComplete="email" />
+      </Field>
+      <Field optional>
+        <FieldLabel htmlFor="mixed-phone" optionalText="(optional)">
+          Phone number
+        </FieldLabel>
+        <Input id="mixed-phone" type="tel" autoComplete="tel" />
+        <FieldDescription>Only used if we can't reach you by email.</FieldDescription>
+      </Field>
+      <Field orientation="horizontal" optional>
+        <Checkbox id="mixed-newsletter" />
+        <FieldLabel htmlFor="mixed-newsletter" optionalText="(optional)">
+          Send me the newsletter
+        </FieldLabel>
+      </Field>
+      <Field orientation="horizontal">
+        <Checkbox id="mixed-terms" />
+        <FieldLabel htmlFor="mixed-terms">I accept the terms of use</FieldLabel>
+      </Field>
+    </FieldGroup>
+  ),
+};
diff --git a/packages/react/src/components/ui/field/field.tsx b/packages/react/src/components/ui/field/field.tsx
index 3c7095f5..c96b85f8 100644
--- a/packages/react/src/components/ui/field/field.tsx
+++ b/packages/react/src/components/ui/field/field.tsx
@@ -1,12 +1,13 @@
 'use client';
 
 import { useMemo } from 'react';
-import type { FieldOrientationName } from '@surfnet/curve-contracts';
+import type { FieldNecessityName, FieldOrientationName } from '@surfnet/curve-contracts';
 
 import { cn } from '@/lib/utils';
 import { Label } from '@/components/ui/label';
 import { Separator } from '@/components/ui/separator';
 
+import { FieldContext, useFieldRequired } from './field-context';
 import styles from './field.module.css';
 
 function FieldSet({ className, ...props }: React.ComponentProps<'fieldset'>) {
@@ -32,6 +33,13 @@ function FieldGroup({ className, ...props }: React.ComponentProps<'div'>) {
   return <div data-slot="field-group" className={cn(styles.group, className)} {...props} />;
 }
 
+// CURVE: `Field optional` drives both the label's "(optioneel)" suffix and the controls'
+// `aria-required` (issue #144); see ./field-context.
+const fieldNecessityAttrs = {
+  required: undefined,
+  optional: 'true',
+} satisfies Record<FieldNecessityName, string | undefined>;
+
 export type FieldVariantsOptions = {
   orientation?: FieldOrientationName;
   className?: string;
@@ -44,17 +52,27 @@ function fieldVariants({ className }: FieldVariantsOptions = {}) {
 function Field({
   className,
   orientation = 'vertical',
+  optional = false,
   ...props
-}: React.ComponentProps<'div'> & FieldVariantsOptions) {
+}: React.ComponentProps<'div'> &
+  FieldVariantsOptions & {
+    /** Mark this field optional. Fields are required by default. */
+    optional?: boolean;
+  }) {
+  const necessity: FieldNecessityName = optional ? 'optional' : 'required';
+  const context = useMemo(() => ({ necessity }), [necessity]);
   // CURVE: a11y — no role="group" (upstream adds it): a single field isn't a group, and inside a
   // choice-card label it blanks the label's text for axe. Group fields with FieldSet instead.
   return (
-    <div
-      data-slot="field"
-      data-orientation={orientation}
-      className={fieldVariants({ orientation, className })}
-      {...props}
-    />
+    <FieldContext.Provider value={context}>
+      <div
+        data-slot="field"
+        data-orientation={orientation}
+        data-optional={fieldNecessityAttrs[necessity]}
+        className={fieldVariants({ orientation, className })}
+        {...props}
+      />
+    </FieldContext.Provider>
   );
 }
 
@@ -64,8 +82,26 @@ function FieldContent({ className, ...props }: React.ComponentProps<'div'>) {
   );
 }
 
-function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>) {
-  return <Label data-slot="field-label" className={cn(styles.fieldLabel, className)} {...props} />;
+function FieldLabel({
+  className,
+  children,
+  optionalText = '(optioneel)',
+  ...props
+}: React.ComponentProps<typeof Label> & {
+  /** Suffix shown when the surrounding Field is `optional`. */
+  optionalText?: React.ReactNode;
+}) {
+  const required = useFieldRequired();
+  return (
+    <Label data-slot="field-label" className={cn(styles.fieldLabel, className)} {...props}>
+      {children}
+      {!required && (
+        <span data-slot="field-optional" className={styles.optional}>
+          {optionalText}
+        </span>
+      )}
+    </Label>
+  );
 }
 
 function FieldTitle({ className, ...props }: React.ComponentProps<'div'>) {
diff --git a/packages/react/src/components/ui/input-otp/input-otp.tsx b/packages/react/src/components/ui/input-otp/input-otp.tsx
index 4ebb4976..6ad4d534 100644
--- a/packages/react/src/components/ui/input-otp/input-otp.tsx
+++ b/packages/react/src/components/ui/input-otp/input-otp.tsx
@@ -5,6 +5,7 @@ import { OTPInput, OTPInputContext } from 'input-otp';
 import { MinusIcon } from '@phosphor-icons/react';
 
 import { cn } from '@/lib/utils';
+import { useAriaRequired } from '@/components/ui/field/field-context';
 
 import styles from './input-otp.module.css';
 
@@ -22,6 +23,8 @@ function InputOTP({
   /** Screen-reader announcement when every slot is filled, including after paste. */
   completeAnnouncement?: string;
 }) {
+  // CURVE: required by default unless inside <Field optional> (issue #144).
+  const ariaRequired = useAriaRequired(props['aria-required']);
   const [uncontrolledValue, setUncontrolledValue] = React.useState(() =>
     typeof defaultValue === 'string' ? defaultValue : '',
   );
@@ -33,6 +36,7 @@ function InputOTP({
         data-slot="input-otp"
         containerClassName={cn(styles.container, containerClassName)}
         spellCheck={false}
+        aria-required={ariaRequired}
         className={cn(styles.input, className)}
         {...props}
         value={value}
diff --git a/packages/react/src/components/ui/input/input.stories.tsx b/packages/react/src/components/ui/input/input.stories.tsx
index b9025076..e7ca9175 100644
--- a/packages/react/src/components/ui/input/input.stories.tsx
+++ b/packages/react/src/components/ui/input/input.stories.tsx
@@ -1,8 +1,14 @@
+import type { ComponentProps } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { inputContract } from '@surfnet/curve-contracts';
 
+import { Field, FieldLabel } from '@/components/ui/field';
+
 import { Input } from './input';
 
+/** `optional` is a story-only arg: it drives the wrapping `<Field optional>`. */
+type InputArgs = ComponentProps<typeof Input> & { optional?: boolean };
+
 const meta = {
   title: 'Components/Input',
   // Unverified: shadcn/ui WCAG 2.2 AA audit (thefrontkit, 2026).
@@ -27,20 +33,34 @@ const meta = {
     },
     placeholder: { control: 'text' },
     disabled: { control: 'boolean' },
+    optional: {
+      control: 'boolean',
+      description:
+        'Fields are required by default (`aria-required="true"`). Story control for the wrapping `<Field optional>`: the label gets "(optioneel)" and the control drops `aria-required`.',
+      table: { defaultValue: { summary: 'false' } },
+    },
   },
   args: {
     type: 'text',
     placeholder: 'Type something…',
     disabled: false,
+    optional: false,
   },
-} satisfies Meta<typeof Input>;
+} satisfies Meta<InputArgs>;
 
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<InputArgs>;
 
-/** The default input — tweak it via the controls. */
-export const Default: Story = {};
+/** The default input with its label — tweak it via the controls; toggle `optional` to see the label suffix. */
+export const Default: Story = {
+  render: ({ optional, ...args }) => (
+    <Field optional={optional} className="w-72">
+      <FieldLabel htmlFor="input-default">Naam</FieldLabel>
+      <Input id="input-default" {...args} />
+    </Field>
+  ),
+};
 
 /** Common input types side by side. */
 export const Types: Story = {
diff --git a/packages/react/src/components/ui/input/input.tsx b/packages/react/src/components/ui/input/input.tsx
index eb1ad9ea..7772df55 100644
--- a/packages/react/src/components/ui/input/input.tsx
+++ b/packages/react/src/components/ui/input/input.tsx
@@ -4,13 +4,17 @@ import * as React from 'react';
 import { Input as InputPrimitive } from '@base-ui/react/input';
 
 import { cn } from '@/lib/utils';
+import { useAriaRequired } from '@/components/ui/field/field-context';
 
 import styles from './input.module.css';
 
 function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
+  // CURVE: required by default unless inside <Field optional> (issue #144).
+  const ariaRequired = useAriaRequired(props['aria-required']);
   return (
     <InputPrimitive
       type={type}
+      aria-required={ariaRequired}
       data-slot="input"
       className={cn(styles.input, className)}
       {...props}
diff --git a/packages/react/src/components/ui/native-select/native-select.tsx b/packages/react/src/components/ui/native-select/native-select.tsx
index 6b584ecf..50de6d07 100644
--- a/packages/react/src/components/ui/native-select/native-select.tsx
+++ b/packages/react/src/components/ui/native-select/native-select.tsx
@@ -5,6 +5,7 @@ import { CaretDownIcon } from '@phosphor-icons/react';
 import type { NativeSelectSizeName } from '@surfnet/curve-contracts';
 
 import { cn } from '@/lib/utils';
+import { useAriaRequired } from '@/components/ui/field/field-context';
 
 import styles from './native-select.module.css';
 
@@ -13,13 +14,21 @@ type NativeSelectProps = Omit<React.ComponentProps<'select'>, 'size'> & {
 };
 
 function NativeSelect({ className, size = 'default', ...props }: NativeSelectProps) {
+  // CURVE: required by default unless inside <Field optional> (issue #144).
+  const ariaRequired = useAriaRequired(props['aria-required']);
   return (
     <div
       className={cn(styles.wrapper, className)}
       data-slot="native-select-wrapper"
       data-size={size}
     >
-      <select data-slot="native-select" data-size={size} className={styles.select} {...props} />
+      <select
+        data-slot="native-select"
+        data-size={size}
+        aria-required={ariaRequired}
+        className={styles.select}
+        {...props}
+      />
       <CaretDownIcon className={styles.icon} aria-hidden="true" data-slot="native-select-icon" />
     </div>
   );
diff --git a/packages/react/src/components/ui/radio-group/radio-group.tsx b/packages/react/src/components/ui/radio-group/radio-group.tsx
index 639fb6aa..2f242036 100644
--- a/packages/react/src/components/ui/radio-group/radio-group.tsx
+++ b/packages/react/src/components/ui/radio-group/radio-group.tsx
@@ -4,13 +4,17 @@ import { Radio as RadioPrimitive } from '@base-ui/react/radio';
 import { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';
 
 import { cn } from '@/lib/utils';
+import { useAriaRequired } from '@/components/ui/field/field-context';
 
 import styles from './radio-group.module.css';
 
 function RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {
+  // CURVE: required by default unless inside <Field optional> (issue #144).
+  const ariaRequired = useAriaRequired(props['aria-required']);
   return (
     <RadioGroupPrimitive
       data-slot="radio-group"
+      aria-required={ariaRequired}
       className={cn(styles.group, className)}
       {...props}
     />
diff --git a/packages/react/src/components/ui/select/select.tsx b/packages/react/src/components/ui/select/select.tsx
index c40b0a13..7b9e144a 100644
--- a/packages/react/src/components/ui/select/select.tsx
+++ b/packages/react/src/components/ui/select/select.tsx
@@ -5,6 +5,7 @@ import { Select as SelectPrimitive } from '@base-ui/react/select';
 import type { SelectTriggerSizeName } from '@surfnet/curve-contracts';
 
 import { cn } from '@/lib/utils';
+import { useAriaRequired } from '@/components/ui/field/field-context';
 import { CaretUpDownIcon, CheckIcon, CaretUpIcon, CaretDownIcon } from '@phosphor-icons/react';
 
 import styles from './select.module.css';
@@ -39,9 +40,12 @@ function SelectTrigger({
 }: SelectPrimitive.Trigger.Props & {
   size?: SelectTriggerSizeName;
 }) {
+  // CURVE: required by default unless inside <Field optional> (issue #144).
+  const ariaRequired = useAriaRequired(props['aria-required']);
   return (
     <SelectPrimitive.Trigger
       data-slot="select-trigger"
+      aria-required={ariaRequired}
       data-size={size}
       className={cn(styles.trigger, className)}
       {...props}
diff --git a/packages/react/src/components/ui/switch/switch.tsx b/packages/react/src/components/ui/switch/switch.tsx
index 22fa4bbc..2ff33654 100644
--- a/packages/react/src/components/ui/switch/switch.tsx
+++ b/packages/react/src/components/ui/switch/switch.tsx
@@ -4,6 +4,7 @@ import { Switch as SwitchPrimitive } from '@base-ui/react/switch';
 import type { SwitchSizeName } from '@surfnet/curve-contracts';
 
 import { cn } from '@/lib/utils';
+import { useAriaRequired } from '@/components/ui/field/field-context';
 
 import styles from './switch.module.css';
 
@@ -14,9 +15,12 @@ function Switch({
 }: SwitchPrimitive.Root.Props & {
   size?: SwitchSizeName;
 }) {
+  // CURVE: required by default unless inside <Field optional> (issue #144).
+  const ariaRequired = useAriaRequired(props['aria-required']);
   return (
     <SwitchPrimitive.Root
       data-slot="switch"
+      aria-required={ariaRequired}
       data-size={size}
       className={cn(styles.switch, className)}
       {...props}
diff --git a/packages/react/src/components/ui/textarea/textarea.stories.tsx b/packages/react/src/components/ui/textarea/textarea.stories.tsx
index a35ef97a..30e1734c 100644
--- a/packages/react/src/components/ui/textarea/textarea.stories.tsx
+++ b/packages/react/src/components/ui/textarea/textarea.stories.tsx
@@ -1,8 +1,14 @@
+import type { ComponentProps } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { textareaContract } from '@surfnet/curve-contracts';
 
+import { Field, FieldLabel } from '@/components/ui/field';
+
 import { Textarea } from './textarea';
 
+/** `optional` is a story-only arg: it drives the wrapping `<Field optional>`. */
+type TextareaArgs = ComponentProps<typeof Textarea> & { optional?: boolean };
+
 const meta = {
   title: 'Components/Textarea',
   component: Textarea,
@@ -20,19 +26,33 @@ const meta = {
   argTypes: {
     placeholder: { control: 'text' },
     disabled: { control: 'boolean' },
+    optional: {
+      control: 'boolean',
+      description:
+        'Fields are required by default (`aria-required="true"`). Story control for the wrapping `<Field optional>`: the label gets "(optioneel)" and the control drops `aria-required`.',
+      table: { defaultValue: { summary: 'false' } },
+    },
   },
   args: {
     placeholder: 'Type something…',
     disabled: false,
+    optional: false,
   },
-} satisfies Meta<typeof Textarea>;
+} satisfies Meta<TextareaArgs>;
 
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<TextareaArgs>;
 
-/** Default textarea — auto-sizes to content. */
-export const Default: Story = {};
+/** Default textarea with its label — auto-sizes to content; toggle `optional` to see the label suffix. */
+export const Default: Story = {
+  render: ({ optional, ...args }) => (
+    <Field optional={optional} className="w-72">
+      <FieldLabel htmlFor="textarea-default">Toelichting</FieldLabel>
+      <Textarea id="textarea-default" {...args} />
+    </Field>
+  ),
+};
 
 /** Disabled state. */
 export const Disabled: Story = {
diff --git a/packages/react/src/components/ui/textarea/textarea.tsx b/packages/react/src/components/ui/textarea/textarea.tsx
index 0980ef36..01f9fe1f 100644
--- a/packages/react/src/components/ui/textarea/textarea.tsx
+++ b/packages/react/src/components/ui/textarea/textarea.tsx
@@ -1,11 +1,21 @@
 import * as React from 'react';
 
 import { cn } from '@/lib/utils';
+import { useAriaRequired } from '@/components/ui/field/field-context';
 
 import styles from './textarea.module.css';
 
 function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
-  return <textarea data-slot="textarea" className={cn(styles.textarea, className)} {...props} />;
+  // CURVE: required by default unless inside <Field optional> (issue #144).
+  const ariaRequired = useAriaRequired(props['aria-required']);
+  return (
+    <textarea
+      data-slot="textarea"
+      aria-required={ariaRequired}
+      className={cn(styles.textarea, className)}
+      {...props}
+    />
+  );
 }
 
 export { Textarea };
diff --git a/packages/storybook-config/docs/curve/02-voor-designers/04-validatie-van-formulieren.mdx b/packages/storybook-config/docs/curve/02-voor-designers/04-validatie-van-formulieren.mdx
index 10d403d6..f132b5d7 100644
--- a/packages/storybook-config/docs/curve/02-voor-designers/04-validatie-van-formulieren.mdx
+++ b/packages/storybook-config/docs/curve/02-voor-designers/04-validatie-van-formulieren.mdx
@@ -7,7 +7,7 @@ import { Meta } from '@storybook/addon-docs/blocks';
 Mensen maken typefouten, kiezen de verkeerde optie, of sturen een formulier te vroeg in. Een
 toegankelijk product straft dat niet af. Daarom is het belangrijk om de gebruiker te helpen bij het invullen van formulieren:
 
-- Toon de eisen _vóór_ het versturen: het datumformaat, de minimale lengte, wat niet verplicht is (maak standaard velden verplicht).
+- Toon de eisen _vóór_ het versturen: het datumformaat, de minimale lengte, wat niet verplicht is. Velden zijn standaard verplicht; markeer de uitzonderingen met "(optioneel)", zie [Verplichte en optionele velden](?path=/docs/curve-voor-designers--verplichte-en-optionele-velden).
 - Laat iemand een destructieve actie bevestigen ("Factuur 2026-104 verwijderen?"), en bied daarna een manier om terug te gaan als dat nog kan.
 - Bewaar wat er al is ingevuld als er iets misgaat. "Begin opnieuw" is geen herstel, het is straf.
 
diff --git a/packages/storybook-config/docs/curve/02-voor-designers/05-verplichte-en-optionele-velden.mdx b/packages/storybook-config/docs/curve/02-voor-designers/05-verplichte-en-optionele-velden.mdx
new file mode 100644
index 00000000..1e8813ff
--- /dev/null
+++ b/packages/storybook-config/docs/curve/02-voor-designers/05-verplichte-en-optionele-velden.mdx
@@ -0,0 +1,75 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Curve/Voor designers" name="Verplichte en optionele velden" />
+
+# Verplichte en optionele velden
+
+In Curve is elk formulierveld **standaard verplicht**. Alleen de uitzondering krijg je te zien:
+een optioneel veld heeft "(optioneel)" achter het label. Zo hoeft niemand een legenda met sterretjes
+te ontcijferen, en blijft het formulier rustig.
+
+## Vraag alleen wat je nodig hebt
+
+Elk veld kost tijd en aandacht, en voor iemand met een motorische beperking of een screenreader
+nog meer. Twijfel je of een veld optioneel moet zijn? Kijk dan eerst of het weg kan.
+
+- Heb je het antwoord nodig om de taak af te ronden? Dan is het veld verplicht.
+- Is het handig maar niet nodig? Overweeg het te schrappen, of vraag het later.
+- Blijft het toch staan? Markeer het als optioneel en leg in een beschrijving uit waarvoor je het
+  gebruikt ("Alleen als we je niet per e-mail kunnen bereiken").
+
+## Markeer de uitzondering, in tekst
+
+- Zet "(optioneel)" direct achter het label. In Curve is dat `text-sm`, `leading-none`, in
+  `muted-foreground`, met 4px afstand tot het label.
+- Gebruik geen sterretje (`*`) voor verplichte velden. Een sterretje moet uitgelegd worden, wordt
+  door screenreaders wisselend voorgelezen, en is voor veel mensen te klein.
+- Gebruik geen kleur alleen. Zie
+  [Status alleen in kleur](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--status-alleen-in-kleur).
+- Is _elk_ veld in een formulier optioneel? Zeg dat dan één keer bovenaan, in plaats van achter elk
+  label.
+
+## Keuzevelden
+
+- Een losse checkbox om akkoord te gaan ("Ik ga akkoord met de gebruiksvoorwaarden") is verplicht:
+  zonder vinkje kun je niet verder.
+- Een checkbox voor iets extra's ("Stuur me de nieuwsbrief") is optioneel. Markeer hem ook zo.
+- Bij een groep keuzes (radio's) gaat de markering op de groep, niet op elke optie.
+
+## Voorbeelden
+
+- [Optioneel veld](?path=/story/components-field--optional): één veld met "(optioneel)".
+- [Gemengd formulier](?path=/story/components-field--mixed-form): verplichte en optionele velden
+  door elkaar, inclusief een akkoord- en een nieuwsbrief-checkbox.
+
+## Voor developers
+
+`optional` staat op de `Field`. Het label krijgt dan het achtervoegsel, en het besturingselement
+verliest `aria-required`. Zonder `optional` (ook buiten een `Field`) krijgen Input, Textarea,
+NativeSelect, Select, Checkbox, Switch, RadioGroup en InputOTP `aria-required="true"`.
+
+```tsx
+// React
+<Field optional>
+  <FieldLabel htmlFor="tel">Telefoonnummer</FieldLabel>
+  <Input id="tel" type="tel" />
+</Field>
+```
+
+```html
+<!-- Angular -->
+<div hlmField optional>
+  <label hlmFieldLabel for="tel">Telefoonnummer</label>
+  <input hlmInput id="tel" type="tel" />
+</div>
+```
+
+- Engelstalig formulier? Geef `optionalText="(optional)"` mee aan het label.
+- Een expliciete `aria-required` op het besturingselement gaat altijd voor. Gebruik
+  `aria-required="false"` alleen voor een los veld zonder `Field`; in een `Field` is
+  `optional` de enige juiste manier, want alleen dan krijgt het label "(optioneel)".
+- `aria-required` vertelt alleen dat een veld verplicht is; het valideert niets. Controleer zelf,
+  met `Validators.required` of je schema, en geef een duidelijke foutmelding. Zie
+  [Onduidelijke validatie](?path=/docs/curve-voor-developers-wat-vaak-mis-gaat--onduidelijke-validatie).
+- De DatePicker opent met een knop, en een knop kan volgens ARIA niet verplicht zijn. Noem in de
+  beschrijving of foutmelding dat er een datum gekozen moet worden.
diff --git a/packages/storybook-config/docs/curve/02-voor-designers/05-video-en-audio.mdx b/packages/storybook-config/docs/curve/02-voor-designers/06-video-en-audio.mdx
similarity index 100%
rename from packages/storybook-config/docs/curve/02-voor-designers/05-video-en-audio.mdx
rename to packages/storybook-config/docs/curve/02-voor-designers/06-video-en-audio.mdx
diff --git a/packages/storybook-config/docs/curve/02-voor-designers/06-touch-en-vergroting.mdx b/packages/storybook-config/docs/curve/02-voor-designers/07-touch-en-vergroting.mdx
similarity index 100%
rename from packages/storybook-config/docs/curve/02-voor-designers/06-touch-en-vergroting.mdx
rename to packages/storybook-config/docs/curve/02-voor-designers/07-touch-en-vergroting.mdx
diff --git a/packages/storybook-config/docs/curve/02-voor-designers/07-meer-leren/01-overzicht.mdx b/packages/storybook-config/docs/curve/02-voor-designers/08-meer-leren/01-overzicht.mdx
similarity index 100%
rename from packages/storybook-config/docs/curve/02-voor-designers/07-meer-leren/01-overzicht.mdx
rename to packages/storybook-config/docs/curve/02-voor-designers/08-meer-leren/01-overzicht.mdx
diff --git a/packages/storybook-config/docs/curve/02-voor-designers/07-meer-leren/02-toegankelijkheid-in-andere-design-systems.mdx b/packages/storybook-config/docs/curve/02-voor-designers/08-meer-leren/02-toegankelijkheid-in-andere-design-systems.mdx
similarity index 100%
rename from packages/storybook-config/docs/curve/02-voor-designers/07-meer-leren/02-toegankelijkheid-in-andere-design-systems.mdx
rename to packages/storybook-config/docs/curve/02-voor-designers/08-meer-leren/02-toegankelijkheid-in-andere-design-systems.mdx
diff --git a/packages/storybook-config/docs/curve/03-voor-developers/04-je-werk-testen/02-handmatig-testen.mdx b/packages/storybook-config/docs/curve/03-voor-developers/04-je-werk-testen/02-handmatig-testen.mdx
index 5fbcc3da..c179e933 100644
--- a/packages/storybook-config/docs/curve/03-voor-developers/04-je-werk-testen/02-handmatig-testen.mdx
+++ b/packages/storybook-config/docs/curve/03-voor-developers/04-je-werk-testen/02-handmatig-testen.mdx
@@ -90,7 +90,9 @@ Bij formulieren kost een toegankelijkheidsfout echt geld, dus loop die een tweed
 - Fouten worden voorgelezen, niet alleen gekleurd. Na een mislukte verzending gaat de focus naar een
   zinnige plek en is de melding bereikbaar vanaf het veld waar hij bij hoort.
 - De fouttekst zegt wat je moet doen: "Vul een datum in als DD-MM-JJJJ", niet "Ongeldige invoer".
-- Verplichte velden zijn in tekst gemarkeerd, niet met kleur of een onverklaarde asterisk.
+- Optionele velden zijn in tekst gemarkeerd met "(optioneel)", niet met kleur of een onverklaarde
+  asterisk. Verplichte velden worden als "verplicht" voorgelezen. Zie
+  [Verplichte en optionele velden](?path=/docs/curve-voor-designers--verplichte-en-optionele-velden).
 - Niets hangt af van hoveren, en er gaat niets verloren als iemand er twintig minuten over doet.
 
 ## Een steekproef met een screenreader
diff --git a/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/30-validatie-van-formulieren.mdx b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/30-validatie-van-formulieren.mdx
index 57092ac8..02979b02 100644
--- a/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/30-validatie-van-formulieren.mdx
+++ b/packages/storybook-config/docs/curve/03-voor-developers/05-wat-vaak-mis-gaat/30-validatie-van-formulieren.mdx
@@ -67,7 +67,10 @@ Hoe je dat allemaal bouwt, ook met Curve-componenten, staat bij
 Mensen maken typefouten, kiezen de verkeerde optie, of sturen een formulier te vroeg in. Een
 toegankelijk product straft dat niet af.
 
-- Toon de eisen _vóór_ het versturen: het datumformaat, de minimale lengte, wat verplicht is.
+- Toon de eisen _vóór_ het versturen: het datumformaat, de minimale lengte, wat optioneel is.
+  Curve-velden zijn standaard verplicht en krijgen `aria-required`; dat wordt voorgelezen maar
+  valideert niets. Je hebt nog steeds `Validators.required` of je schema nodig. Zie
+  [Verplichte en optionele velden](?path=/docs/curve-voor-designers--verplichte-en-optionele-velden).
 - Houd de verzendknop bruikbaar. Een `disabled` knop zonder uitleg is een doodlopende weg.
 - Laat iemand een destructieve actie bevestigen ("Factuur 2026-104 verwijderen?"), en bied
   daarna een manier om terug te gaan als dat nog kan.