@utrecht/form-field-css 1.2.0 → 1.4.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @utrecht/form-field-css
 
+## 1.4.0
+
+### Minor Changes
+
+- e497b08: Export CSS string as default export in `dist/index.mjs`.
+
+## 1.3.0
+
+### Minor Changes
+
+- 9ba132c: Add `utrecht-form-field__error-message` class name and mixin.
+
+  Deprecate the `utrecht-form-field__description--invalid` mixin.
+
 ## 1.2.0
 
 ### Minor Changes

package/README.md

@@ -2,42 +2,4 @@
 
 # Form field
 
-Gebruik het _form field_ component om een alle onderdelen van een formulierveld in te verzamelen: het label, de _form control_, eventueel een extra beschrijving of de status en eventueel een validatiemelding of foutmelding.
-
-De volgende componenten zijn vaak onderdeel van een _form field_:
-
-- _form label_ component
-- _form field description_ component met extra beschrijving
-- _form field description_ component met een validatiemelding
-- een form control component zoals bijvoorbeeld:
-  - _textbox_ component
-  - _textarea_ component
-  - _checkbox_ component
-  - _radio button_ component
-  - _form select_ component
-  - etcetera
-- _form field description_ component met een foutmelding
-- _form field description_ component status van component
-
-## HTML
-
-Gebruik een element `<div>` element voor formuliervelden met één _form control_. Een formulierveld moet meerdere `<p>` elementen kunnen bevatten, gebruik daarom geen `<p>` element voor de form field. Je moet geen _landmark role_ gebruiken voor een formulierveld (dus geen `<section>`) element.
-
-Voor formuliervelden met meerdere _form controls_ mag je een `<fieldset>` element gebruiken, bijvoorbeeld voor: jaar, maand en dag. Voor CSS is het handig om dan nog steeds een `<div>` om de fieldset heen te hebben: `<div><fieldset>...</fieldset></div>`.
-
-## Gebruikte termen
-
-- `form` komt van `<form>` in HTML en `role="form"` in WAI-ARIA.
-- `field` komt van `<fieldset>` in HTML.
-- `invalid` komt van `aria-invalid` in WAI-ARIA.
-- `radio` komt van `<input type="radio">` in HTML.
-- `checkbox` komt van `<input type="checkbox">` in HTML.
-- `label` komt van `<label>` in HTML en `aria-labelledby` in WAI-ARIA.
-- `description` komt van `aria-describedby` in WAI-ARIA.
-
-## Relevante WCAG regels
-
-- [WCAG eis 2.4.6](https://www.w3.org/TR/WCAG21/#headings-and-labels): de tekst van het label moet duidelijk zijn
-- [WCAG eis 3.3.9](https://www.w3.org/TR/WCAG22/#redundant-entry): gebruik niet een formulierveld voor informatie die de gebruiker eerder al heeft ingevuld.
-  - Vraag gebruikers niet twee keer achter elkaar identieke gegevens in te vullen, bijvoorbeeld om typfouten te herkennen en daarmee fouten te voorkomen. Bied liever een mogelijkheid aan om de gegevens te controleren als laatste stap.
-  - Vul bestaande gegevens in als standaardwaarde wanneer je de gegevens al hebt maar je graag zeker wilt weken of de oude gegevens nog juist zijn.
+Een invoerveld en bijbehorende onderdelen die helpen bij het invullen.

package/dist/index.css

@@ -1,12 +1,8 @@
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/* stylelint-disable-next-line block-no-empty */
 .utrecht-form-field {
   break-inside: avoid;
   font-family: var(--utrecht-document-font-family, inherit);
@@ -29,16 +25,8 @@
 .utrecht-form-field--checkbox {
   display: grid;
   gap: 0 var(--utrecht-checkbox-margin-inline-end, 12px);
-  grid-template-areas: "input label" "input description" "input description-invalid";
+  grid-template-areas: "input label" "input description" "input error-message";
   grid-template-columns: var(--utrecht-checkbox-size) 100fr;
-  /*
-  .utrecht-form-field__label .utrecht-form-field__input {
-    margin-inline-start: calc(
-      -1 * (var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end, 12px))
-    );
-    margin-inline-end: var(--utrecht-checkbox-margin-inline-end, 12px);
-  }
-  */
 }
 .utrecht-form-field--checkbox .utrecht-form-field__label:has(.utrecht-form-field__input) {
   margin-inline-start: calc(-1 * (var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end, 12px)));
@@ -50,16 +38,8 @@
 .utrecht-form-field--radio {
   display: grid;
   gap: 0 var(--utrecht-radio-button-margin-inline-end, 12px);
-  grid-template-areas: "input label" "input description" "input description-invalid";
+  grid-template-areas: "input label" "input description" "input error-message";
   grid-template-columns: var(--utrecht-radio-button-size) 100fr;
-  /*
-  .utrecht-form-field__label .utrecht-form-field__input {
-    margin-inline-start: calc(
-      -1 * (var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end, 12px))
-    );
-    margin-inline-end: var(--utrecht-checkbox-margin-inline-end, 12px);
-  }
-  */
 }
 .utrecht-form-field--radio .utrecht-form-field__label:has(.utrecht-form-field__input) {
   margin-inline-start: calc(-1 * (var(--utrecht-radio-button-size) + var(--utrecht-radio-button-margin-inline-end, 12px)));
@@ -76,8 +56,6 @@
 }
 
 .utrecht-form-field__label {
-  /* Assign the margin-block-end to padding instead, so the clickable area of the label increases
-  and we avoid a small gap between the label and input that cannot be clicked to focus the input. */
   grid-area: label;
   margin-block-end: var(--utrecht-form-field-label-margin-block-end);
   margin-block-start: 0;
@@ -92,7 +70,7 @@
 }
 
 .utrecht-form-field .utrecht-form-field-description--invalid {
-  grid-area: description-invalid;
+  grid-area: error-message;
   order: 3;
 }
 
@@ -106,4 +84,9 @@
 .utrecht-form-field__description--before {
   grid-area: description-before;
   order: 4;
+}
+
+.utrecht-form-field__error-message {
+  grid-area: error-message;
+  order: 3;
 }

package/dist/index.min.css

@@ -0,0 +1 @@
+.utrecht-form-field{break-inside:avoid;font-family:var(--utrecht-document-font-family,inherit);margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-field-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-field-margin-block-start, 0));page-break-inside:avoid}.utrecht-form-field--distanced{--utrecht-space-around:1}.utrecht-form-field--invalid{border-inline-start-color:var(--utrecht-form-field-invalid-border-inline-start-color);border-inline-start-style:solid;border-inline-start-width:var(--utrecht-form-field-invalid-border-inline-start-width,0);padding-inline-start:var(--utrecht-form-field-invalid-padding-inline-start)}.utrecht-form-field--checkbox{display:grid;gap:0 var(--utrecht-checkbox-margin-inline-end,12px);grid-template-areas:"input label" "input description" "input error-message";grid-template-columns:var(--utrecht-checkbox-size) 100fr}.utrecht-form-field--checkbox .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc((var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end, 12px))*-1)}.utrecht-form-field--checkbox .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-checkbox-margin-inline-end,12px)}.utrecht-form-field--radio{display:grid;gap:0 var(--utrecht-radio-button-margin-inline-end,12px);grid-template-areas:"input label" "input description" "input error-message";grid-template-columns:var(--utrecht-radio-button-size) 100fr}.utrecht-form-field--radio .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc((var(--utrecht-radio-button-size) + var(--utrecht-radio-button-margin-inline-end, 12px))*-1)}.utrecht-form-field--radio .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-radio-button-margin-inline-end,12px)}.utrecht-form-field__input{grid-area:input;margin-block-end:0;margin-block-start:0;order:5}.utrecht-form-field__label{grid-area:label;margin-block-end:var(--utrecht-form-field-label-margin-block-end);margin-block-start:0;order:1}.utrecht-form-field .utrecht-form-field-description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field .utrecht-form-field-description--invalid{grid-area:error-message;order:3}.utrecht-form-field__description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field__description--before{grid-area:description-before;order:4}.utrecht-form-field__error-message{grid-area:error-message;order:3}

