From 9fdd254d9ef010434eeea6dde90cae2c12fc6829 Mon Sep 17 00:00:00 2001
From: Robbert Broersma <git@robbertbroersma.nl>
Date: Tue, 5 Nov 2024 22:35:09 +0100
Subject: [PATCH 01/13] refactor: use NL Design System form components

---
 .../add/components/questions/RadioInput.tsx   |  22 ++--
 .../components/IncidentContactForm.tsx        | 107 ++++++++++++------
 src/components/index.ts                       |   9 ++
 src/components/ui/Form.tsx                    |  55 ++++-----
 translations/en.json                          |   9 +-
 translations/nl.json                          |   9 +-
 6 files changed, 126 insertions(+), 85 deletions(-)

diff --git a/src/app/[locale]/incident/add/components/questions/RadioInput.tsx b/src/app/[locale]/incident/add/components/questions/RadioInput.tsx
index 30ba54d..68d9aac 100644
--- a/src/app/[locale]/incident/add/components/questions/RadioInput.tsx
+++ b/src/app/[locale]/incident/add/components/questions/RadioInput.tsx
@@ -3,7 +3,13 @@ import { useTranslations } from 'next-intl'
 import { QuestionField } from '@/types/form'
 import { getValidators } from '@/lib/utils/form-validator'
 import { useFormContext } from 'react-hook-form'
-import { Paragraph } from '@/components/index'
+import {
+  Fieldset,
+  FieldsetLegend,
+  FormLabel,
+  Paragraph,
+  RadioButton,
+} from '@/components/index'
 
 interface RadioGroupProps extends QuestionField {}
 
