refactor: use NLDS checkbox group in dynamic form

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

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

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'