package/dist/index.mjs

@@ -0,0 +1 @@
+export default ".utrecht-form-field{break-inside:avoid;font-family:var(--utrecht-document-font-family,inherit);margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-field-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-field-margin-block-start, 0));page-break-inside:avoid}.utrecht-form-field--distanced{--utrecht-space-around:1}.utrecht-form-field--invalid{border-inline-start-color:var(--utrecht-form-field-invalid-border-inline-start-color);border-inline-start-style:solid;border-inline-start-width:var(--utrecht-form-field-invalid-border-inline-start-width,0);padding-inline-start:var(--utrecht-form-field-invalid-padding-inline-start)}.utrecht-form-field--checkbox{display:grid;gap:0 var(--utrecht-checkbox-margin-inline-end,12px);grid-template-areas:\"input label\" \"input description\" \"input error-message\";grid-template-columns:var(--utrecht-checkbox-size) 100fr}.utrecht-form-field--checkbox .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc((var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end, 12px))*-1)}.utrecht-form-field--checkbox .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-checkbox-margin-inline-end,12px)}.utrecht-form-field--radio{display:grid;gap:0 var(--utrecht-radio-button-margin-inline-end,12px);grid-template-areas:\"input label\" \"input description\" \"input error-message\";grid-template-columns:var(--utrecht-radio-button-size) 100fr}.utrecht-form-field--radio .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc((var(--utrecht-radio-button-size) + var(--utrecht-radio-button-margin-inline-end, 12px))*-1)}.utrecht-form-field--radio .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-radio-button-margin-inline-end,12px)}.utrecht-form-field__input{grid-area:input;margin-block-end:0;margin-block-start:0;order:5}.utrecht-form-field__label{grid-area:label;margin-block-end:var(--utrecht-form-field-label-margin-block-end);margin-block-start:0;order:1}.utrecht-form-field .utrecht-form-field-description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field .utrecht-form-field-description--invalid{grid-area:error-message;order:3}.utrecht-form-field__description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field__description--before{grid-area:description-before;order:4}.utrecht-form-field__error-message{grid-area:error-message;order:3}";