@@ -17,12 +23,12 @@ export const RadioInput = ({ field }: RadioGroupProps) => {
   const errorMessage = errors[field.key]?.message as string
 
   return (
-    <fieldset aria-invalid={!!errorMessage} role="radiogroup">
-      <legend>
+    <Fieldset invalid={!!errorMessage} role="radiogroup">
+      <FieldsetLegend>
         {field.meta.label}{' '}
         <span> {field.required ? '' : `(${t('not_required_short')})`}</span>
         {field.meta.subtitle && <span>{field.meta.subtitle}</span>}
-      </legend>
+      </FieldsetLegend>
 
       {errorMessage && (
         <Paragraph
@@ -36,7 +42,7 @@ export const RadioInput = ({ field }: RadioGroupProps) => {
 
       {Object.keys(field.meta.values).map((key: string) => (
         <div key={key}>
-          <input
+          <RadioButton
             {...register(field.key, {
               ...getValidators(field, t),
             })}
@@ -45,11 +51,11 @@ export const RadioInput = ({ field }: RadioGroupProps) => {
             value={key}
             aria-describedby={errorMessage ? `${field.key}-error` : undefined}
           />
-          <label htmlFor={`${field.key}-${key}`}>
+          <FormLabel type="radio" htmlFor={`${field.key}-${key}`}>
             {field.meta.values[key]}
-          </label>
+          </FormLabel>
         </div>
       ))}
-    </fieldset>
+    </Fieldset>
   )
 }
diff --git a/src/app/[locale]/incident/contact/components/IncidentContactForm.tsx b/src/app/[locale]/incident/contact/components/IncidentContactForm.tsx
index 8da8d23..ada703d 100644
--- a/src/app/[locale]/incident/contact/components/IncidentContactForm.tsx
+++ b/src/app/[locale]/incident/contact/components/IncidentContactForm.tsx
@@ -20,10 +20,19 @@ import { Input } from '@/components/ui/Input'
 import { Checkbox } from '@/components/ui/Checkbox'
 import { useFormStore } from '@/store/form_store'
 import { useEffect } from 'react'
-import { Paragraph, Heading } from '@/components/index'
+import {
+  Fieldset,
+  FieldsetLegend,
+  FormFieldCheckbox,
+  FormFieldDescription,
+  FormFieldTextbox,
+  Heading,
+  Paragraph,
+} from '@/components/index'
 
 const IncidentContactForm = () => {
   const t = useTranslations('describe-contact.form')
+  const tGeneral = useTranslations('general.describe_form')
   const { updateForm, formState } = useFormStore()
   const { addOneStep, setLastCompletedStep } = useStepperStore()
   const router = useRouter()
@@ -65,17 +74,28 @@ const IncidentContactForm = () => {
     router.push('/incident/summary')
   }
 
+  const invalidTODO = false
+  const errorMessageTODO = ''
+
   return (
     <div>
       <Form {...form}>
+        <div className="flex flex-col gap-4">
+          <Heading level={2}>{t('heading')}</Heading>
+          <Paragraph>{t('description')}</Paragraph>
+        </div>
         <form
           onSubmit={form.handleSubmit(onSubmit)}
           className="flex flex-col gap-8 items-start"
         >
-          <div className="flex flex-col gap-4">
-            <Heading level={2}>{t('heading')}</Heading>
-            <Paragraph>{t('description')}</Paragraph>
-          </div>
+          <FormFieldTextbox
+            label={t('describe_phone_input_heading')}
+            autoComplete="phone"
+            invalid={invalidTODO}
+            description={tGeneral('not-required')}
+            errorMessage={errorMessageTODO}
+            {...form.register('phone')}
+          />
           <FormField
             name={'phone'}
             control={form.control}
@@ -91,6 +111,15 @@ const IncidentContactForm = () => {
               </FormItem>
             )}
           />
+          <FormFieldTextbox
+            label={t('describe_mail_input_heading')}
+            type="email"
+            autoComplete="email"
+            invalid={invalidTODO}
+            description={tGeneral('not-required')}
+            errorMessage={errorMessageTODO}
+            {...form.register('email')}
+          />
           <FormField
             name={'email'}
             control={form.control}
@@ -106,34 +135,46 @@ const IncidentContactForm = () => {
               </FormItem>
             )}
           />
-          <div className="flex flex-col gap-4">
-            <Heading level={2}>{t('send_to_other_instance_heading')}</Heading>
-            <Paragraph>{t('send_to_other_instance_description')}</Paragraph>
-          </div>
-          <div className="bg-gray-200 w-full p-4">
-            <FormField
-              name={'sharing_allowed'}
-              control={form.control}
-              render={({ field, formState: { errors } }) => (
-                <FormItem
-                  error={errors.sharing_allowed}
-                  className="flex flex-row gap-4"
-                >
-                  <FormControl>
-                    <Checkbox
-                      {...field}
-                      checked={field.value}
-                      value={undefined}
-                      onCheckedChange={field.onChange}
-                    />
-                  </FormControl>
-                  <FormLabel className="font-normal">
-                    {t('describe_checkbox_input_description')}
-                  </FormLabel>
-                </FormItem>
-              )}
-            />
-          </div>
+          <Fieldset aria-describedby="todo-id">
+            <FieldsetLegend>
+              <Heading level={2}>{t('send_to_other_instance_heading')}</Heading>
+            </FieldsetLegend>
+            <div className="flex flex-col gap-4">
+              <FormFieldDescription id="todo-id">
+                <Paragraph>{t('send_to_other_instance_description')}</Paragraph>
+              </FormFieldDescription>
+              <div className="bg-gray-200 w-full p-4">
+                <FormFieldCheckbox
+                  label={t('describe_checkbox_input_description')}
+                  invalid={invalidTODO}
+                  errorMessage={errorMessageTODO}
+                  {...form.register('sharing_allowed')}
+                ></FormFieldCheckbox>
+                <FormField
+                  name={'sharing_allowed'}
+                  control={form.control}
+                  render={({ field, formState: { errors } }) => (
+                    <FormItem
+                      error={errors.sharing_allowed}
+                      className="flex flex-row gap-4"
+                    >
+                      <FormControl>
+                        <Checkbox
+                          {...field}
+                          checked={field.value}
+                          value={undefined}
+                          onCheckedChange={field.onChange}
+                        />
+                      </FormControl>
+                      <FormLabel className="font-normal">
+                        {t('describe_checkbox_input_description')}
+                      </FormLabel>
+                    </FormItem>
+                  )}
+                />
+              </div>
+            </div>
+          </Fieldset>
           <IncidentFormFooter />
         </form>
       </Form>
diff --git a/src/components/index.ts b/src/components/index.ts
index e6085be..f8fdb7b 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -5,9 +5,18 @@ export { Select, Container }
 
 export {
   Alert,
+  Fieldset,
+  FieldsetLegend,
+  FormField,
+  FormFieldCheckbox,
+  FormFieldDescription,
+  FormFieldErrorMessage,
+  FormFieldTextbox,
+  FormLabel,
   Heading,
   HeadingGroup,
   Link,
   Paragraph,
   PreHeading,
+  RadioButton,
 } from '@utrecht/component-library-react/dist/css-module'
diff --git a/src/components/ui/Form.tsx b/src/components/ui/Form.tsx
index b32a70b..27824f7 100644
--- a/src/components/ui/Form.tsx
+++ b/src/components/ui/Form.tsx
@@ -13,8 +13,13 @@ import {
   useFormContext,
 } from 'react-hook-form'
 
-import { cn } from '@/lib/utils/style'
-import { Label } from '@/components/ui/Label'
+import {
+  FormField as UtrechtFormField,
+  FormFieldDescription,
+  FormFieldErrorMessage,
+  FormLabel as UtrechtFormLabel,
+  Paragraph,
+} from '@/components/index'
 
 const Form = FormProvider
 
@@ -78,21 +83,12 @@ type FormItemProps = {
 } & React.HTMLAttributes<HTMLDivElement>
 
 const FormItem = React.forwardRef<HTMLDivElement, FormItemProps>(
-  ({ className, error, ...props }, ref) => {
+  ({ error, ...props }, ref) => {
     const id = React.useId()
 
     return (
       <FormItemContext.Provider value={{ id }}>
-        <div
-          ref={ref}
-          className={cn(
-            `flex flex-col items-start gap-4 ${
-              error ? 'border-l-4 border-l-error pl-4' : ''
-            }`,
-            className
-          )}
-          {...props}
-        />
+        <UtrechtFormField invalid={!!error} ref={ref} {...props} />
       </FormItemContext.Provider>
     )
   }
@@ -105,14 +101,7 @@ const FormLabel = React.forwardRef<
 >(({ className, ...props }, ref) => {
   const { error, formItemId } = useFormField()
 
-  return (
-    <Label
-      ref={ref}
-      className={cn(error && 'text-destructive', className)}
-      htmlFor={formItemId}
-      {...props}
-    />
-  )
+  return <UtrechtFormLabel ref={ref} htmlFor={formItemId} {...props} />
 })
 FormLabel.displayName = 'FormLabel'
 const FormControl = React.forwardRef<
@@ -144,12 +133,9 @@ const FormDescription = React.forwardRef<
   const { formDescriptionId } = useFormField()
 
   return (
-    <p
-      ref={ref}
-      id={formDescriptionId}
-      className={cn('font-light text-light_text', className)}
-      {...props}
-    />
+    <FormFieldDescription>
+      <Paragraph ref={ref} id={formDescriptionId} {...props} />
+    </FormFieldDescription>
   )
 })
 FormDescription.displayName = 'FormDescription'
@@ -159,7 +145,7 @@ type FormMessageProps = {
 } & React.HTMLAttributes<HTMLParagraphElement>
 
 const FormMessage = React.forwardRef<HTMLParagraphElement, FormMessageProps>(
-  ({ className, customError, children, ...props }, ref) => {
+  ({ customError, children, ...props }, ref) => {
     const { error, formMessageId } = useFormField()
     const body = customError
       ? String(customError?.message)
@@ -172,14 +158,11 @@ const FormMessage = React.forwardRef<HTMLParagraphElement, FormMessageProps>(
     }
 
     return (
-      <p
-        ref={ref}
-        id={formMessageId}
-        className={cn('font-bold text-error mt-1', className)}
-        {...props}
-      >
-        {body}
-      </p>
+      <FormFieldErrorMessage>
+        <Paragraph ref={ref} id={formMessageId} {...props}>
+          {body}
+        </Paragraph>
+      </FormFieldErrorMessage>
     )
   }
 )
diff --git a/translations/en.json b/translations/en.json
index b5f3f7d..e279a9f 100644
--- a/translations/en.json
+++ b/translations/en.json
@@ -14,7 +14,7 @@
     "form": {
       "describe_textarea_heading": "What is it about?",
       "describe_textarea_description": "Do not type personal information in this description. We will ask this of you later in this form.",
-      "describe_upload_heading": "Add photos (not required)",
+      "describe_upload_heading": "Add photos",
       "describe_upload_description": "Add a photo to clarify the situation (maximum of 5 photos).",
       "errors": {
         "textarea_required": "This is a required field",
@@ -45,8 +45,8 @@
       "description": "Often we have another question. With this we can solve the problem faster or better. Or we want to explain something. We would then like to give you a call. Or else we e-mail you.\n\nWe only use your phone number and e-mail address for this report.",
       "send_to_other_instance_heading": "May we forward your report?",
       "send_to_other_instance_description": "Sometimes the municipality cannot do anything. Another organization must then get to work. If so, we can sometimes forward your report. We send your phone number or e-mail address along with it. But we only do that if you agree.",
-      "describe_phone_input_heading": "What is your telephone number? (not required)",
-      "describe_mail_input_heading": "What is your e-mail address? (not required)",
+      "describe_phone_input_heading": "What is your telephone number?",
+      "describe_mail_input_heading": "What is your e-mail address?",
       "describe_checkbox_input_description": "Yes, I give the Municipality of Amsterdam permission to forward my report to other organizations if the report is not intended for the Municipality.",
       "errors": {
         "number_not_valid": "Use a valid telephone number",
@@ -94,7 +94,8 @@
       "pre-heading": "Step {current} of {max}",
       "back_button": "Back",
       "next_button": "Next",
-      "submit_button": "Submit"
+      "submit_button": "Submit",
+      "not-required": "This field is not required."
     },
     "errors": {
       "required": "This field is required",
diff --git a/translations/nl.json b/translations/nl.json
index d834480..ca0a471 100644
--- a/translations/nl.json
+++ b/translations/nl.json
@@ -14,7 +14,7 @@
     "form": {
       "describe_textarea_heading": "Waar gaat het om?",
       "describe_textarea_description": "Typ geen persoonsgegevens in deze omschrijving. We vragen dit later in dit formulier aan u.",
-      "describe_upload_heading": "Foto's toevoegen (niet verplicht)",
+      "describe_upload_heading": "Foto's toevoegen",
       "describe_upload_description": "Voeg een foto toe om de situatie te verduidelijken (maximaal 5 foto's).",
       "errors": {
         "textarea_required": "Dit is een verplicht veld",
@@ -45,8 +45,8 @@
       "description": "Vaak hebben we nog een vraag. Daarmee kunnen we het probleem sneller of beter oplossen. Of we willen iets uitleggen. Wij willen u dan graag even bellen. Of anders e-mailen wij u.\n\nWij gebruiken uw telefoonnummer en e-mailadres alléén voor deze melding.",
       "send_to_other_instance_heading": "Mogen we uw melding doorsturen?",
       "send_to_other_instance_description": "Soms kan de gemeente niets doen. Een andere organisatie moet dan aan het werk. Als dat zo is kunnen wij uw melding soms doorsturen. Wij sturen uw telefoonnummer of e-mailadres mee. Maar dat doen we alleen als u dat goed vindt.",
-      "describe_phone_input_heading": "Wat is uw telefoonnummer? (niet verplicht)",
-      "describe_mail_input_heading": "Wat is uw e-mailadres? (niet verplicht)",
+      "describe_phone_input_heading": "Wat is uw telefoonnummer?",
+      "describe_mail_input_heading": "Wat is uw e-mailadres?",
       "describe_checkbox_input_description": "Ja, ik geef de gemeente Amsterdam toestemming om mijn melding door te sturen naar andere organisaties als de melding niet voor de gemeente is bestemd.",
       "errors": {
         "number_not_valid": "Gebruik een geldig telefoonnummer",
@@ -94,7 +94,8 @@
       "pre-heading": "Stap {current} van {max}",
       "back_button": "Vorige",
       "next_button": "Volgende",
-      "submit_button": "Verstuur"
+      "submit_button": "Verstuur",
+      "not-required": "Dit veld is niet verplicht."
     },
     "errors": {
       "required": "Dit veld is verplicht",

From 080a1959169839812e7247cffe95f21b7d1cd697 Mon Sep 17 00:00:00 2001
From: justian <justiandev@gmail.com>
Date: Wed, 6 Nov 2024 15:39:42 +0100
Subject: [PATCH 02/13] refactor: use NLDS components for contact form instead
 of radix components

---
 .../components/IncidentContactForm.tsx        | 144 ++++++------------
 1 file changed, 46 insertions(+), 98 deletions(-)

diff --git a/src/app/[locale]/incident/contact/components/IncidentContactForm.tsx b/src/app/[locale]/incident/contact/components/IncidentContactForm.tsx
index ada703d..e80276e 100644
--- a/src/app/[locale]/incident/contact/components/IncidentContactForm.tsx
+++ b/src/app/[locale]/incident/contact/components/IncidentContactForm.tsx
@@ -79,105 +79,53 @@ const IncidentContactForm = () => {
 
   return (
     <div>
-      <Form {...form}>
-        <div className="flex flex-col gap-4">
-          <Heading level={2}>{t('heading')}</Heading>
-          <Paragraph>{t('description')}</Paragraph>
-        </div>
-        <form
-          onSubmit={form.handleSubmit(onSubmit)}
-          className="flex flex-col gap-8 items-start"
-        >
-          <FormFieldTextbox
-            label={t('describe_phone_input_heading')}
-            autoComplete="phone"
-            invalid={invalidTODO}
-            description={tGeneral('not-required')}
-            errorMessage={errorMessageTODO}
-            {...form.register('phone')}
-          />
-          <FormField
-            name={'phone'}
-            control={form.control}
-            render={({ field, formState: { errors } }) => (
-              <FormItem error={errors.phone}>
-                <div>
-                  <FormLabel>{t('describe_phone_input_heading')}</FormLabel>
-                  <FormMessage />
-                </div>
-                <FormControl>
-                  <Input {...field} value={field.value!} />
-                </FormControl>
-              </FormItem>
-            )}
-          />
-          <FormFieldTextbox
-            label={t('describe_mail_input_heading')}
-            type="email"
-            autoComplete="email"
-            invalid={invalidTODO}
-            description={tGeneral('not-required')}
-            errorMessage={errorMessageTODO}
-            {...form.register('email')}
-          />
-          <FormField
-            name={'email'}
-            control={form.control}
-            render={({ field, formState: { errors } }) => (
-              <FormItem error={errors.email}>
-                <div>
-                  <FormLabel>{t('describe_mail_input_heading')}</FormLabel>
-                  <FormMessage />
-                </div>
-                <FormControl>
-                  <Input {...field} value={field.value!} />
-                </FormControl>
-              </FormItem>
-            )}
-          />
-          <Fieldset aria-describedby="todo-id">
-            <FieldsetLegend>
-              <Heading level={2}>{t('send_to_other_instance_heading')}</Heading>
-            </FieldsetLegend>
-            <div className="flex flex-col gap-4">
-              <FormFieldDescription id="todo-id">
-                <Paragraph>{t('send_to_other_instance_description')}</Paragraph>
-              </FormFieldDescription>
-              <div className="bg-gray-200 w-full p-4">
-                <FormFieldCheckbox
-                  label={t('describe_checkbox_input_description')}
-                  invalid={invalidTODO}
-                  errorMessage={errorMessageTODO}
-                  {...form.register('sharing_allowed')}
-                ></FormFieldCheckbox>
-                <FormField
-                  name={'sharing_allowed'}
-                  control={form.control}
-                  render={({ field, formState: { errors } }) => (
-                    <FormItem
-                      error={errors.sharing_allowed}
-                      className="flex flex-row gap-4"
-                    >
-                      <FormControl>
-                        <Checkbox
-                          {...field}
-                          checked={field.value}
-                          value={undefined}
-                          onCheckedChange={field.onChange}
-                        />
-                      </FormControl>
-                      <FormLabel className="font-normal">
-                        {t('describe_checkbox_input_description')}
-                      </FormLabel>
-                    </FormItem>
-                  )}
-                />
-              </div>
+      <div className="flex flex-col gap-4">
+        <Heading level={2}>{t('heading')}</Heading>
+        <Paragraph>{t('description')}</Paragraph>
+      </div>
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="flex flex-col gap-8 items-start"
+      >
+        <FormFieldTextbox
+          label={t('describe_phone_input_heading')}
+          autoComplete="phone"
+          errorMessage={form.formState.errors.phone?.message}
+          invalid={Boolean(form.formState.errors.phone?.message)}
+          description={tGeneral('not-required')}
+          {...form.register('phone')}
+        />
+        <FormFieldTextbox
+          label={t('describe_mail_input_heading')}
+          type="email"
+          autoComplete="email"
+          errorMessage={form.formState.errors.email?.message}
+          invalid={Boolean(form.formState.errors.email?.message)}
+          description={tGeneral('not-required')}
+          {...form.register('email')}
+        />
+        <Fieldset aria-describedby="todo-id">
+          <FieldsetLegend>
+            <Heading level={2}>{t('send_to_other_instance_heading')}</Heading>
+          </FieldsetLegend>
+          <div className="flex flex-col gap-4">
+            <FormFieldDescription id="todo-id">
+              <Paragraph>{t('send_to_other_instance_description')}</Paragraph>
+            </FormFieldDescription>
+            <div className="bg-gray-200 w-full p-4">
+              <FormFieldCheckbox
+                label={t('describe_checkbox_input_description')}
+                errorMessage={form.formState.errors.sharing_allowed?.message}
+                invalid={Boolean(
+                  form.formState.errors.sharing_allowed?.message
+                )}
+                {...form.register('sharing_allowed')}
+              ></FormFieldCheckbox>
             </div>
-          </Fieldset>
-          <IncidentFormFooter />
-        </form>
-      </Form>
+          </div>
+        </Fieldset>
+        <IncidentFormFooter />
+      </form>
     </div>
   )
 }

From fd0a892c9e0b659d7538a3a786019c771463b392 Mon Sep 17 00:00:00 2001
From: justian <justiandev@gmail.com>
Date: Wed, 6 Nov 2024 15:58:28 +0100
Subject: [PATCH 03/13] refactor: use NLDS form field text area in dynamic form

---
 .../components/questions/TextAreaInput.tsx    | 28 ++++++-------------
 .../components/IncidentDescriptionForm.tsx    |  4 ++-
 .../components/IncidentContactForm.tsx        | 13 ---------
 src/components/index.ts                       |  1 +
 4 files changed, 13 insertions(+), 33 deletions(-)

diff --git a/src/app/[locale]/incident/add/components/questions/TextAreaInput.tsx b/src/app/[locale]/incident/add/components/questions/TextAreaInput.tsx
index bc2a4d8..179f686 100644
--- a/src/app/[locale]/incident/add/components/questions/TextAreaInput.tsx
+++ b/src/app/[locale]/incident/add/components/questions/TextAreaInput.tsx
@@ -3,7 +3,7 @@ import { useTranslations } from 'next-intl'
 import { getValidators } from '@/lib/utils/form-validator'
 import React from 'react'
 import { useFormContext } from 'react-hook-form'
-import { Paragraph } from '@/components/index'
+import { FormFieldTextarea } from '@/components/index'
 
 interface TextAreaInputProps extends QuestionField {}
 
@@ -17,30 +17,20 @@ export const TextAreaInput = ({ field }: TextAreaInputProps) => {
 
   return (
     <div className="flex flex-col gap-2">
-      {errorMessage && (
-        <Paragraph
-          id={`${field.key}-error`}
-          aria-live="assertive"
-          style={{ color: 'red' }}
-        >
-          {errorMessage}
-        </Paragraph>
-      )}
-      <label htmlFor={`${field.key}`}>
-        {field.meta.label}{' '}
-        <span> {field.required ? '' : `(${t('not_required_short')})`}</span>
-      </label>
-      {field.meta.subtitle && (
-        <span id={`${field.key}-${field.key}`}>{field.meta.subtitle}</span>
-      )}
-      <textarea
+      {/* TODO: implement (not required) for label*/}
+      <FormFieldTextarea
         {...register(field.key, getValidators(field, t))}
         rows={5}
-        placeholder={field.meta.placeholder ? field.meta.placeholder : ''}
+        description={field.meta.subtitle}
+        required={field.required}
         id={`${field.key}`}
+        label={field.meta.label}
         aria-describedby={
           field.meta.subtitle ? `${field.key}-${field.key}` : ''
         }
+        errorMessage={errorMessage}
+        placeholder={field.meta.placeholder ? field.meta.placeholder : ''}
+        invalid={Boolean(errorMessage)}
       />
     </div>
   )
diff --git a/src/app/[locale]/incident/components/IncidentDescriptionForm.tsx b/src/app/[locale]/incident/components/IncidentDescriptionForm.tsx
index 83e3ab3..6d3e595 100644
--- a/src/app/[locale]/incident/components/IncidentDescriptionForm.tsx
+++ b/src/app/[locale]/incident/components/IncidentDescriptionForm.tsx
@@ -28,7 +28,7 @@ import {
   MIN_FILE_SIZE,
 } from '@/components/ui/upload/FileUpload'
 
-import { FormFieldTextarea } from '@utrecht/component-library-react/dist/css-module'
+import { FormFieldTextarea } from '@/components/index'
 import { Label } from '@amsterdam/design-system-react'
 
 export const IncidentDescriptionForm = () => {
@@ -130,6 +130,8 @@ export const IncidentDescriptionForm = () => {
     form.setValue('files', updatedFiles)
   }
 
+  // TODO: in the best scenario we remove this Radix Form component completely, this is not needed anymore (but we should first refactor FileUpload FormField and Description FormField)
+
   return (
     <Form {...form}>
       <form
diff --git a/src/app/[locale]/incident/contact/components/IncidentContactForm.tsx b/src/app/[locale]/incident/contact/components/IncidentContactForm.tsx
index e80276e..26182c1 100644
--- a/src/app/[locale]/incident/contact/components/IncidentContactForm.tsx
+++ b/src/app/[locale]/incident/contact/components/IncidentContactForm.tsx
@@ -7,17 +7,7 @@ import { useRouter } from '@/routing/navigation'
 import * as z from 'zod'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/Form'
 import validator from 'validator'
-import { Input } from '@/components/ui/Input'
-import { Checkbox } from '@/components/ui/Checkbox'
 import { useFormStore } from '@/store/form_store'
 import { useEffect } from 'react'
 import {
@@ -74,9 +64,6 @@ const IncidentContactForm = () => {
     router.push('/incident/summary')
   }
 
-  const invalidTODO = false
-  const errorMessageTODO = ''
-
   return (
     <div>
       <div className="flex flex-col gap-4">
diff --git a/src/components/index.ts b/src/components/index.ts
index 688bd48..35bd84d 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -12,6 +12,7 @@ export {
   FormFieldDescription,
   FormFieldErrorMessage,
   FormFieldTextbox,
+  FormFieldTextarea,
   FormLabel,
   Heading,
   Button,

From adba921263c32c0a614d010f283521ffd1770b1d Mon Sep 17 00:00:00 2001
From: justian <justiandev@gmail.com>
Date: Wed, 6 Nov 2024 16:01:36 +0100
Subject: [PATCH 04/13] refactor: use NLDS form field text box in dynamic form

---
 .../add/components/questions/TextInput.tsx    | 32 ++++++-------------
 1 file changed, 10 insertions(+), 22 deletions(-)

diff --git a/src/app/[locale]/incident/add/components/questions/TextInput.tsx b/src/app/[locale]/incident/add/components/questions/TextInput.tsx
index e010577..e7125f0 100644
--- a/src/app/[locale]/incident/add/components/questions/TextInput.tsx
+++ b/src/app/[locale]/incident/add/components/questions/TextInput.tsx
@@ -4,6 +4,7 @@ import { useTranslations } from 'next-intl'
 import { getValidators } from '@/lib/utils/form-validator'
 import { useFormContext } from 'react-hook-form'
 import { Paragraph } from '@/components/index'
+import { FormFieldTextbox } from '@/components'
 
 interface TextInputProps extends QuestionField {}
 
@@ -17,30 +18,17 @@ export const TextInput = ({ field }: TextInputProps) => {
 
   return (
     <div className="flex flex-col gap-2">
-      {errorMessage && (
-        <Paragraph
-          id={`${field.key}-error`}
-          aria-live="assertive"
-          style={{ color: 'red' }}
-        >
-          {errorMessage}
-        </Paragraph>
-      )}
-      <label htmlFor={`${field.key}`}>
-        {field.meta.label}{' '}
-        <span> {field.required ? '' : `(${t('not_required_short')})`}</span>
-      </label>
-      {field.meta.subtitle && (
-        <span id={`${field.key}-${field.key}`}>{field.meta.subtitle}</span>
-      )}
-      <input
+      {/* TODO: implement (not required) for label*/}
+      <FormFieldTextbox
         {...register(field.key, getValidators(field, t))}
-        type="text"
-        placeholder={field.meta.placeholder ? field.meta.placeholder : ''}
+        label={field.meta.label}
+        required={field.required}
         id={`${field.key}`}
-        aria-describedby={
-          field.meta.subtitle ? `${field.key}-${field.key}` : ''
-        }
+        autoComplete="phone"
+        errorMessage={errorMessage}
+        placeholder={field.meta.placeholder ? field.meta.placeholder : ''}
+        invalid={Boolean(errorMessage)}
+        description={field.meta.subtitle}
       />
     </div>
   )

From 30a27089afd96ca77a1f2a04e8ffcfedbcb5b890 Mon Sep 17 00:00:00 2001
From: justian <justiandev@gmail.com>
Date: Wed, 6 Nov 2024 16:01:43 +0100
Subject: [PATCH 05/13] refactor: use NLDS form field text box in dynamic form

---
 src/app/[locale]/incident/add/components/questions/TextInput.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/[locale]/incident/add/components/questions/TextInput.tsx b/src/app/[locale]/incident/add/components/questions/TextInput.tsx
index e7125f0..e01eb17 100644
--- a/src/app/[locale]/incident/add/components/questions/TextInput.tsx
+++ b/src/app/[locale]/incident/add/components/questions/TextInput.tsx
@@ -3,7 +3,6 @@ import React from 'react'
 import { useTranslations } from 'next-intl'
 import { getValidators } from '@/lib/utils/form-validator'
 import { useFormContext } from 'react-hook-form'
-import { Paragraph } from '@/components/index'
 import { FormFieldTextbox } from '@/components'
 
 interface TextInputProps extends QuestionField {}

From bd9c18fe8a3e55e17542c043dc81ee65209ef5b8 Mon Sep 17 00:00:00 2001
From: justian <justiandev@gmail.com>
Date: Wed, 6 Nov 2024 16:04:01 +0100
Subject: [PATCH 06/13] refactor: use NLDS alert in dynamic form

---
 .../incident/add/components/questions/PlainText.tsx       | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/app/[locale]/incident/add/components/questions/PlainText.tsx b/src/app/[locale]/incident/add/components/questions/PlainText.tsx
index 18865d6..15370ff 100644
--- a/src/app/[locale]/incident/add/components/questions/PlainText.tsx
+++ b/src/app/[locale]/incident/add/components/questions/PlainText.tsx
@@ -1,17 +1,15 @@
 import { QuestionField } from '@/types/form'
 import Markdown from 'react-markdown'
+import { Alert } from '@utrecht/component-library-react/dist/css-module'
 
 interface PlainTextProps extends QuestionField {}
 
 export const PlainText = ({ field }: PlainTextProps) => {
   // TODO: Discuss if alert is the only used PlainText type in Signalen, style Markdown
   return field.meta.value ? (
-    <div
-      className="bg-red-100 rounded-lg p-4"
-      data-testid="plain-text-hard-stop"
-    >
+    <Alert type="error" data-testid="plain-text-hard-stop">
       <Markdown>{field.meta.value}</Markdown>
-    </div>
+    </Alert>
   ) : (
     <></>
   )

From cd951cc2a81c3d6f1c613ee645988f964dcafb2d Mon Sep 17 00:00:00 2001
From: justian <justiandev@gmail.com>
Date: Thu, 7 Nov 2024 12:21:26 +0100
Subject: [PATCH 07/13] refactor: use NLDS radio group in dynamic form

---
 package-lock.json                             | 24 ++++++++
 package.json                                  |  1 +
 .../add/components/questions/RadioInput.tsx   | 61 ++++++-------------
 .../add/components/questions/TextInput.tsx    |  1 -
 src/components/index.ts                       |  2 +
 5 files changed, 47 insertions(+), 42 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 147e2f3..3ecabee 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -51,6 +51,7 @@
         "@utrecht/component-library-css": "6.1.0",
         "@utrecht/component-library-react": "7.2.0",
         "@utrecht/design-tokens": "2.1.1",
+        "@utrecht/radio-group-react": "1.0.1",
         "@vitejs/plugin-react": "4.3.3",
         "autoprefixer": "10.4.20",
         "axios": "1.7.7",
@@ -3234,6 +3235,29 @@
       "dev": true,
       "license": "SEE LICENSE IN ./LICENSE.md"
     },
+    "node_modules/@utrecht/radio-group-react": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@utrecht/radio-group-react/-/radio-group-react-1.0.1.tgz",
+      "integrity": "sha512-1a92Eaxn8UrPz1g0Up4hBNcHBI2/Oba5lcIHFQIfgEtEENGLndz6r0pEJjshMUTKs7IhgpMuhAuJa4KfTg/Y6A==",
+      "dev": true,
+      "dependencies": {
+        "clsx": "2.1.1"
+      },
+      "peerDependencies": {
+        "@babel/runtime": "*",
+        "react": "18",
+        "react-dom": "18"
+      }
+    },
+    "node_modules/@utrecht/radio-group-react/node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@vitejs/plugin-react": {
       "version": "4.3.3",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.3.3.tgz",
diff --git a/package.json b/package.json
index 0dd1019..1b30654 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,7 @@
     "@utrecht/component-library-css": "6.1.0",
     "@utrecht/component-library-react": "7.2.0",
     "@utrecht/design-tokens": "2.1.1",
+    "@utrecht/radio-group-react": "1.0.1",
     "@vitejs/plugin-react": "4.3.3",
     "autoprefixer": "10.4.20",
     "axios": "1.7.7",
diff --git a/src/app/[locale]/incident/add/components/questions/RadioInput.tsx b/src/app/[locale]/incident/add/components/questions/RadioInput.tsx
index 68d9aac..b0d5e45 100644
--- a/src/app/[locale]/incident/add/components/questions/RadioInput.tsx
+++ b/src/app/[locale]/incident/add/components/questions/RadioInput.tsx
@@ -3,13 +3,7 @@ import { useTranslations } from 'next-intl'
 import { QuestionField } from '@/types/form'
 import { getValidators } from '@/lib/utils/form-validator'
 import { useFormContext } from 'react-hook-form'
-import {
-  Fieldset,
-  FieldsetLegend,
-  FormLabel,
-  Paragraph,
-  RadioButton,
-} from '@/components/index'
+import { RadioGroup } from '@/components/index'
 
 interface RadioGroupProps extends QuestionField {}
 
@@ -23,39 +17,24 @@ export const RadioInput = ({ field }: RadioGroupProps) => {
   const errorMessage = errors[field.key]?.message as string
 
   return (
-    <Fieldset invalid={!!errorMessage} role="radiogroup">
-      <FieldsetLegend>
-        {field.meta.label}{' '}
-        <span> {field.required ? '' : `(${t('not_required_short')})`}</span>
-        {field.meta.subtitle && <span>{field.meta.subtitle}</span>}
-      </FieldsetLegend>
-
-      {errorMessage && (
-        <Paragraph
-          id={`${field.key}-error`}
-          aria-live="assertive"
-          style={{ color: 'red' }}
-        >
-          {errorMessage}
-        </Paragraph>
-      )}
-
-      {Object.keys(field.meta.values).map((key: string) => (
-        <div key={key}>
-          <RadioButton
-            {...register(field.key, {
-              ...getValidators(field, t),
-            })}
-            type="radio"
-            id={`${field.key}-${key}`}
-            value={key}
-            aria-describedby={errorMessage ? `${field.key}-error` : undefined}
-          />
-          <FormLabel type="radio" htmlFor={`${field.key}-${key}`}>
-            {field.meta.values[key]}
-          </FormLabel>
-        </div>
-      ))}
-    </Fieldset>
+    <RadioGroup
+      label={field.meta.label}
+      required={field.required}
+      id={`${field.key}`}
+      // @ts-ignore
+      options={Object.keys(field.meta.values).map((key: string) => {
+        return {
+          ...register(field.key, {
+            ...getValidators(field, t),
+          }),
+          label: field.meta.values[key],
+          value: key,
+          id: `${field.key}-${key}`,
+        }
+      })}
+      invalid={Boolean(errorMessage)}
+      errorMessage={errorMessage}
+      description={field.meta.subtitle}
+    ></RadioGroup>
   )
 }
diff --git a/src/app/[locale]/incident/add/components/questions/TextInput.tsx b/src/app/[locale]/incident/add/components/questions/TextInput.tsx
index e01eb17..d087acb 100644
--- a/src/app/[locale]/incident/add/components/questions/TextInput.tsx
+++ b/src/app/[locale]/incident/add/components/questions/TextInput.tsx
@@ -23,7 +23,6 @@ export const TextInput = ({ field }: TextInputProps) => {
         label={field.meta.label}
         required={field.required}
         id={`${field.key}`}
-        autoComplete="phone"
         errorMessage={errorMessage}
         placeholder={field.meta.placeholder ? field.meta.placeholder : ''}
         invalid={Boolean(errorMessage)}
diff --git a/src/components/index.ts b/src/components/index.ts
index 35bd84d..c29b056 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -23,3 +23,5 @@ export {
   Icon,
   RadioButton,
 } from '@utrecht/component-library-react/dist/css-module'
+
+export { RadioGroup } from '@utrecht/radio-group-react'

From 4bb08b816fb4f0174b6fdb1486d19061c9ca81bc Mon Sep 17 00:00:00 2001
From: justian <justiandev@gmail.com>
Date: Thu, 7 Nov 2024 12:33:44 +0100
Subject: [PATCH 08/13] refactor: use NLDS checkbox group in dynamic form

---
 package-lock.json                             | 24 +++++++++
 package.json                                  |  1 +
 .../components/questions/CheckboxInput.tsx    | 51 ++++++++-----------
 src/components/index.ts                       |  1 +
 4 files changed, 46 insertions(+), 31 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3ecabee..60c93bf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -48,6 +48,7 @@
         "@types/react": "18",
         "@types/react-dom": "18",
         "@types/validator": "13.12.2",
+        "@utrecht/checkbox-group-react": "1.0.0",
         "@utrecht/component-library-css": "6.1.0",
         "@utrecht/component-library-react": "7.2.0",
         "@utrecht/design-tokens": "2.1.1",
@@ -3181,6 +3182,29 @@
       "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
       "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ=="
     },
+    "node_modules/@utrecht/checkbox-group-react": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@utrecht/checkbox-group-react/-/checkbox-group-react-1.0.0.tgz",
+      "integrity": "sha512-LswvhqrwPZnR9fIwgZFcBorNuoagliv7O/XGw5/BT973OJuSLH0nn592s4ZRWmoElmGeOWmR1+HJVbsNag62bQ==",
+      "dev": true,
+      "dependencies": {
+        "clsx": "2.1.1"
+      },
+      "peerDependencies": {
+        "@babel/runtime": "*",
+        "react": "18",
+        "react-dom": "18"
+      }
+    },
+    "node_modules/@utrecht/checkbox-group-react/node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@utrecht/component-library-css": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@utrecht/component-library-css/-/component-library-css-6.1.0.tgz",
diff --git a/package.json b/package.json
index 1b30654..b4c1fcd 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,7 @@
     "@types/react": "18",
     "@types/react-dom": "18",
     "@types/validator": "13.12.2",
+    "@utrecht/checkbox-group-react": "1.0.0",
     "@utrecht/component-library-css": "6.1.0",
     "@utrecht/component-library-react": "7.2.0",
     "@utrecht/design-tokens": "2.1.1",
diff --git a/src/app/[locale]/incident/add/components/questions/CheckboxInput.tsx b/src/app/[locale]/incident/add/components/questions/CheckboxInput.tsx
index 07ae0a6..87a9eb7 100644
--- a/src/app/[locale]/incident/add/components/questions/CheckboxInput.tsx
+++ b/src/app/[locale]/incident/add/components/questions/CheckboxInput.tsx
@@ -3,7 +3,7 @@ import { useTranslations } from 'next-intl'
 import { getValidators } from '@/lib/utils/form-validator'
 import React from 'react'
 import { useFormContext } from 'react-hook-form'
-import { Paragraph } from '@/components/index'
+import { CheckboxGroup } from '@/components/index'
 
 interface CheckboxInputProps extends QuestionField {}
 
@@ -17,35 +17,24 @@ export const CheckboxInput = ({ field }: CheckboxInputProps) => {
   const errorMessage = errors[field.key]?.message as string
 
   return (
-    <fieldset aria-invalid={!!errorMessage} data-testid="checkbox-group">
-      <legend>
-        {field.meta.label}{' '}
-        <span> {field.required ? '' : `(${t('not_required_short')})`}</span>
-        {field.meta.subtitle && <span>{field.meta.subtitle}</span>}
-      </legend>
-      {errorMessage && (
-        <Paragraph
-          id={`${field.key}-error`}
-          aria-live="assertive"
-          style={{ color: 'red' }}
-        >
-          {errorMessage}
-        </Paragraph>
-      )}
-      {Object.keys(field.meta.values).map((key: string) => (
-        <div key={key}>
-          <input
-            {...register(`${field.key}.${key}`, getValidators(field, t))}
-            type="checkbox"
-            id={`${field.key}-${key}`}
-            value={key}
-            aria-describedby={errorMessage ? `${field.key}-error` : undefined}
-          />
-          <label htmlFor={`${field.key}-${key}`}>
-            {field.meta.values[key]}
-          </label>
-        </div>
-      ))}
-    </fieldset>
+    <CheckboxGroup
+      label={field.meta.label}
+      required={field.required}
+      id={`${field.key}`}
+      // @ts-ignore
+      options={Object.keys(field.meta.values).map((key: string) => {
+        return {
+          ...register(field.key, {
+            ...getValidators(field, t),
+          }),
+          label: field.meta.values[key],
+          value: key,
+          id: `${field.key}-${key}`,
+        }
+      })}
+      invalid={Boolean(errorMessage)}
+      errorMessage={errorMessage}
+      description={field.meta.subtitle}
+    ></CheckboxGroup>
   )
 }
diff --git a/src/components/index.ts b/src/components/index.ts
index c29b056..eb05bf2 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -25,3 +25,4 @@ export {
 } from '@utrecht/component-library-react/dist/css-module'
 
 export { RadioGroup } from '@utrecht/radio-group-react'
+export { CheckboxGroup } from '@utrecht/checkbox-group-react'

From a8e09a2700c01223e1039c504e13cacafd713059 Mon Sep 17 00:00:00 2001
From: justian <justiandev@gmail.com>
Date: Thu, 7 Nov 2024 13:12:29 +0100
Subject: [PATCH 09/13] fix: don't show empty answers in summary form

---
 .../incident/summary/components/IncidentSummaryForm.tsx     | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/app/[locale]/incident/summary/components/IncidentSummaryForm.tsx b/src/app/[locale]/incident/summary/components/IncidentSummaryForm.tsx
index 49c4869..3e78c95 100644
--- a/src/app/[locale]/incident/summary/components/IncidentSummaryForm.tsx
+++ b/src/app/[locale]/incident/summary/components/IncidentSummaryForm.tsx
@@ -120,6 +120,10 @@ const IncidentSummaryForm = () => {
                   ? answer.answer
                   : Array.isArray(answer.answer)
                     ? answer.answer
+                        .filter(
+                          (singleAnswer) =>
+                            singleAnswer !== false && singleAnswer !== 'empty'
+                        )
                         .map((singleAnswer) => singleAnswer.label)
                         .join(', ')
                     : answer.answer.label
@@ -179,7 +183,7 @@ export const IncidentSummaryFormItem = ({
 }) => {
   return (
     <div className="flex flex-col gap-1">
-      <Heading level={3}>{title}</Heading>
+      {value !== '' && <Heading level={3}>{title}</Heading>}
       {value !== '' ? (
         <Paragraph>{value}</Paragraph>
       ) : (

From c35ca2869f9a870f78c2a7a7d64e0bb64450ec8a Mon Sep 17 00:00:00 2001
From: justian <justiandev@gmail.com>
Date: Thu, 7 Nov 2024 15:33:25 +0100
Subject: [PATCH 10/13] Fix: don't require email and phone fields in step 3

---
 .../components/IncidentContactForm.tsx        | 24 +++++++++++++------
 .../components/IncidentSummaryForm.tsx        |  7 +++---
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/app/[locale]/incident/contact/components/IncidentContactForm.tsx b/src/app/[locale]/incident/contact/components/IncidentContactForm.tsx
index 26182c1..5d99e07 100644
--- a/src/app/[locale]/incident/contact/components/IncidentContactForm.tsx
+++ b/src/app/[locale]/incident/contact/components/IncidentContactForm.tsx
@@ -34,11 +34,21 @@ const IncidentContactForm = () => {
   const incidentContactFormSchema = z.object({
     phone: z
       .string()
-      .refine(validator.isMobilePhone, t('errors.number_not_valid'))
-      .optional()
-      .nullable(),
-    email: z.string().email(t('errors.email_not_valid')).optional().nullable(),
-    sharing_allowed: z.boolean().optional(),
+      .refine(
+        (value) => value == '' || validator.isMobilePhone(value),
+        t('errors.number_not_valid')
+      )
+      .nullable()
+      .optional(),
+    email: z
+      .string()
+      .refine(
+        (value) => value == '' || validator.isEmail(value),
+        t('errors.email_not_valid')
+      )
+      .nullable()
+      .optional(),
+    sharing_allowed: z.boolean(),
   })
 
   const form = useForm<z.infer<typeof incidentContactFormSchema>>({
@@ -79,7 +89,7 @@ const IncidentContactForm = () => {
           autoComplete="phone"
           errorMessage={form.formState.errors.phone?.message}
           invalid={Boolean(form.formState.errors.phone?.message)}
-          description={tGeneral('not-required')}
+          required={false}
           {...form.register('phone')}
         />
         <FormFieldTextbox
@@ -88,7 +98,7 @@ const IncidentContactForm = () => {
           autoComplete="email"
           errorMessage={form.formState.errors.email?.message}
           invalid={Boolean(form.formState.errors.email?.message)}
-          description={tGeneral('not-required')}
+          required={false}
           {...form.register('email')}
         />
         <Fieldset aria-describedby="todo-id">
diff --git a/src/app/[locale]/incident/summary/components/IncidentSummaryForm.tsx b/src/app/[locale]/incident/summary/components/IncidentSummaryForm.tsx
index 3e78c95..cff0ea1 100644
--- a/src/app/[locale]/incident/summary/components/IncidentSummaryForm.tsx
+++ b/src/app/[locale]/incident/summary/components/IncidentSummaryForm.tsx
@@ -140,9 +140,10 @@ const IncidentSummaryForm = () => {
             {t('steps.step_three.edit')}
           </LinkWrapper>
         </div>
-        {formState.phone === undefined &&
-        formState.email === undefined &&
-        formState.sharing_allowed === false ? (
+        {formState.phone === '' ||
+        (formState.phone === undefined && formState.email === '') ||
+        (formState.email === undefined &&
+          formState.sharing_allowed === false) ? (
           <Paragraph>{t('steps.step_three.no_contact_details')}</Paragraph>
         ) : (
           <>

From 3fe2e04633f7c63adb27ac5c7d0a2da70d453201 Mon Sep 17 00:00:00 2001
From: justian <justiandev@gmail.com>
Date: Thu, 7 Nov 2024 15:48:45 +0100
Subject: [PATCH 11/13] Fix: add (required) or (not required) texts in label

---
 .../incident/add/components/questions/CheckboxInput.tsx    | 2 +-
 .../incident/add/components/questions/RadioInput.tsx       | 2 +-
 .../incident/add/components/questions/TextAreaInput.tsx    | 2 +-
 .../incident/add/components/questions/TextInput.tsx        | 2 +-
 .../incident/components/IncidentDescriptionForm.tsx        | 2 +-
 .../incident/contact/components/IncidentContactForm.tsx    | 4 ++--
 translations/en.json                                       | 7 +++++--
 translations/nl.json                                       | 7 +++++--
 8 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/app/[locale]/incident/add/components/questions/CheckboxInput.tsx b/src/app/[locale]/incident/add/components/questions/CheckboxInput.tsx
index 87a9eb7..5ed9cc9 100644
--- a/src/app/[locale]/incident/add/components/questions/CheckboxInput.tsx
+++ b/src/app/[locale]/incident/add/components/questions/CheckboxInput.tsx
@@ -18,7 +18,7 @@ export const CheckboxInput = ({ field }: CheckboxInputProps) => {
 
   return (
     <CheckboxGroup
-      label={field.meta.label}
+      label={`${field.meta.label} ${field.required ? `(${t('required_short')})` : `(${t('not_required_short')})`}`}
       required={field.required}
       id={`${field.key}`}
       // @ts-ignore
diff --git a/src/app/[locale]/incident/add/components/questions/RadioInput.tsx b/src/app/[locale]/incident/add/components/questions/RadioInput.tsx
index b0d5e45..e873972 100644
--- a/src/app/[locale]/incident/add/components/questions/RadioInput.tsx
+++ b/src/app/[locale]/incident/add/components/questions/RadioInput.tsx
@@ -18,7 +18,7 @@ export const RadioInput = ({ field }: RadioGroupProps) => {
 
   return (
     <RadioGroup
-      label={field.meta.label}
+      label={`${field.meta.label} ${field.required ? `(${t('required_short')})` : `(${t('not_required_short')})`}`}
       required={field.required}
       id={`${field.key}`}
       // @ts-ignore
diff --git a/src/app/[locale]/incident/add/components/questions/TextAreaInput.tsx b/src/app/[locale]/incident/add/components/questions/TextAreaInput.tsx
index 179f686..d87eb68 100644
--- a/src/app/[locale]/incident/add/components/questions/TextAreaInput.tsx
+++ b/src/app/[locale]/incident/add/components/questions/TextAreaInput.tsx
@@ -24,7 +24,7 @@ export const TextAreaInput = ({ field }: TextAreaInputProps) => {
         description={field.meta.subtitle}
         required={field.required}
         id={`${field.key}`}
-        label={field.meta.label}
+        label={`${field.meta.label} ${field.required ? `(${t('required_short')})` : `(${t('not_required_short')})`}`}
         aria-describedby={
           field.meta.subtitle ? `${field.key}-${field.key}` : ''
         }
diff --git a/src/app/[locale]/incident/add/components/questions/TextInput.tsx b/src/app/[locale]/incident/add/components/questions/TextInput.tsx
index d087acb..2ed1519 100644
--- a/src/app/[locale]/incident/add/components/questions/TextInput.tsx
+++ b/src/app/[locale]/incident/add/components/questions/TextInput.tsx
@@ -20,7 +20,7 @@ export const TextInput = ({ field }: TextInputProps) => {
       {/* TODO: implement (not required) for label*/}
       <FormFieldTextbox
         {...register(field.key, getValidators(field, t))}
-        label={field.meta.label}
+        label={`${field.meta.label} ${field.required ? `(${t('required_short')})` : `(${t('not_required_short')})`}`}
         required={field.required}
         id={`${field.key}`}
         errorMessage={errorMessage}
diff --git a/src/app/[locale]/incident/components/IncidentDescriptionForm.tsx b/src/app/[locale]/incident/components/IncidentDescriptionForm.tsx
index 6d3e595..c50884d 100644
--- a/src/app/[locale]/incident/components/IncidentDescriptionForm.tsx
+++ b/src/app/[locale]/incident/components/IncidentDescriptionForm.tsx
@@ -145,7 +145,7 @@ export const IncidentDescriptionForm = () => {
             <FormFieldTextarea
               rows={5}
               description={t('describe_textarea_description')}
-              label={t('describe_textarea_heading')}
+              label={`${t('describe_textarea_heading')} (${t('required_short')})`}
               errorMessage={errors.description?.message}
               invalid={Boolean(errors.description?.message)}
               {...field}
diff --git a/src/app/[locale]/incident/contact/components/IncidentContactForm.tsx b/src/app/[locale]/incident/contact/components/IncidentContactForm.tsx
index 5d99e07..e14b130 100644
--- a/src/app/[locale]/incident/contact/components/IncidentContactForm.tsx
+++ b/src/app/[locale]/incident/contact/components/IncidentContactForm.tsx
@@ -85,7 +85,7 @@ const IncidentContactForm = () => {
         className="flex flex-col gap-8 items-start"
       >
         <FormFieldTextbox
-          label={t('describe_phone_input_heading')}
+          label={`${t('describe_mail_input_heading')} (${t('not_required_short')})`}
           autoComplete="phone"
           errorMessage={form.formState.errors.phone?.message}
           invalid={Boolean(form.formState.errors.phone?.message)}
@@ -93,7 +93,7 @@ const IncidentContactForm = () => {
           {...form.register('phone')}
         />
         <FormFieldTextbox
-          label={t('describe_mail_input_heading')}
+          label={`${t('describe_mail_input_heading')} (${t('not_required_short')})`}
           type="email"
           autoComplete="email"
           errorMessage={form.formState.errors.email?.message}
diff --git a/translations/en.json b/translations/en.json
index be98c66..311bcdf 100644
--- a/translations/en.json
+++ b/translations/en.json
@@ -22,7 +22,8 @@
         "file_size_too_large": "File size too large. Each file must be less than 20MB.",
         "file_size_too_small": "File size too small. Each file must be at least 30KB.",
         "file_limit_exceeded": "Maximum number of files is 3."
-      }
+      },
+      "required_short": "required"
     }
   },
   "describe-add": {
@@ -51,7 +52,8 @@
       "errors": {
         "number_not_valid": "Use a valid telephone number",
         "email_not_valid": "Use a valid mail address"
-      }
+      },
+      "not_required_short": "not required"
     }
   },
   "describe-summary": {
@@ -101,6 +103,7 @@
       "required": "This field is required",
       "max_length": "This field has a maximal length of {maxLength} characters",
       "not_required_short": "not required",
+      "required_short": "required",
       "location_required": "Location is required"
     },
     "button": {
diff --git a/translations/nl.json b/translations/nl.json
index 84cd69a..dc41835 100644
--- a/translations/nl.json
+++ b/translations/nl.json
@@ -13,6 +13,7 @@
     "heading": "Beschrijf uw melding",
     "form": {
       "describe_textarea_heading": "Waar gaat het om?",
+      "required_short": "verplicht",
       "describe_textarea_description": "Typ geen persoonsgegevens in deze omschrijving. We vragen dit later in dit formulier aan u.",
       "describe_upload_heading": "Foto's toevoegen",
       "describe_upload_description": "Voeg een foto toe om de situatie te verduidelijken (maximaal 5 foto's).",
@@ -51,7 +52,8 @@
       "errors": {
         "number_not_valid": "Gebruik een geldig telefoonnummer",
         "email_not_valid": "Gebruik een geldig mailadres"
-      }
+      },
+      "not_required_short": "niet verplicht"
     }
   },
   "describe-summary": {
@@ -101,7 +103,8 @@
       "required": "Dit veld is verplicht",
       "max_length": "Dit veld heeft een maximale lengte van {maxLength} karakters",
       "not_required_short": "niet verplicht",
-      "location_required": "Locatie is verplicht"
+      "location_required": "Locatie is verplicht",
+      "required_short": "verplicht"
     },
     "button": {
       "upload_file": "Upload bestand",

From 75fa5271fa83f8279efee644e36f3ed4e76f4f1f Mon Sep 17 00:00:00 2001
From: justian <justiandev@gmail.com>
Date: Thu, 7 Nov 2024 16:38:28 +0100
Subject: [PATCH 12/13] refactor: remove radix form and move everything to NLDS
 form

---
 package-lock.json                             |  66 -------
 package.json                                  |   2 -
 .../components/IncidentDescriptionForm.tsx    |  98 ++++------
 src/components/ui/Form.tsx                    | 180 ------------------
 src/components/ui/Label.tsx                   |  17 --
 translations/en.json                          |   3 +-
 translations/nl.json                          |   1 +
 7 files changed, 44 insertions(+), 323 deletions(-)
 delete mode 100644 src/components/ui/Form.tsx
 delete mode 100644 src/components/ui/Label.tsx

diff --git a/package-lock.json b/package-lock.json
index 60c93bf..f993cfa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,8 +11,6 @@
         "@hookform/resolvers": "3.9.0",
         "@radix-ui/react-checkbox": "1.1.2",
         "@radix-ui/react-dialog": "1.1.2",
-        "@radix-ui/react-form": "0.1.0",
-        "@radix-ui/react-label": "2.1.0",
         "@radix-ui/react-select": "2.1.2",
         "@radix-ui/react-slot": "1.1.0",
         "@radix-ui/react-visually-hidden": "1.1.0",
@@ -1983,47 +1981,6 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-form": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-form/-/react-form-0.1.0.tgz",
-      "integrity": "sha512-1/oVYPDjbFILOLIarcGcMKo+y6SbTVT/iUKVEw59CF4offwZgBgC3ZOeSBewjqU0vdA6FWTPWTN63obj55S/tQ==",
-      "dependencies": {
-        "@radix-ui/primitive": "1.1.0",
-        "@radix-ui/react-compose-refs": "1.1.0",
-        "@radix-ui/react-context": "1.1.0",
-        "@radix-ui/react-id": "1.1.0",
-        "@radix-ui/react-label": "2.1.0",
-        "@radix-ui/react-primitive": "2.0.0"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-form/node_modules/@radix-ui/react-context": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.0.tgz",
-      "integrity": "sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==",
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@radix-ui/react-id": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz",
@@ -2042,29 +1999,6 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-label": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.0.tgz",
-      "integrity": "sha512-peLblDlFw/ngk3UWq0VnYaOLy6agTZZ+MUO/WhVfm14vJGML+xH4FAl2XQGLqdefjNb7ApRg6Yn7U42ZhmYXdw==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-primitive": "2.0.0"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@radix-ui/react-popper": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.0.tgz",
diff --git a/package.json b/package.json
index b4c1fcd..3581795 100644
--- a/package.json
+++ b/package.json
@@ -13,8 +13,6 @@
     "@hookform/resolvers": "3.9.0",
     "@radix-ui/react-checkbox": "1.1.2",
     "@radix-ui/react-dialog": "1.1.2",
-    "@radix-ui/react-form": "0.1.0",
-    "@radix-ui/react-label": "2.1.0",
     "@radix-ui/react-select": "2.1.2",
     "@radix-ui/react-slot": "1.1.0",
     "@radix-ui/react-visually-hidden": "1.1.0",
diff --git a/src/app/[locale]/incident/components/IncidentDescriptionForm.tsx b/src/app/[locale]/incident/components/IncidentDescriptionForm.tsx
index c50884d..78c5521 100644
--- a/src/app/[locale]/incident/components/IncidentDescriptionForm.tsx
+++ b/src/app/[locale]/incident/components/IncidentDescriptionForm.tsx
@@ -1,14 +1,6 @@
 'use client'
 
 import * as z from 'zod'
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormMessage,
-  FormDescription,
-} from '@/components/ui/Form'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useTranslations } from 'next-intl'
@@ -29,7 +21,12 @@ import {
 } from '@/components/ui/upload/FileUpload'
 
 import { FormFieldTextarea } from '@/components/index'
-import { Label } from '@amsterdam/design-system-react'
+import {
+  Fieldset,
+  FieldsetLegend,
+  FormFieldDescription,
+  FormFieldErrorMessage,
+} from '@utrecht/component-library-react'
 
 export const IncidentDescriptionForm = () => {
   const t = useTranslations('describe-report.form')
@@ -130,57 +127,44 @@ export const IncidentDescriptionForm = () => {
     form.setValue('files', updatedFiles)
   }
 
-  // TODO: in the best scenario we remove this Radix Form component completely, this is not needed anymore (but we should first refactor FileUpload FormField and Description FormField)
-
   return (
-    <Form {...form}>
-      <form
-        onSubmit={form.handleSubmit(onSubmit)}
-        className="flex flex-col gap-8 items-start"
-      >
-        <FormField
-          name={'description'}
-          control={form.control}
-          render={({ field, formState: { errors } }) => (
-            <FormFieldTextarea
-              rows={5}
-              description={t('describe_textarea_description')}
-              label={`${t('describe_textarea_heading')} (${t('required_short')})`}
-              errorMessage={errors.description?.message}
-              invalid={Boolean(errors.description?.message)}
-              {...field}
-            />
+    <form
+      onSubmit={form.handleSubmit(onSubmit)}
+      className="flex flex-col gap-8 items-start"
+    >
+      <FormFieldTextarea
+        rows={5}
+        description={t('describe_textarea_description')}
+        label={`${t('describe_textarea_heading')} (${t('required_short')})`}
+        errorMessage={form.formState.errors.description?.message}
+        invalid={Boolean(form.formState.errors.description?.message)}
+        {...form.register('description')}
+      />
+
+      <Fieldset invalid={Boolean(form.formState.errors.files?.message)}>
+        <FieldsetLegend>{`${t('describe_textarea_heading')} (${t('not_required_short')})`}</FieldsetLegend>
+
+        <FormFieldDescription>
+          {t('describe_upload_description')}
+        </FormFieldDescription>
+
+        {Boolean(form.formState.errors.files?.message) &&
+          form.formState.errors.files?.message && (
+            <FormFieldErrorMessage>
+              {form.formState.errors.files?.message}
+            </FormFieldErrorMessage>
           )}
-        />
 
-        <FormField
-          name={'files'}
-          control={form.control}
-          render={({ formState: { errors } }) => (
-            <FormItem>
-              <div>
-                <Label onClick={() => setFocus('files')}>
-                  {t('describe_upload_heading')}
-                </Label>
-                <FormDescription>
-                  {t('describe_upload_description')}
-                </FormDescription>
-                <FormMessage />
-              </div>
-              <FormControl>
-                {/*@ts-ignore*/}
-                <FileUpload
-                  onFileUpload={(e) => handleFileChange(e)}
-                  onDelete={(index) => deleteFile(index)}
-                  files={form.getValues('files')}
-                  {...register('files', { required: false })}
-                />
-              </FormControl>
-            </FormItem>
-          )}
+        {/* @ts-ignore */}
+        <FileUpload
+          onFileUpload={(e) => handleFileChange(e)}
+          onDelete={(index) => deleteFile(index)}
+          files={form.getValues('files')}
+          {...register('files', { required: false })}
         />
-        <IncidentFormFooter />
-      </form>
-    </Form>
+      </Fieldset>
+
+      <IncidentFormFooter />
+    </form>
   )
 }
diff --git a/src/components/ui/Form.tsx b/src/components/ui/Form.tsx
deleted file mode 100644
index 27824f7..0000000
--- a/src/components/ui/Form.tsx
+++ /dev/null
@@ -1,180 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import * as LabelPrimitive from '@radix-ui/react-label'
-import { Slot } from '@radix-ui/react-slot'
-import {
-  Controller,
-  ControllerProps,
-  FieldError,
-  FieldPath,
-  FieldValues,
-  FormProvider,
-  useFormContext,
-} from 'react-hook-form'
-
-import {
-  FormField as UtrechtFormField,
-  FormFieldDescription,
-  FormFieldErrorMessage,
-  FormLabel as UtrechtFormLabel,
-  Paragraph,
-} from '@/components/index'
-
-const Form = FormProvider
-
-type FormFieldContextValue<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = {
-  name: TName
-}
-
-const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue
-)
-
-const FormField = <
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->({
-  ...props
-}: ControllerProps<TFieldValues, TName>) => {
-  return (
-    <FormFieldContext.Provider value={{ name: props.name }}>
-      <Controller {...props} />
-    </FormFieldContext.Provider>
-  )
-}
-
-const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext)
-  const itemContext = React.useContext(FormItemContext)
-  const { getFieldState, formState } = useFormContext()
-
-  const fieldState = getFieldState(fieldContext.name, formState)
-
-  if (!fieldContext) {
-    throw new Error('useFormField should be used within <FormField>')
-  }
-
-  const { id } = itemContext
-
-  return {
-    id,
-    name: fieldContext.name,
-    formItemId: `${id}-form-item`,
-    formDescriptionId: `${id}-form-item-description`,
-    formMessageId: `${id}-form-item-message`,
-    ...fieldState,
-  }
-}
-
-type FormItemContextValue = {
-  id: string
-}
-
-const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue
-)
-
-type FormItemProps = {
-  error?: FieldError
-} & React.HTMLAttributes<HTMLDivElement>
-
-const FormItem = React.forwardRef<HTMLDivElement, FormItemProps>(
-  ({ error, ...props }, ref) => {
-    const id = React.useId()
-
-    return (
-      <FormItemContext.Provider value={{ id }}>
-        <UtrechtFormField invalid={!!error} ref={ref} {...props} />
-      </FormItemContext.Provider>
-    )
-  }
-)
-FormItem.displayName = 'FormItem'
-
-const FormLabel = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
->(({ className, ...props }, ref) => {
-  const { error, formItemId } = useFormField()
-
-  return <UtrechtFormLabel ref={ref} htmlFor={formItemId} {...props} />
-})
-FormLabel.displayName = 'FormLabel'
-const FormControl = React.forwardRef<
-  React.ElementRef<typeof Slot>,
-  React.ComponentPropsWithoutRef<typeof Slot>
->(({ ...props }, ref) => {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
-
-  return (
-    <Slot
-      ref={ref}
-      id={formItemId}
-      aria-describedby={
-        !error
-          ? `${formDescriptionId}`
-          : `${formDescriptionId} ${formMessageId}`
-      }
-      aria-invalid={!!error}
-      {...props}
-    />
-  )
-})
-FormControl.displayName = 'FormControl'
-
-const FormDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => {
-  const { formDescriptionId } = useFormField()
-
-  return (
-    <FormFieldDescription>
-      <Paragraph ref={ref} id={formDescriptionId} {...props} />
-    </FormFieldDescription>
-  )
-})
-FormDescription.displayName = 'FormDescription'
-
-type FormMessageProps = {
-  customError?: FieldError
-} & React.HTMLAttributes<HTMLParagraphElement>
-
-const FormMessage = React.forwardRef<HTMLParagraphElement, FormMessageProps>(
-  ({ customError, children, ...props }, ref) => {
-    const { error, formMessageId } = useFormField()
-    const body = customError
-      ? String(customError?.message)
-      : error
-        ? String(error?.message)
-        : children
-
-    if (!body) {
-      return null
-    }
-
-    return (
-      <FormFieldErrorMessage>
-        <Paragraph ref={ref} id={formMessageId} {...props}>
-          {body}
-        </Paragraph>
-      </FormFieldErrorMessage>
-    )
-  }
-)
-FormMessage.displayName = 'FormMessage'
-
-export {
-  useFormField,
-  Form,
-  FormItem,
-  FormControl,
-  FormDescription,
-  FormMessage,
-  FormField,
-  FormLabel,
-}
diff --git a/src/components/ui/Label.tsx b/src/components/ui/Label.tsx
deleted file mode 100644
index b7756c7..0000000
--- a/src/components/ui/Label.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import * as LabelPrimitive from '@radix-ui/react-label'
-import React from 'react'
-import { cn } from '@/lib/utils/style'
-
-const Label = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root
-    ref={ref}
-    className={cn('font-bold', className)}
-    {...props}
-  />
-))
-Label.displayName = LabelPrimitive.Root.displayName
-
-export { Label }
diff --git a/translations/en.json b/translations/en.json
index 311bcdf..f626522 100644
--- a/translations/en.json
+++ b/translations/en.json
@@ -23,7 +23,8 @@
         "file_size_too_small": "File size too small. Each file must be at least 30KB.",
         "file_limit_exceeded": "Maximum number of files is 3."
       },
-      "required_short": "required"
+      "required_short": "required",
+      "not_required_short": "not required"
     }
   },
   "describe-add": {
diff --git a/translations/nl.json b/translations/nl.json
index dc41835..3c9d8e3 100644
--- a/translations/nl.json
+++ b/translations/nl.json
@@ -14,6 +14,7 @@
     "form": {
       "describe_textarea_heading": "Waar gaat het om?",
       "required_short": "verplicht",
+      "not_required_short": "niet verplicht",
       "describe_textarea_description": "Typ geen persoonsgegevens in deze omschrijving. We vragen dit later in dit formulier aan u.",
       "describe_upload_heading": "Foto's toevoegen",
       "describe_upload_description": "Voeg een foto toe om de situatie te verduidelijken (maximaal 5 foto's).",

From ca4c007113776a1afca673da1f26c1658ab93a50 Mon Sep 17 00:00:00 2001
From: justian <justiandev@gmail.com>
Date: Thu, 7 Nov 2024 16:52:57 +0100
Subject: [PATCH 13/13] Refactor: move LocationSelect inside NLDS Fieldset

---
 .../components/questions/LocationSelect.tsx   | 25 ++++++++++++-------
 .../add/components/questions/PlainText.tsx    |  2 +-
 .../components/IncidentDescriptionForm.tsx    |  2 +-
 .../components/IncidentDescriptionPage.tsx    |  2 +-
 .../[locale]/incident/components/Stepper.tsx  |  2 +-
 src/components/index.ts                       |  1 +
 translations/en.json                          |  4 ++-
 translations/nl.json                          |  4 ++-
 8 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/src/app/[locale]/incident/add/components/questions/LocationSelect.tsx b/src/app/[locale]/incident/add/components/questions/LocationSelect.tsx
index 5556c52..13a5da5 100644
--- a/src/app/[locale]/incident/add/components/questions/LocationSelect.tsx
+++ b/src/app/[locale]/incident/add/components/questions/LocationSelect.tsx
@@ -9,8 +9,9 @@ import { useFormStore } from '@/store/form_store'
 import { getNearestAddressByCoordinate } from '@/services/location/address'
 import { useConfig } from '@/hooks/useConfig'
 import { isCoordinates } from '@/lib/utils/map'
-import { Alert } from '@utrecht/component-library-react/dist/css-module'
-import { LinkButton } from '@utrecht/component-library-react'
+import { Fieldset, FieldsetLegend, LinkButton } from '@/components/index'
+import { useTranslations } from 'next-intl'
+import { FormFieldErrorMessage } from '@/components'
 
 export interface LocationSelectProps {
   field?: PublicQuestion
@@ -24,6 +25,7 @@ export const LocationSelect = ({ field }: LocationSelectProps) => {
   const { formState: formStoreState } = useFormStore()
   const [address, setAddress] = useState<string | null>(null)
   const { config } = useConfig()
+  const t = useTranslations('describe-add.map')
 
   useEffect(() => {
     const getAddress = async () => {
@@ -44,11 +46,17 @@ export const LocationSelect = ({ field }: LocationSelectProps) => {
   }, [formStoreState.coordinates])
 
   return (
-    <div className="w-full">
-      {errorMessage && <Alert type="error">{errorMessage}</Alert>}
-      <label htmlFor="location-button">
-        {field ? field.meta.label : 'Waar is het?'}
-      </label>
+    <Fieldset invalid={Boolean(errorMessage)} className="w-full">
+      <FieldsetLegend>
+        {field
+          ? `${field.meta.label} (${t('required_short')})`
+          : `${t('map_label')} (${t('required_short')})`}
+      </FieldsetLegend>
+
+      {Boolean(errorMessage) && errorMessage && (
+        <FormFieldErrorMessage>{errorMessage}</FormFieldErrorMessage>
+      )}
+
       <div className="relative w-full">
         <LocationMap />
         <Paragraph>{address}</Paragraph>
@@ -74,7 +82,6 @@ export const LocationSelect = ({ field }: LocationSelectProps) => {
           />
         </MapProvider>
       </div>
-      {/* TODO: toon locatie, straatnaam bijv. */}
-    </div>
+    </Fieldset>
   )
 }
diff --git a/src/app/[locale]/incident/add/components/questions/PlainText.tsx b/src/app/[locale]/incident/add/components/questions/PlainText.tsx
index 15370ff..a95913e 100644
--- a/src/app/[locale]/incident/add/components/questions/PlainText.tsx
+++ b/src/app/[locale]/incident/add/components/questions/PlainText.tsx
@@ -1,6 +1,6 @@
 import { QuestionField } from '@/types/form'
 import Markdown from 'react-markdown'
-import { Alert } from '@utrecht/component-library-react/dist/css-module'
+import { Alert } from '@/components'
 
 interface PlainTextProps extends QuestionField {}
 
diff --git a/src/app/[locale]/incident/components/IncidentDescriptionForm.tsx b/src/app/[locale]/incident/components/IncidentDescriptionForm.tsx
index 78c5521..059a8aa 100644
--- a/src/app/[locale]/incident/components/IncidentDescriptionForm.tsx
+++ b/src/app/[locale]/incident/components/IncidentDescriptionForm.tsx
@@ -26,7 +26,7 @@ import {
   FieldsetLegend,
   FormFieldDescription,
   FormFieldErrorMessage,
-} from '@utrecht/component-library-react'
+} from '@/components/index'
 
 export const IncidentDescriptionForm = () => {
   const t = useTranslations('describe-report.form')
diff --git a/src/app/[locale]/incident/components/IncidentDescriptionPage.tsx b/src/app/[locale]/incident/components/IncidentDescriptionPage.tsx
index d0a0fa1..29b1e3e 100644
--- a/src/app/[locale]/incident/components/IncidentDescriptionPage.tsx
+++ b/src/app/[locale]/incident/components/IncidentDescriptionPage.tsx
@@ -3,7 +3,7 @@
 import { useTranslations } from 'next-intl'
 import { useFormStore } from '@/store/form_store'
 import { Heading, Paragraph, HeadingGroup, PreHeading } from '@/components'
-import { Alert, Link } from '@utrecht/component-library-react/dist/css-module'
+import { Alert, Link } from '@/components'
 import { IncidentDescriptionForm } from '@/app/[locale]/incident/components/IncidentDescriptionForm'
 
 const currentStep = 1
diff --git a/src/app/[locale]/incident/components/Stepper.tsx b/src/app/[locale]/incident/components/Stepper.tsx
index 9838f2f..50776d7 100644
--- a/src/app/[locale]/incident/components/Stepper.tsx
+++ b/src/app/[locale]/incident/components/Stepper.tsx
@@ -5,7 +5,7 @@ import { Paths, usePathname } from '@/routing/navigation'
 import { useStepperStore } from '@/store/stepper_store'
 import { useEffect, useRef } from 'react'
 import { useFormStore } from '@/store/form_store'
-import { Button, Link } from '@utrecht/component-library-react/dist/css-module'
+import { Button, Link } from '@/components'
 
 import { Paragraph } from '@/components/index'
 
diff --git a/src/components/index.ts b/src/components/index.ts
index eb05bf2..4d38bf1 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -20,6 +20,7 @@ export {
   Link,
   Paragraph,
   PreHeading,
+  LinkButton,
   Icon,
   RadioButton,
 } from '@utrecht/component-library-react/dist/css-module'
diff --git a/translations/en.json b/translations/en.json
index f626522..84f42ac 100644
--- a/translations/en.json
+++ b/translations/en.json
@@ -37,7 +37,9 @@
       }
     },
     "map": {
-      "map_heading": "Choose your location"
+      "map_heading": "Choose your location",
+      "map_label": "Where is the location?",
+      "required_short": "required"
     }
   },
   "describe-contact": {
diff --git a/translations/nl.json b/translations/nl.json
index 3c9d8e3..8ae54d1 100644
--- a/translations/nl.json
+++ b/translations/nl.json
@@ -37,7 +37,9 @@
       }
     },
     "map": {
-      "map_heading": "Kies uw locatie"
+      "map_heading": "Kies uw locatie",
+      "map_label": "Waar is het?",
+      "required_short": "verplicht"
     }
   },
   "describe-contact": {