package/dist/index.mjs.d.ts

@@ -0,0 +1,2 @@
+declare const css: string;
+export default css;

package/docs/anatomy.nl.md

@@ -0,0 +1,30 @@
+<!-- @license CC0-1.0 -->
+
+# Anatomy
+
+Gebruik het _form field_ component om een alle onderdelen van een formulierveld in te verzamelen: het label, de _form control_, eventueel een extra beschrijving of de status en eventueel een validatiemelding of foutmelding.
+
+De volgende componenten zijn vaak onderdeel van een _form field_:
+
+- _form label_ component
+- _form field description_ component met extra beschrijving
+- _form field description_ component met een validatiemelding
+- een form control component zoals bijvoorbeeld:
+  - _textbox_ component
+  - _textarea_ component
+  - _checkbox_ component
+  - _radio button_ component
+  - _form select_ component
+  - etcetera
+- _form field description_ component met een foutmelding
+- _form field description_ component status van component
+
+## Gebruikte termen
+
+- `form` komt van `<form>` in HTML en `role="form"` in WAI-ARIA.
+- `field` komt van `<fieldset>` in HTML.
+- `invalid` komt van `aria-invalid` in WAI-ARIA.
+- `radio` komt van `<input type="radio">` in HTML.
+- `checkbox` komt van `<input type="checkbox">` in HTML.
+- `label` komt van `<label>` in HTML en `aria-labelledby` in WAI-ARIA.
+- `description` komt van `aria-describedby` in WAI-ARIA.

package/docs/technology-html.nl.md

@@ -0,0 +1,7 @@
+<!-- @license CC0-1.0 -->
+
+# HTML
+
+Gebruik een element `<div>` element voor formuliervelden met één _form control_. Een formulierveld moet meerdere `<p>` elementen kunnen bevatten, gebruik daarom geen `<p>` element voor de form field. Je moet geen _landmark role_ gebruiken voor een formulierveld (dus geen `<section>`) element.
+
+Voor formuliervelden met meerdere _form controls_ mag je een `<fieldset>` element gebruiken, bijvoorbeeld voor: jaar, maand en dag. Voor CSS is het handig om dan nog steeds een `<div>` om de fieldset heen te hebben: `<div><fieldset>...</fieldset></div>`.

package/docs/wcag.nl.md

@@ -0,0 +1,8 @@
+<!-- @license CC0-1.0 -->
+
+# Relevante WCAG regels
+
+- [WCAG eis 2.4.6](https://www.w3.org/TR/WCAG21/#headings-and-labels): de tekst van het label moet duidelijk zijn
+- [WCAG eis 3.3.9](https://www.w3.org/TR/WCAG22/#redundant-entry): gebruik niet een formulierveld voor informatie die de gebruiker eerder al heeft ingevuld.
+  - Vraag gebruikers niet twee keer achter elkaar identieke gegevens in te vullen, bijvoorbeeld om typfouten te herkennen en daarmee fouten te voorkomen. Bied liever een mogelijkheid aan om de gegevens te controleren als laatste stap.
+  - Vul bestaande gegevens in als standaardwaarde wanneer je de gegevens al hebt maar je graag zeker wilt weken of de oude gegevens nog juist zijn.

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.0",
+  "version": "1.4.0",
   "author": "Community for NL Design System",
   "description": "Form field component for the Municipality of Utrecht based on the NL Design System architecture",
   "license": "EUPL-1.2",
@@ -12,7 +12,7 @@
   ],
   "main": "dist/index.css",
   "devDependencies": {
-    "rollup": "4.18.0"
+    "@utrecht/build-utils-css": "0.0.1"
   },
   "keywords": [
     "nl-design-system"
@@ -26,7 +26,7 @@
     "directory": "components/form-field"
   },
   "scripts": {
-    "build": "rollup -c ../rollup.config.mjs",
+    "build": "build-css-package",
     "clean": "rimraf dist"
   }
 }

package/src/_mixin.scss

@@ -1,6 +1,7 @@
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 
 @mixin reset-p {
@@ -35,7 +36,7 @@
   --utrecht-space-around: 0;
 
   display: grid;
-  grid-template-areas: "label" "description" "description-before" "description-invalid" "input" "description-after";
+  grid-template-areas: "label" "description" "description-before" "error-message" "input" "description-after";
 }
 
 @mixin utrecht-form-field--option {
@@ -83,11 +84,16 @@
   order: 2;
 }
 
-@mixin utrecht-form-field__description--invalid {
-  grid-area: description-invalid;
+@mixin utrecht-form-field__error-message {
+  grid-area: error-message;
   order: 3;
 }
 
+/** @deprecated */
+@mixin utrecht-form-field__description--invalid {
+  @include utrecht-form-field__error-message;
+}
+
 @mixin utrecht-form-field__description--after {
   grid-area: description-after;
   order: 6;
@@ -101,7 +107,7 @@
 @mixin utrecht-form-field--checkbox {
   display: grid;
   gap: 0 var(--utrecht-checkbox-margin-inline-end, 12px);
-  grid-template-areas: "input label" "input description" "input description-invalid";
+  grid-template-areas: "input label" "input description" "input error-message";
   grid-template-columns: var(--utrecht-checkbox-size) 100fr;
 
   /*
@@ -123,7 +129,7 @@
 @mixin utrecht-form-field--radio {
   display: grid;
   gap: 0 var(--utrecht-radio-button-margin-inline-end, 12px);
-  grid-template-areas: "input label" "input description" "input description-invalid";
+  grid-template-areas: "input label" "input description" "input error-message";
   grid-template-columns: var(--utrecht-radio-button-size) 100fr;
 
   /*

package/src/index.scss

@@ -1,6 +1,7 @@
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 
 @import "./mixin";
@@ -42,7 +43,7 @@
 }
 
 .utrecht-form-field .utrecht-form-field-description--invalid {
-  @include utrecht-form-field__description--invalid;
+  @include utrecht-form-field__error-message;
 }
 
 .utrecht-form-field__description {
@@ -52,3 +53,7 @@
 .utrecht-form-field__description--before {
   @include utrecht-form-field__description--before;
 }
+
+.utrecht-form-field__error-message {
+  @include utrecht-form-field__error-message;
+}

package/dist/index.js

@@ -1 +0,0 @@
-var undefined$1 = undefined;export{undefined$1 as default};

package/src/stories/_email.md

@@ -1,4 +0,0 @@
-<!-- @license CC0-1.0 -->
-<!-- markdownlint-disable MD041 -->
-
-Als je vraagt om het e-mailadres van een persoon, leg dan uit waar het voor gebruikt zal worden.

package/src/stories/_new-password.md

@@ -1,6 +0,0 @@
-<!-- @license CC0-1.0 -->
-<!-- markdownlint-disable MD041 -->
-
-Gebruik voor een nieuw wachtwoord `autocomplete="new-password"`.
-
-Gebruik voor een wachtwoord geen `maxlength` attribuut in HTML omdat het problemen veroorzaakt als het niet duidelijk dat een gekozen wachtwoord te lang is. Gebruik een melding wanneer het ingevulde wachtwoord te lang is. Als een gebruiker een wachtwoord plakt of een _password manager_ een wachtwoord invult invult dat langer is dan `maxlength` dan kan het laatste gedeelte ongemerkt ontbreken. Ongemerkt wordt dan een korter wachtwoord opgeslagen, daarna kan de gebruiker niet inloggen met het gekozen wachtwoord.

package/src/stories/_tel.md

@@ -1,4 +0,0 @@
-<!-- @license CC0-1.0 -->
-<!-- markdownlint-disable MD041 -->
-
-Als je vraagt om het telefoonnumer van een persoon, leg dan uit waar het voor gebruikt zal worden. Niet alle gebruikers kunnen de telefoon beantwoorden, voor deze gebruikers is e-mail vaak een goed alternatief.

package/src/stories/checkbox-group.stories.mdx

@@ -1,215 +0,0 @@
-{/* @license CC0-1.0 */}
-
-import { Canvas, Meta, Story } from "@storybook/blocks";
-import { argTypes, defaultArgs, exampleArgs, FormFieldCheckboxGroup } from "../story-template";
-import "../../../checkbox/src/index.scss";
-import "../../../form-label/src/index.scss";
-import "../index.scss";
-
-<Meta
-  id="css-form-field--checkbox-group"
-  title="CSS Component/Form field/with checkbox group"
-  component={FormFieldCheckboxGroup}
-  argTypes={argTypes}
-  args={defaultArgs}
-  parameters={{
-    status: {
-      type: "WORK IN PROGRESS",
-    },
-  }}
-/>
-
-# Form field with checkbox group
-
-## with only a label
-
-<Canvas>
-  <Story
-    name="label"
-    args={{
-      ...exampleArgs,
-      groupId: "0128c307-ead5-40d4-9a99-c91aa6fa4a99",
-      groupLabel: "Hoe wil je dat wij contact opnemen?",
-      options: [
-        {
-          id: "a374296c-669e-45d0-a26d-e62e959958dd",
-          name: "phone",
-          value: "true",
-          label: "Telefoon",
-          checked: true,
-        },
-        {
-          id: "714205e8-d33b-40d8-9721-e2ea71c62a20",
-          name: "email",
-          value: "true",
-          label: "E-mail",
-        },
-        {
-          id: "67fa8ea7-6b75-4049-ae4f-ebaa816e4c35",
-          name: "mail",
-          value: "true",
-          label: "Brief",
-        },
-      ],
-    }}
-  >
-    {FormFieldCheckboxGroup.bind({})}
-  </Story>
-</Canvas>
-
-## with an checkbox group description
-
-<Canvas>
-  <Story
-    name="group description"
-    args={{
-      ...exampleArgs,
-      groupId: "d7218515-bf54-45c1-ba57-a72af5d7fd42",
-      groupDescription: "Kies één of meerdere opties.",
-      groupLabel: "Hoe wil je dat wij contact opnemen?",
-      options: [
-        {
-          id: "2a5524f5-6ee8-4be1-90a1-87d0d619d2ee",
-          name: "phone",
-          value: "true",
-          label: "Telefoon",
-          checked: true,
-        },
-        {
-          id: "1fe84cc2-16fc-4e9b-9498-856583652181",
-          name: "email",
-          value: "true",
-          label: "E-mail",
-        },
-        {
-          id: "96493bfe-2caa-4cb3-80ce-a4a46fc69c10",
-          name: "mail",
-          value: "true",
-          label: "Brief",
-        },
-      ],
-    }}
-  >
-    {FormFieldCheckboxGroup.bind({})}
-  </Story>
-</Canvas>
-
-## with checkbox option descriptions
-
-<Canvas>
-  <Story
-    name="option description"
-    args={{
-      ...exampleArgs,
-      groupId: "764bacdd-94b4-4774-be40-89e9e5f82c19",
-      groupLabel: "Hoe wil je dat wij contact opnemen?",
-      options: [
-        {
-          id: "28a9109b-eb9c-4119-abaa-02d09e8f359b",
-          name: "phone",
-          value: "true",
-          label: "Telefoon",
-          description: "We bellen je op (085) 555 0000",
-          checked: true,
-        },
-        {
-          id: "3bdeeba2-199f-44e9-9184-ed8dbfb2fc37",
-          name: "email",
-          description: "Web mailen je op info@example.com",
-          value: "true",
-          label: "E-mail",
-        },
-        {
-          id: "2bb862c1-114e-4529-975e-1776df23f055",
-          name: "mail",
-          value: "true",
-          label: "Brief",
-          description: "Je ontvangt een brief op Stadhuisplein 1, Amsterdam",
-        },
-      ],
-    }}
-  >
-    {FormFieldCheckboxGroup.bind({})}
-  </Story>
-</Canvas>
-
-## with checkbox invalid option descriptions
-
-<Canvas>
-  <Story
-    name="option invalid"
-    args={{
-      ...exampleArgs,
-      groupId: "73a3f2c1-00e7-48b8-9ebb-1f51b6550f42",
-      groupLabel: "Hoe wil je dat wij contact opnemen?",
-      options: [
-        {
-          checked: true,
-          id: "c0972ecc-6eef-4bf9-80ab-c535fc0229b5",
-          invalid: true,
-          invalidDescription: "Wij hebben geen telefoonnumer van je. Vul eerst je profiel aan.",
-          label: "Telefoon",
-          name: "phone",
-          value: "true",
-        },
-        {
-          checked: true,
-          id: "714d33fd-4cc4-4113-9887-4c38e77a6532",
-          invalid: true,
-          invalidDescription: "Wij hebben geen e-mailadres van je. Vul eerst je profiel aan.",
-          label: "E-mail",
-          name: "email",
-          value: "true",
-        },
-        {
-          checked: true,
-          id: "10ee620a-af7e-4c67-9f6d-5519b3c45c6d",
-          invalid: true,
-          invalidDescription: "Wij hebben geen postadres van je. Vul eerst je profiel aan.",
-          label: "Brief",
-          name: "mail",
-          value: "true",
-        },
-      ],
-    }}
-  >
-    {FormFieldCheckboxGroup.bind({})}
-  </Story>
-</Canvas>
-
-## with checkbox invalid grou description
-
-<Canvas>
-  <Story
-    name="group invalid"
-    args={{
-      ...exampleArgs,
-      groupId: "707b7bd8-d476-472c-ac9d-3c1a4caac4c2",
-      groupLabel: "Hoe wil je dat wij contact opnemen?",
-      groupInvalid: true,
-      groupInvalidDescription: "Fout: je hebt geen keuze gemaakt. Kies één of meerdere opties.",
-      options: [
-        {
-          id: "80d14d58-bc99-4c53-824e-36473d6506c7",
-          label: "Telefoon",
-          name: "phone",
-          value: "true",
-        },
-        {
-          id: "0b4aea63-ec5b-4259-b008-ba8eaf8b03e3",
-          label: "E-mail",
-          name: "email",
-          value: "true",
-        },
-        {
-          id: "9360080d-3a48-444d-bc2c-1cd1a40940f9",
-          label: "Brief",
-          name: "mail",
-          value: "true",
-        },
-      ],
-    }}
-  >
-    {FormFieldCheckboxGroup.bind({})}
-  </Story>
-</Canvas>