diff --git a/components/form-field/css/index.scss b/components/form-field/css/index.scss
index a4f026ed62..bd29f3eb9e 100644
--- a/components/form-field/css/index.scss
+++ b/components/form-field/css/index.scss
@@ -3,6 +3,10 @@
  * Copyright (c) 2021 Community for NL Design System
  */
 
+.rvo-form-field {
+  clear: both;
+}
+
 .rvo-form-field__label-text {
-  font-weight: var(--rvo-form-field-label-font-weight);
+  font-weight: var(--utrecht-form-label-font-weight);
 }
diff --git a/documentation/demopages/algemeen/Filters.tsx b/documentation/demopages/algemeen/Filters.tsx
index d39473a2ca..88c892bdfc 100644
--- a/documentation/demopages/algemeen/Filters.tsx
+++ b/documentation/demopages/algemeen/Filters.tsx
@@ -1,6 +1,4 @@
-// import { Button } from '@nl-rvo/components/button/css/template';
 import { TextInputField } from '@nl-rvo/components/form-field-textinput/css/template';
-import { Fieldset } from '@nl-rvo/components/form-fieldset/css/template';
 import { Header } from '@nl-rvo/components/header/css/template';
 import { Heading } from '@nl-rvo/components/heading/css/template';
 import { Icon } from '@nl-rvo/components/icon/css/template';
@@ -9,6 +7,7 @@ import { Link } from '@nl-rvo/components/link/css/template';
 import { MaxWidthLayout } from '@nl-rvo/components/max-width-layout/css/template';
 import { MenuBar } from '@nl-rvo/components/menubar/css/template';
 import '../common/style.scss';
+import { Fieldset, FormField } from '@utrecht/component-library-react';
 
 const Filters = () => {
   return (
@@ -46,233 +45,242 @@ const Filters = () => {
                 </MaxWidthLayout>
                 <LayoutColumnRow size="md">
                   <div className="rvo-tmp-filters">
-                    <Fieldset legend="">
-                      <MaxWidthLayout size="lg">
-                        <LayoutColumnRow size="xl" row={true}>
+                    <Fieldset className={'utrecht-form-fieldset--grid'}>
+                      <MaxWidthLayout size="sm">
+                        <FormField>
                           <TextInputField label="Zoek op trefwoord/code"></TextInputField>
-                          <details className="rvo-tmp-filter">
-                            <summary>
-                              <div className="rvo-form-field rvo-layout-column rvo-layout-gap--sm">
-                                <label
-                                  className="rvo-form-field__label rvo-layout-column rvo-layout-gap--2xs"
-                                  htmlFor="fieldId"
-                                >
-                                  <span className="rvo-form-field__label-text">Ik wil duurzaam investeren in</span>
-                                </label>
-                                <div className="rvo-select-wrapper">
-                                  <div className="utrecht-select utrecht-select--html-select rvo-filter-select-placeholder">
-                                    Maak een keuze
-                                  </div>
-                                </div>
-                              </div>
-                            </summary>
-                            <div className="rvo-checkbox__group rvo-layout-column rvo-layout-gap--sm">
-                              <label
-                                className="rvo-checkbox rvo-checkbox--not-checked rvo-layout-row rvo-layout-gap--sm"
-                                htmlFor="optionA"
-                              >
-                                <input
-                                  type="checkbox"
-                                  id="optionA"
-                                  name="group"
-                                  className="rvo-checkbox__input"
-                                  value=""
-                                />
-                                Agro en visserij
-                              </label>
-                              <label
-                                className="rvo-checkbox rvo-checkbox--checked rvo-layout-row rvo-layout-gap--sm"
-                                htmlFor="optionB"
-                              >
-                                <input
-                                  type="checkbox"
-                                  id="optionB"
-                                  name="group"
-                                  className="rvo-checkbox__input"
-                                  value=""
-                                />
-                                Bouw en infrastructuur
-                              </label>
-                              <label
-                                className="rvo-checkbox rvo-checkbox--not-checked rvo-layout-row rvo-layout-gap--sm"
-                                htmlFor="optionC"
-                              >
-                                <input
-                                  type="checkbox"
-                                  id="optionC"
-                                  name="group"
-                                  className="rvo-checkbox__input"
-                                  value=""
-                                />
-                                Groot- en detailhandel
-                              </label>
+                        </FormField>
+                      </MaxWidthLayout>
+                      <FormField className="utrecht-form-field--quarter utrecht-form-field--start">
+                        <details className="rvo-tmp-filter">
+                          <summary>
+                            <div className="rvo-form-field rvo-layout-column rvo-layout-gap--sm">
                               <label
-                                className="rvo-checkbox rvo-checkbox--not-checked rvo-layout-row rvo-layout-gap--sm"
-                                htmlFor="optionD"
+                                className="rvo-form-field__label rvo-layout-column rvo-layout-gap--2xs"
+                                htmlFor="fieldId"
                               >
-                                <input
-                                  type="checkbox"
-                                  id="optionD"
-                                  name="group"
-                                  className="rvo-checkbox__input"
-                                  value=""
-                                />
-                                Milieusector
+                                <span className="rvo-form-field__label-text">Ik wil duurzaam investeren in</span>
                               </label>
-                            </div>
-                          </details>
-                          <details className="rvo-tmp-filter">
-                            <summary>
-                              <div className="rvo-form-field rvo-layout-column rvo-layout-gap--sm">
-                                <label
-                                  className="rvo-form-field__label rvo-layout-column rvo-layout-gap--2xs"
-                                  htmlFor="fieldId"
-                                >
-                                  <span className="rvo-form-field__label-text">Mijn milieudoel is</span>
-                                </label>
-                                <div className="rvo-select-wrapper">
-                                  <div className="utrecht-select utrecht-select--html-select rvo-filter-select-placeholder">
-                                    Maak een keuze
-                                  </div>
+                              <div className="rvo-select-wrapper">
+                                <div className="utrecht-select utrecht-select--html-select rvo-filter-select-placeholder">
+                                  Maak een keuze
                                 </div>
                               </div>
-                            </summary>
-                            <div className="rvo-checkbox__group rvo-layout-column rvo-layout-gap--sm">
-                              <label
-                                className="rvo-checkbox rvo-checkbox--not-checked rvo-layout-row rvo-layout-gap--sm"
-                                htmlFor="optionA1"
-                              >
-                                <input
-                                  type="checkbox"
-                                  id="optionA1"
-                                  name="group"
-                                  className="rvo-checkbox__input"
-                                  value=""
-                                />
-                                Afval(water) verwerken
-                              </label>
-                              <label
-                                className="rvo-checkbox rvo-checkbox--checked rvo-layout-row rvo-layout-gap--sm"
-                                htmlFor="optionB1"
-                              >
-                                <input
-                                  type="checkbox"
-                                  id="optionB1"
-                                  name="group"
-                                  className="rvo-checkbox__input"
-                                  value=""
-                                />
-                                Bodem beschermen
-                              </label>
-                              <label
-                                className="rvo-checkbox rvo-checkbox--not-checked rvo-layout-row rvo-layout-gap--sm"
-                                htmlFor="optionC1"
-                              >
-                                <input
-                                  type="checkbox"
-                                  id="optionC1"
-                                  name="group"
-                                  className="rvo-checkbox__input"
-                                  value=""
-                                />
-                                Broeikasgassen reduceren
-                              </label>
+                            </div>
+                          </summary>
+                          <div className="rvo-checkbox__group rvo-layout-column rvo-layout-gap--sm">
+                            <label
+                              className="rvo-checkbox rvo-checkbox--not-checked rvo-layout-row rvo-layout-gap--sm"
+                              htmlFor="optionA"
+                            >
+                              <input
+                                type="checkbox"
+                                id="optionA"
+                                name="group"
+                                className="rvo-checkbox__input"
+                                value=""
+                              />
+                              Agro en visserij
+                            </label>
+                            <label
+                              className="rvo-checkbox rvo-checkbox--checked rvo-layout-row rvo-layout-gap--sm"
+                              htmlFor="optionB"
+                            >
+                              <input
+                                type="checkbox"
+                                id="optionB"
+                                name="group"
+                                className="rvo-checkbox__input"
+                                value=""
+                              />
+                              Bouw en infrastructuur
+                            </label>
+                            <label
+                              className="rvo-checkbox rvo-checkbox--not-checked rvo-layout-row rvo-layout-gap--sm"
+                              htmlFor="optionC"
+                            >
+                              <input
+                                type="checkbox"
+                                id="optionC"
+                                name="group"
+                                className="rvo-checkbox__input"
+                                value=""
+                              />
+                              Groot- en detailhandel
+                            </label>
+                            <label
+                              className="rvo-checkbox rvo-checkbox--not-checked rvo-layout-row rvo-layout-gap--sm"
+                              htmlFor="optionD"
+                            >
+                              <input
+                                type="checkbox"
+                                id="optionD"
+                                name="group"
+                                className="rvo-checkbox__input"
+                                value=""
+                              />
+                              Milieusector
+                            </label>
+                          </div>
+                        </details>
+                      </FormField>
+                      <FormField className={'utrecht-form-field--quarter'}>
+                        <details className="rvo-tmp-filter">
+                          <summary>
+                            <div className="rvo-form-field rvo-layout-column rvo-layout-gap--sm">
                               <label
-                                className="rvo-checkbox rvo-checkbox--not-checked rvo-layout-row rvo-layout-gap--sm"
-                                htmlFor="optionD1"
+                                className="rvo-form-field__label rvo-layout-column rvo-layout-gap--2xs"
+                                htmlFor="fieldId"
                               >
-                                <input
-                                  type="checkbox"
-                                  id="optionD1"
-                                  name="group"
-                                  className="rvo-checkbox__input"
-                                  value=""
-                                />
-                                Circular ondernemen
+                                <span className="rvo-form-field__label-text">Mijn milieudoel is</span>
                               </label>
-                            </div>
-                          </details>
-                          <details className="rvo-tmp-filter">
-                            <summary>
-                              <div className="rvo-form-field rvo-layout-column rvo-layout-gap--sm">
-                                <label
-                                  className="rvo-form-field__label rvo-layout-column rvo-layout-gap--2xs"
-                                  htmlFor="fieldId"
-                                >
-                                  <span className="rvo-form-field__label-text">Jaar</span>
-                                </label>
-                                <div className="rvo-select-wrapper">
-                                  <div className="utrecht-select utrecht-select--html-select rvo-filter-select-placeholder">
-                                    Maak een keuze
-                                  </div>
+                              <div className="rvo-select-wrapper">
+                                <div className="utrecht-select utrecht-select--html-select rvo-filter-select-placeholder">
+                                  Maak een keuze
                                 </div>
                               </div>
-                            </summary>
-                            <div className="rvo-checkbox__group rvo-layout-column rvo-layout-gap--sm">
+                            </div>
+                          </summary>
+                          <div className="rvo-checkbox__group rvo-layout-column rvo-layout-gap--sm">
+                            <label
+                              className="rvo-checkbox rvo-checkbox--not-checked rvo-layout-row rvo-layout-gap--sm"
+                              htmlFor="optionA1"
+                            >
+                              <input
+                                type="checkbox"
+                                id="optionA1"
+                                name="group"
+                                className="rvo-checkbox__input"
+                                value=""
+                              />
+                              Afval(water) verwerken
+                            </label>
+                            <label
+                              className="rvo-checkbox rvo-checkbox--checked rvo-layout-row rvo-layout-gap--sm"
+                              htmlFor="optionB1"
+                            >
+                              <input
+                                type="checkbox"
+                                id="optionB1"
+                                name="group"
+                                className="rvo-checkbox__input"
+                                value=""
+                              />
+                              Bodem beschermen
+                            </label>
+                            <label
+                              className="rvo-checkbox rvo-checkbox--not-checked rvo-layout-row rvo-layout-gap--sm"
+                              htmlFor="optionC1"
+                            >
+                              <input
+                                type="checkbox"
+                                id="optionC1"
+                                name="group"
+                                className="rvo-checkbox__input"
+                                value=""
+                              />
+                              Broeikasgassen reduceren
+                            </label>
+                            <label
+                              className="rvo-checkbox rvo-checkbox--not-checked rvo-layout-row rvo-layout-gap--sm"
+                              htmlFor="optionD1"
+                            >
+                              <input
+                                type="checkbox"
+                                id="optionD1"
+                                name="group"
+                                className="rvo-checkbox__input"
+                                value=""
+                              />
+                              Circular ondernemen
+                            </label>
+                          </div>
+                        </details>
+                      </FormField>
+                      <FormField className={'utrecht-form-field--quarter'}>
+                        <details className="rvo-tmp-filter">
+                          <summary>
+                            <div className="rvo-form-field rvo-layout-column rvo-layout-gap--sm">
                               <label
-                                className="rvo-checkbox rvo-checkbox--not-checked rvo-layout-row rvo-layout-gap--sm"
-                                htmlFor="optionA2"
+                                className="rvo-form-field__label rvo-layout-column rvo-layout-gap--2xs"
+                                htmlFor="fieldId"
                               >
-                                <input
-                                  type="checkbox"
-                                  id="optionA2"
-                                  name="group"
-                                  className="rvo-checkbox__input"
-                                  value=""
-                                />
-                                2022
+                                <span className="rvo-form-field__label-text">Jaar</span>
                               </label>
-                            </div>
-                          </details>
-                          <details className="rvo-tmp-filter">
-                            <summary>
-                              <div className="rvo-form-field rvo-layout-column rvo-layout-gap--sm">
-                                <label
-                                  className="rvo-form-field__label rvo-layout-column rvo-layout-gap--2xs"
-                                  htmlFor="fieldId"
-                                >
-                                  <span className="rvo-form-field__label-text">Regeling</span>
-                                </label>
-                                <div className="rvo-select-wrapper">
-                                  <div className="utrecht-select utrecht-select--html-select rvo-filter-select-placeholder">
-                                    Maak een keuze
-                                  </div>
+                              <div className="rvo-select-wrapper">
+                                <div className="utrecht-select utrecht-select--html-select rvo-filter-select-placeholder">
+                                  Maak een keuze
                                 </div>
                               </div>
-                            </summary>
-                            <div className="rvo-checkbox__group rvo-layout-column rvo-layout-gap--sm">
-                              <label
-                                className="rvo-checkbox rvo-checkbox--not-checked rvo-layout-row rvo-layout-gap--sm"
-                                htmlFor="optionA3"
-                              >
-                                <input
-                                  type="checkbox"
-                                  id="optionA3"
-                                  name="group"
-                                  className="rvo-checkbox__input"
-                                  value=""
-                                />
-                                MIA\Vamil
-                              </label>
+                            </div>
+                          </summary>
+                          <div className="rvo-checkbox__group rvo-layout-column rvo-layout-gap--sm">
+                            <label
+                              className="rvo-checkbox rvo-checkbox--not-checked rvo-layout-row rvo-layout-gap--sm"
+                              htmlFor="optionA2"
+                            >
+                              <input
+                                type="checkbox"
+                                id="optionA2"
+                                name="group"
+                                className="rvo-checkbox__input"
+                                value=""
+                              />
+                              2022
+                            </label>
+                          </div>
+                        </details>
+                      </FormField>
+                      <FormField className={'utrecht-form-field--quarter'}>
+                        <details className="rvo-tmp-filter">
+                          <summary>
+                            <div className="rvo-form-field rvo-layout-column rvo-layout-gap--sm">
                               <label
-                                className="rvo-checkbox rvo-checkbox--checked rvo-layout-row rvo-layout-gap--sm"
-                                htmlFor="optionB3"
+                                className="rvo-form-field__label rvo-layout-column rvo-layout-gap--2xs"
+                                htmlFor="fieldId"
                               >
-                                <input
-                                  type="checkbox"
-                                  id="optionB3"
-                                  name="group"
-                                  className="rvo-checkbox__input"
-                                  value=""
-                                />
-                                EIA
+                                <span className="rvo-form-field__label-text">Regeling</span>
                               </label>
+                              <div className="rvo-select-wrapper">
+                                <div className="utrecht-select utrecht-select--html-select rvo-filter-select-placeholder">
+                                  Maak een keuze
+                                </div>
+                              </div>
                             </div>
-                          </details>
-                        </LayoutColumnRow>
-                      </MaxWidthLayout>
+                          </summary>
+                          <div className="rvo-checkbox__group rvo-layout-column rvo-layout-gap--sm">
+                            <label
+                              className="rvo-checkbox rvo-checkbox--not-checked rvo-layout-row rvo-layout-gap--sm"
+                              htmlFor="optionA3"
+                            >
+                              <input
+                                type="checkbox"
+                                id="optionA3"
+                                name="group"
+                                className="rvo-checkbox__input"
+                                value=""
+                              />
+                              MIA\Vamil
+                            </label>
+                            <label
+                              className="rvo-checkbox rvo-checkbox--checked rvo-layout-row rvo-layout-gap--sm"
+                              htmlFor="optionB3"
+                            >
+                              <input
+                                type="checkbox"
+                                id="optionB3"
+                                name="group"
+                                className="rvo-checkbox__input"
+                                value=""
+                              />
+                              EIA
+                            </label>
+                          </div>
+                        </details>
+                      </FormField>
                     </Fieldset>
                   </div>
+
                   <LayoutColumnRow size="2xl">
                     <div className="rvo-active-filters">
                       <MaxWidthLayout size="sm">
@@ -334,6 +342,7 @@ const Filters = () => {
                               </div>
                               <a href="#">
                                 <img
+                                  alt={''}
                                   className="rvo-result-image"
                                   src="https://www.rvo.nl/files/file/styles/content/public/2022-07/8-Augustus%202022%20JPJ%20JIC%20Schiphol30.jpg"
                                 ></img>
diff --git a/documentation/demopages/algemeen/SearchInNav.tsx b/documentation/demopages/algemeen/SearchInNav.tsx
index 42012fdc78..28041934ce 100644
--- a/documentation/demopages/algemeen/SearchInNav.tsx
+++ b/documentation/demopages/algemeen/SearchInNav.tsx
@@ -1,12 +1,11 @@
 import { Button } from '@nl-rvo/components/button/css/template';
 import { TextInputField } from '@nl-rvo/components/form-field-textinput/css/template';
-import { Fieldset } from '@nl-rvo/components/form-fieldset/css/template';
 import { Header } from '@nl-rvo/components/header/css/template';
 import { LayoutColumnRow } from '@nl-rvo/components/layout-column-row/css/template';
 import { MaxWidthLayout } from '@nl-rvo/components/max-width-layout/css/template';
 import { MenuBar } from '@nl-rvo/components/menubar/css/template';
 import '../common/style.scss';
-
+import { Fieldset, FormField } from '@utrecht/component-library-react';
 const SearchInNav = () => {
   return (
     <div className="rvo-demo-page">
@@ -25,27 +24,31 @@ const SearchInNav = () => {
       />
       <LayoutColumnRow size="md">
         <div className="search-form">
-          <Fieldset legend="">
-            <div className="rvo-form-layout">
-              <MaxWidthLayout size="sm">
-                <div className="rvo-inline-form">
-                  <TextInputField label="Zoekterm"></TextInputField>
-                  <Button
-                    kind="primary"
-                    size="md"
-                    label="Zoeken"
-                    active={false}
-                    busy={false}
-                    focus={false}
-                    focusVisible={false}
-                    disabled={false}
-                    hover={false}
-                    showIcon="no"
-                  ></Button>
-                </div>
-              </MaxWidthLayout>
-            </div>
-          </Fieldset>
+          <div className="rvo-form-layout">
+            <MaxWidthLayout size="sm">
+              <div className="rvo-inline-form">
+                <Fieldset className={'utrecht-form-fieldset--grid'}>
+                  <FormField className="utrecht-form-field--xl">
+                    <TextInputField label="Zoekterm"></TextInputField>
+                  </FormField>
+                  <FormField className="utrecht-form-field--sm">
+                    <Button
+                      kind="primary"
+                      size="md"
+                      label="Zoeken"
+                      active={false}
+                      busy={false}
+                      focus={false}
+                      focusVisible={false}
+                      disabled={false}
+                      hover={false}
+                      showIcon="no"
+                    ></Button>
+                  </FormField>
+                </Fieldset>
+              </div>
+            </MaxWidthLayout>
+          </div>
         </div>
         <MaxWidthLayout size="sm">
           <main>
diff --git a/documentation/demopages/common/style.scss b/documentation/demopages/common/style.scss
index ee1c46e732..007a95007f 100644
--- a/documentation/demopages/common/style.scss
+++ b/documentation/demopages/common/style.scss
@@ -440,7 +440,7 @@
     line-height: var(--rvo-line-height-md);
     margin-inline-end: auto;
     margin-inline-start: auto;
-    max-width: 580;
+    max-width: 580px;
     padding-inline-end: var(--rvo-space-xl);
     padding-inline-start: var(--rvo-space-xl);
   }
@@ -689,6 +689,13 @@
 
   /* @SEARCH IN NAV */
 
+  /* stylelint-disable */
+  .search-form {
+    background-color: var(--rvo-color-grijs1);
+    padding-block-end: var(--rvo-space-xl);
+  }
+  /* stylelint-enable */
+
   .rvo-topnav__link--search-active {
     background-color: var(--rvo-color-grijs1);
     color: var(--rvo-color-grijs7);
diff --git a/documentation/demopages/nl-design-system/basiselementen/basiselementen.stories.mdx b/documentation/demopages/nl-design-system/basiselementen/basiselementen.stories.mdx
new file mode 100644
index 0000000000..f686803203
--- /dev/null
+++ b/documentation/demopages/nl-design-system/basiselementen/basiselementen.stories.mdx
@@ -0,0 +1,25 @@
+import { Canvas, Meta, Story } from "@storybook/addon-docs";
+import Form from "./form";
+
+<Meta
+  title="Pagina's/NL Design System Community/Basiselementen"
+  parameters={{
+    layout: "fullscreen",
+    status: {
+      type: "WORK IN PROGRESS",
+    },
+    docs: {
+      source: {
+        state: "closed",
+      },
+    },
+  }}
+/>
+
+# Demo
+
+<Canvas>
+  <Story name="Form">
+    <Form />
+  </Story>
+</Canvas>
diff --git a/documentation/demopages/nl-design-system/basiselementen/form.tsx b/documentation/demopages/nl-design-system/basiselementen/form.tsx
new file mode 100644
index 0000000000..b914dcb99f
--- /dev/null
+++ b/documentation/demopages/nl-design-system/basiselementen/form.tsx
@@ -0,0 +1,125 @@
+import '../common/style.scss';
+import {
+  Button,
+  ButtonGroup,
+  CustomRadioButton,
+  Fieldset,
+  FieldsetLegend,
+  FormField,
+  FormFieldDescription,
+  FormLabel,
+  Heading1,
+  Textbox,
+} from '@utrecht/component-library-react';
+
+const Form = () => {
+  return (
+    <div className={'basiselementen-demo-page'}>
+      <Heading1>Gegevens zonnepanelen invullen</Heading1>
+      <form className="basiselementen-layout-form">
+        <Fieldset>
+          {' '}
+          <Fieldset className={'utrecht-form-fieldset--subtle'}>
+            <FormField>
+              <FormLabel htmlFor={'realname'}>Uw naam</FormLabel>
+              <Textbox id={'realname'}></Textbox>
+            </FormField>
+          </Fieldset>
+          <Fieldset className={'utrecht-form-fieldset--subtle'}>
+            <FieldsetLegend className={'utrecht-form-fieldset__legend--label'}>
+              Staat uw naam op de energierekening
+            </FieldsetLegend>
+            <FormField className={'utrecht-form-field--xs utrecht-form-field--start'}>
+              <FormLabel htmlFor={'realnameA'}>
+                <CustomRadioButton name={'hasrealname'} id={'realnameA'} />
+                Ja
+              </FormLabel>
+            </FormField>
+            <FormField className={'utrecht-form-field--xs utrecht-form-field--start'}>
+              <FormLabel htmlFor={'realnameB'}>
+                <CustomRadioButton name={'hasrealname'} id={'realnameB'} />
+                Nee
+              </FormLabel>
+            </FormField>
+          </Fieldset>
+        </Fieldset>
+        <Fieldset className={'utrecht-form-fieldset--subtle'}>
+          <FieldsetLegend className={'utrecht-form-fieldset__legend--label'}>
+            Staat uw naam op de factuur van de zonnepanelen
+          </FieldsetLegend>
+          <FormField className={'utrecht-form-field--xs utrecht-form-field--start'}>
+            <FormLabel htmlFor={'billingnameA'}>
+              <CustomRadioButton name={'hasbillingname'} id={'billingnameA'} />
+              Ja
+            </FormLabel>
+          </FormField>
+          <FormField className={'utrecht-form-field--xs utrecht-form-field--start'}>
+            <FormLabel htmlFor={'billingnameB'}>
+              <CustomRadioButton name={'hasbillingname'} id={'billingnameB'} />
+              Nee
+            </FormLabel>
+          </FormField>
+        </Fieldset>
+        <Fieldset>
+          <Fieldset aria-describedby={'billingdatedescription'} className={'utrecht-form-fieldset--subtle'}>
+            <FieldsetLegend className={'utrecht-form-fieldset__legend--label'}>Factuurdatum</FieldsetLegend>
+            <FormFieldDescription id={'billingdatedescription'}>
+              Vul de datum in die op de factuur van de zonnepanelen staat.
+            </FormFieldDescription>
+            <FormField className={'utrecht-form-field--xs'}>
+              <FormLabel htmlFor={'day'}>Dag</FormLabel>
+              <Textbox id={'day'} invalid={true}></Textbox>
+            </FormField>
+            <FormField className={'utrecht-form-field--xs '}>
+              <FormLabel htmlFor={'month'}>Maand</FormLabel>
+              <Textbox id={'month'} invalid={true}></Textbox>
+            </FormField>
+            <FormField className={'utrecht-form-field--sm '}>
+              <FormLabel htmlFor={'year'}>Jaar</FormLabel>
+              <Textbox id={'year'} invalid={true}></Textbox>
+            </FormField>
+            <FormFieldDescription invalid={true} id={'invalidbillingdate'}>
+              Vul een geldige datum in.
+            </FormFieldDescription>
+          </Fieldset>
+          <Fieldset aria-describedby={'billingaddressdescription'} className={'utrecht-form-fieldset--subtle'}>
+            <FieldsetLegend className={'utrecht-form-fieldset__legend--label'}>Adres zonnepanelen</FieldsetLegend>
+            <FormFieldDescription id={'billingaddressdescription'}>
+              Vul het adres in waar de zonnepanelen zijn geplaatst.
+            </FormFieldDescription>
+            <FormField className={'utrecht-form-field--lg'}>
+              <FormLabel htmlFor={'street'}>Straatnaam</FormLabel>
+              <Textbox id={'street'}></Textbox>
+            </FormField>
+            <FormField className={'utrecht-form-field--sm'}>
+              <FormLabel htmlFor={'housenumber'}>Huisnummer</FormLabel>
+              <Textbox id={'housenumber'}></Textbox>
+            </FormField>
+            <FormField className={'utrecht-form-field--sm'}>
+              <FormLabel htmlFor={'suffix'}>Toevoeging</FormLabel>
+              <Textbox id={'suffix'}></Textbox>
+            </FormField>
+            <FormField className={'utrecht-form-field--md utrecht-form-field--start'}>
+              <FormLabel htmlFor={'postcode'}>Postcode</FormLabel>
+              <Textbox id={'postcode'}></Textbox>
+            </FormField>
+            <FormField className={'utrecht-form-field--lg'}>
+              <FormLabel htmlFor={'city'}>Plaatsnaam</FormLabel>
+              <Textbox id={'city'}></Textbox>
+            </FormField>
+          </Fieldset>
+        </Fieldset>
+        <ButtonGroup className="utrecht-button-group--horizontal">
+          <Button appearance="secondary-action-button" busy={false} disabled={false}>
+            Vorige
+          </Button>
+          <Button appearance="primary-action-button" busy={false} disabled={false}>
+            Volgende
+          </Button>
+        </ButtonGroup>
+      </form>
+    </div>
+  );
+};
+
+export default Form;
diff --git a/documentation/demopages/nl-design-system/common/basiselementen/_form-field.scss b/documentation/demopages/nl-design-system/common/basiselementen/_form-field.scss
deleted file mode 100644
index aafc765be5..0000000000
--- a/documentation/demopages/nl-design-system/common/basiselementen/_form-field.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-/* @FORM */
-
-.basiselementen-theme {
-  .utrecht-form-label {
-    margin-block: 8px;
-  }
-  .utrecht-form-field {
-    /* Trigger calculation for additional margins
-     * This is a hack. MUST REMOVE!!!
-     * This requires base elements to have their own react components or use Utrecht components directly
-     */
-    --utrecht-space-around: 1;
-  }
-}
diff --git a/documentation/demopages/nl-design-system/common/basiselementen/_forms.scss b/documentation/demopages/nl-design-system/common/basiselementen/_forms.scss
new file mode 100644
index 0000000000..bf16bed243
--- /dev/null
+++ b/documentation/demopages/nl-design-system/common/basiselementen/_forms.scss
@@ -0,0 +1,48 @@
+.basiselementen-theme {
+  .rvo-nl-demo-page {
+    background-color: var(--basiselementen-color-wit);
+    padding-inline: 32px;
+    form {
+      background-color: var(--basiselementen-color-lichtblauw-tint2);
+      margin-block-start: 32px;
+      margin-inline: auto;
+      padding-block: 32px;
+      padding-inline: 32px;
+      width: min(768px, 100%);
+    }
+  }
+
+  .basiselementen-demo-page {
+    background-color: var(--basiselementen-color-lichtblauw-tint2);
+    padding-block: 9px;
+    padding-inline: 9px;
+
+    form {
+      margin-block-start: 32px;
+      margin-inline: auto;
+      padding-block: 9px;
+      padding-inline: 9px;
+    }
+    .utrecht-form-fieldset {
+      padding-block: 9px;
+      padding-inline: 9px;
+    }
+    @media (min-width: 768px) {
+      form {
+        padding-block: 36px;
+        padding-inline: 36px;
+      }
+      .utrecht-form-fieldset {
+        padding-block: 36px;
+        padding-inline: 36px;
+      }
+    }
+  }
+
+  @media (min-width: 768px) {
+    .basiselementen-demo-page {
+      padding-block: 32px;
+      padding-inline: 32px;
+    }
+  }
+}
diff --git a/documentation/demopages/nl-design-system/common/patches/_form-layout.scss b/documentation/demopages/nl-design-system/common/patches/_form-layout.scss
new file mode 100644
index 0000000000..ce877f55c3
--- /dev/null
+++ b/documentation/demopages/nl-design-system/common/patches/_form-layout.scss
@@ -0,0 +1,96 @@
+.utrecht-form-fieldset--grid {
+  --utrecht-form-fieldset-display: grid;
+  --utrecht-form-fieldset-row-gap: var(
+    --utrecht-form-fieldset-margin-block-start,
+    var(--utrecht-form-fieldset-margin-block-end, 0)
+  );
+  --utrecht-form-fieldset-column-gap: var(
+    --utrecht-form-fieldset-margin-block-start,
+    var(--utrecht-form-fieldset-margin-block-end, 0)
+  );
+  --utrecht-form-fieldset-grid-template-columns: repeat(12, 1fr);
+  --utrecht-form-field-display: grid;
+  --utrecht-form-field-align-content: space-between;
+  --utrecht-form-field-column-gap: var(
+    --utrecht-form-field-margin-block-start,
+    var(--utrecht-form-field-margin-block-end, 0)
+  );
+  --utrecht-form-field-grid-column: 1 / -1;
+  --utrecht-form-field-row-gap: var(
+    --utrecht-form-field-margin-block-start,
+    var(--utrecht-form-field-margin-block-end, 0)
+  );
+}
+.utrecht-form-fieldset--grid fieldset.utrecht-form-fieldset,
+.utrecht-form-fieldset--grid .utrecht-form-fieldset__fieldset {
+  column-gap: var(--utrecht-form-fieldset-column-gap, inherit);
+  display: var(--utrecht-form-fieldset-display, inherit);
+  grid-template-columns: var(--utrecht-form-fieldset-grid-template-columns, 1fr);
+  row-gap: var(--utrecht-form-fieldset-row-gap, inherit);
+  &:last-of-type,
+  &:first-of-type {
+    margin-block-start: 0;
+  }
+  & > * {
+    align-content: var(--utrecht-form-field-align-content, initial);
+    column-gap: var(--utrecht-form-field-column-gap, inherit);
+    display: var(--utrecht-form-field-display, block);
+    grid-column: var(--utrecht-form-field-grid-column, none);
+    row-gap: var(--utrecht-form-field-row-gap, inherit);
+    width: unset;
+  }
+}
+
+div.utrecht-form-fieldset {
+  background-color: var(--utrecht-form-fieldset-background-color);
+  color: var(--utrecht-form-fieldset-color);
+  margin-block-end: var(--utrecht-form-fieldset-margin-block-end, 0);
+  margin-block-start: var(--utrecht-form-fieldset-margin-block-start, 0);
+  padding-block-end: var(--utrecht-form-fieldset-padding-block-end);
+  padding-block-start: var(--utrecht-form-fieldset-padding-block-start);
+  padding-inline-end: var(--utrecht-form-fieldset-padding-inline-end);
+  padding-inline-start: var(--utrecht-form-fieldset-padding-inline-start);
+}
+.utrecht-form-fieldset {
+  &--subtle .utrecht-form-label {
+    font-weight: 400;
+  }
+  &__legend--label {
+    color: var(--utrecht-form-label-color);
+    display: block;
+    float: none;
+    font-size: var(--utrecht-form-label-font-size);
+    font-weight: var(--utrecht-form-label-font-weight);
+    margin-block-end: var(--utrecht-form-fieldset-legend-margin-block-end, 0);
+    margin-block-start: var(--utrecht-form-fieldset-legend-margin-block-start, 0);
+  }
+  label:has(input) {
+    align-items: center;
+    column-gap: var(--utrecht-form-field-column-gap);
+    display: flex;
+  }
+  & div.utrecht-form-fieldset {
+    margin-block-end: 0;
+    margin-block-start: 0;
+    padding-block-end: 0;
+    padding-block-start: 0;
+    padding-inline-end: 0;
+    padding-inline-start: 0;
+  }
+}
+.utrecht-form-field {
+  clear: both;
+  margin-block-end: var(--utrecht-form-field-margin-block-end, 0);
+  margin-block-start: var(--utrecht-form-field-margin-block-start, 0);
+  min-width: var(--utrecht-form-field-min-width, unset);
+  &--start {
+    grid-column-start: 1 !important;
+  }
+}
+.utrecht-form-field-description--invalid {
+  color: var(--basiselementen-color-rood);
+}
+.utrecht-form-field-description {
+  margin-block-end: var(--utrecht-form-field-description-margin-block-end);
+  margin-block-start: var(--utrecht-form-field-description-margin-block-start);
+}
diff --git a/documentation/demopages/nl-design-system/common/patches/_layout-sizes.scss b/documentation/demopages/nl-design-system/common/patches/_layout-sizes.scss
new file mode 100644
index 0000000000..9382c366da
--- /dev/null
+++ b/documentation/demopages/nl-design-system/common/patches/_layout-sizes.scss
@@ -0,0 +1,67 @@
+.utrecht-form-field {
+  &--full-1 {
+    --utrecht-form-field-grid-column: auto / span 11;
+  }
+  &--third {
+    --utrecht-form-field-min-width: 20ch;
+    --utrecht-form-field-grid-column: auto / span 4;
+  }
+  &--quarter {
+    --utrecht-form-field-min-width: 12ch;
+    --utrecht-form-field-grid-column: auto / span 3;
+  }
+  &--half {
+    --utrecht-form-field-grid-column: auto / span 6;
+  }
+  &--full {
+    --utrecht-form-field-grid-column: 1 / -1;
+  }
+}
+@media (min-width: 768px) {
+  .utrecht-form-field {
+    &--xs {
+      --utrecht-form-field-min-width: 7ch;
+      --utrecht-form-field-grid-column: auto / span 1;
+    }
+    &--sm {
+      --utrecht-form-field-min-width: 12ch;
+      --utrecht-form-field-grid-column: auto / span 2;
+    }
+    &--md {
+      --utrecht-form-field-min-width: 20ch;
+      --utrecht-form-field-grid-column: auto / span 4;
+    }
+    &--lg {
+      --utrecht-form-field-grid-column: auto / span 8;
+    }
+    &--xl {
+      --utrecht-form-field-grid-column: auto / span 10;
+    }
+  }
+}
+@media not all and (min-width: 768px) {
+  .utrecht-form-field {
+    &--xs {
+      --utrecht-form-field-min-width: 7ch;
+      --utrecht-form-field-grid-column: auto / span 2;
+    }
+    &--sm {
+      --utrecht-form-field-min-width: 12ch;
+      --utrecht-form-field-grid-column: auto / span 3;
+    }
+    &--md {
+      --utrecht-form-field-min-width: 20ch;
+      --utrecht-form-field-grid-column: auto / span 6;
+    }
+    &--lg {
+      --utrecht-form-field-grid-column: 1 / -1;
+    }
+    &--xl {
+      --utrecht-form-field-grid-column: 1 / -1;
+    }
+    &--quarter {
+      --utrecht-form-field-min-width: 12ch;
+      --utrecht-form-field-grid-column: auto / span 6;
+    }
+  }
+}
diff --git a/documentation/demopages/nl-design-system/common/rvo/_form.scss b/documentation/demopages/nl-design-system/common/rvo/_form.scss
index 0829a708c0..181ad00cf0 100644
--- a/documentation/demopages/nl-design-system/common/rvo/_form.scss
+++ b/documentation/demopages/nl-design-system/common/rvo/_form.scss
@@ -2,4 +2,22 @@
 
 .rvo-form {
   min-width: 600px;
+  .rvo-form-field {
+    clear: both;
+  }
+
+  .utrecht-form-fieldset {
+    background-color: var(--rvo-color-grijs1);
+    padding-block-end: calc(var(--rvo-space-xs) + var(--rvo-space-md));
+    padding-block-start: calc(var(--rvo-space-xs) + var(--rvo-space-md));
+    padding-inline-end: calc(var(--rvo-space-xs) + var(--rvo-space-md));
+    padding-inline-start: calc(var(--rvo-space-xs) + var(--rvo-space-md));
+  }
+}
+.rvo-theme {
+  .rvo-nl-demo-page {
+    .utrecht-form-field:not(:last-of-type) {
+      padding-block-end: var(--rvo-space-xs);
+    }
+  }
 }
diff --git a/documentation/demopages/nl-design-system/common/style.scss b/documentation/demopages/nl-design-system/common/style.scss
index f9aa4ced52..4fd1fae4ec 100644
--- a/documentation/demopages/nl-design-system/common/style.scss
+++ b/documentation/demopages/nl-design-system/common/style.scss
@@ -5,8 +5,8 @@
 @use "rvo/table";
 
 /* Basiselementen temp styling */
-@use "basiselementen/form-field";
 @use "basiselementen/root";
+@use "basiselementen/forms";
 
 /* Component patches
    Patch files will be removed when components have been updated and released */
@@ -14,3 +14,5 @@
 @use "patches/link";
 @use "patches/lists";
 @use "patches/datalist";
+@use "patches/layout-sizes";
+@use "patches/form-layout";
diff --git a/package-lock.json b/package-lock.json
index 631a953e35..a0497d9589 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,7 +25,7 @@
         "@typescript-eslint/eslint-plugin": "5.30.0",
         "@typescript-eslint/parser": "5.30.0",
         "@utrecht/component-library-css": "1.0.0-alpha.355",
-        "@utrecht/component-library-react": "1.0.0-alpha.164",
+        "@utrecht/component-library-react": "1.0.0-alpha.190",
         "@utrecht/components": "1.0.0-alpha.316",
         "eslint": "8.18.0",
         "eslint-config-prettier": "8.5.0",
@@ -20184,9 +20184,10 @@
       "license": "EUPL-1.2"
     },
     "node_modules/@utrecht/component-library-react": {
-      "version": "1.0.0-alpha.164",
+      "version": "1.0.0-alpha.190",
+      "resolved": "https://registry.npmjs.org/@utrecht/component-library-react/-/component-library-react-1.0.0-alpha.190.tgz",
+      "integrity": "sha512-ywHcEDVo/UIlAMLlFyHuq9rIDMydYv7WrvKMDGvdlpLbcOyfbZENOfue1vMhqrZV5ScDbiDwhjrjR3BbhIZ86Q==",
       "dev": true,
-      "license": "EUPL-1.2",
       "dependencies": {
         "clsx": "1.2.1",
         "date-fns": "2.29.3"
@@ -50467,7 +50468,7 @@
     },
     "packages/components-react": {
       "name": "@nl-rvo/components-react",
-      "version": "1.0.0-alpha.48",
+      "version": "1.0.0-alpha.51",
       "license": "EUPL-1.2",
       "devDependencies": {
         "@babel/core": "7.18.10",
@@ -50536,6 +50537,29 @@
         "csstype": "^3.0.2"
       }
     },
+    "packages/components-react/node_modules/@utrecht/component-library-react": {
+      "version": "1.0.0-alpha.164",
+      "resolved": "https://registry.npmjs.org/@utrecht/component-library-react/-/component-library-react-1.0.0-alpha.164.tgz",
+      "integrity": "sha512-m43+0P5qqA6PHtzfETectB+8L7XnWOjkm8YN8fkkacMU/iRdLT7tuF9S7FUc4yyzsuNvLFrQjwocqL0mkxHuAA==",
+      "dev": true,
+      "dependencies": {
+        "clsx": "1.2.1",
+        "date-fns": "2.29.3"
+      },
+      "peerDependencies": {
+        "react": "16 - 18",
+        "react-dom": "16 - 18"
+      }
+    },
+    "packages/components-react/node_modules/clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "packages/components-react/node_modules/react": {
       "version": "18.2.0",
       "dev": true,
@@ -50682,7 +50706,7 @@
     },
     "packages/web-components-css": {
       "name": "@nl-rvo/component-library-css",
-      "version": "1.0.0-alpha.235",
+      "version": "1.0.0-alpha.238",
       "dev": true,
       "license": "EUPL-1.2",
       "devDependencies": {
@@ -50783,7 +50807,7 @@
     },
     "proprietary/assets": {
       "name": "@nl-rvo/assets",
-      "version": "1.0.0-alpha.170",
+      "version": "1.0.0-alpha.173",
       "license": "SEE LICENSE IN LICENSE.md",
       "devDependencies": {
         "sass": "^1.53.0"
@@ -50791,7 +50815,7 @@
     },
     "proprietary/basiselementen-design-tokens": {
       "name": "@nl-rvo/basiselementen-design-tokens",
-      "version": "1.0.0-alpha.32",
+      "version": "1.0.0-alpha.35",
       "license": "SEE LICENSE IN LICENSE.md",
       "devDependencies": {
         "chokidar-cli": "3.0.0",
@@ -50802,7 +50826,7 @@
     },
     "proprietary/design-tokens": {
       "name": "@nl-rvo/design-tokens",
-      "version": "1.0.0-alpha.178",
+      "version": "1.0.0-alpha.181",
       "license": "SEE LICENSE IN LICENSE.md",
       "devDependencies": {
         "chokidar-cli": "3.0.0",
@@ -50813,7 +50837,7 @@
     },
     "uxpin-merge": {
       "name": "@nl-rvo/uxpin-merge",
-      "version": "1.0.1-alpha.2",
+      "version": "1.0.1-alpha.3",
       "license": "EUPL-1.2",
       "dependencies": {
         "@emotion/react": "11.9.3",
@@ -59556,6 +59580,22 @@
             "csstype": "^3.0.2"
           }
         },
+        "@utrecht/component-library-react": {
+          "version": "1.0.0-alpha.164",
+          "resolved": "https://registry.npmjs.org/@utrecht/component-library-react/-/component-library-react-1.0.0-alpha.164.tgz",
+          "integrity": "sha512-m43+0P5qqA6PHtzfETectB+8L7XnWOjkm8YN8fkkacMU/iRdLT7tuF9S7FUc4yyzsuNvLFrQjwocqL0mkxHuAA==",
+          "dev": true,
+          "requires": {
+            "clsx": "1.2.1",
+            "date-fns": "2.29.3"
+          }
+        },
+        "clsx": {
+          "version": "1.2.1",
+          "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+          "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+          "dev": true
+        },
         "react": {
           "version": "18.2.0",
           "dev": true,
@@ -68884,7 +68924,9 @@
       "dev": true
     },
     "@utrecht/component-library-react": {
-      "version": "1.0.0-alpha.164",
+      "version": "1.0.0-alpha.190",
+      "resolved": "https://registry.npmjs.org/@utrecht/component-library-react/-/component-library-react-1.0.0-alpha.190.tgz",
+      "integrity": "sha512-ywHcEDVo/UIlAMLlFyHuq9rIDMydYv7WrvKMDGvdlpLbcOyfbZENOfue1vMhqrZV5ScDbiDwhjrjR3BbhIZ86Q==",
       "dev": true,
       "requires": {
         "clsx": "1.2.1",
diff --git a/package.json b/package.json
index 42438a5aee..4864176c09 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
     "@typescript-eslint/eslint-plugin": "5.30.0",
     "@typescript-eslint/parser": "5.30.0",
     "@utrecht/component-library-css": "1.0.0-alpha.355",
-    "@utrecht/component-library-react": "1.0.0-alpha.164",
+    "@utrecht/component-library-react": "1.0.0-alpha.190",
     "@utrecht/components": "1.0.0-alpha.316",
     "eslint": "8.18.0",
     "eslint-config-prettier": "8.5.0",
diff --git a/proprietary/basiselementen-design-tokens/src/components/rvo/checkbox.tokens.json b/proprietary/basiselementen-design-tokens/src/components/rvo/checkbox.tokens.json
new file mode 100644
index 0000000000..37a9689883
--- /dev/null
+++ b/proprietary/basiselementen-design-tokens/src/components/rvo/checkbox.tokens.json
@@ -0,0 +1,32 @@
+{
+  "rvo": {
+    "checkbox": {
+      "size": { "value": "24px" },
+      "icon": {
+        "size": { "value": "16px" },
+        "color": { "value": "{basiselementen.color.wit}" }
+      },
+      "background-color": { "value": "{basiselementen.color.wit}" },
+      "border-width": { "value": "1px" },
+      "border-color": { "value": "{basiselementen.color.zwart}" },
+      "focus": {
+        "border-color": {},
+        "border-width": {},
+        "background-color": {}
+      },
+      "checked": {
+        "background-color": { "value": "{basiselementen.color.hemelblauw}" }
+      },
+      "hover": {
+        "background-color": { "value": "{basiselementen.color.donkerblauw}" },
+        "border-color": { "value": "{basiselementen.color.hemelblauw}" }
+      },
+      "disabled": {
+        "border-color": { "value": "{basiselementen.color.grijs3}" },
+        "border-width": {},
+        "background-color": { "value": "{basiselementen.color.wit}" },
+        "color": { "value": "{basiselementen.color.grijs3}" }
+      }
+    }
+  }
+}
diff --git a/proprietary/basiselementen-design-tokens/src/components/rvo/custom-radio-button.tokens.json b/proprietary/basiselementen-design-tokens/src/components/rvo/custom-radio-button.tokens.json
new file mode 100644
index 0000000000..9b64d9d361
--- /dev/null
+++ b/proprietary/basiselementen-design-tokens/src/components/rvo/custom-radio-button.tokens.json
@@ -0,0 +1,24 @@
+{
+  "rvo": {
+    "custom-radio-button": {
+      "label": {
+        "disabled": {
+          "color": { "value": "{basiselementen.color.grijs3}" }
+        }
+      },
+      "hover": {
+        "border-color": {
+          "value": "{basiselementen.color.hemelblauw}"
+        }
+      },
+      "checked": {
+        "border-color": {
+          "value": "{basiselementen.color.hemelblauw}"
+        },
+        "background": {
+          "value": "radial-gradient(circle, {basiselementen.color.wit} 30%, {basiselementen.color.hemelblauw} 30%)"
+        }
+      }
+    }
+  }
+}
diff --git a/proprietary/basiselementen-design-tokens/src/components/rvo/select.tokens.json b/proprietary/basiselementen-design-tokens/src/components/rvo/select.tokens.json
new file mode 100644
index 0000000000..541ad285bf
--- /dev/null
+++ b/proprietary/basiselementen-design-tokens/src/components/rvo/select.tokens.json
@@ -0,0 +1,15 @@
+{
+  "rvo": {
+    "select": {
+      "icon": {
+        "background-color": { "value": "{basiselementen.color.hemelblauw}" },
+        "color": { "value": "{basiselementen.color.wit}" }
+      },
+      "outline-offset": { "value": "0" },
+      "padding-block-end": { "value": "9px" },
+      "padding-block-start": { "value": "10px" },
+      "padding-inline-end": { "value": "50px" },
+      "padding-inline-start": { "value": "18px" }
+    }
+  }
+}
diff --git a/proprietary/basiselementen-design-tokens/src/components/utrecht/custom-radio-button.tokens.json b/proprietary/basiselementen-design-tokens/src/components/utrecht/custom-radio-button.tokens.json
new file mode 100644
index 0000000000..a65517e005
--- /dev/null
+++ b/proprietary/basiselementen-design-tokens/src/components/utrecht/custom-radio-button.tokens.json
@@ -0,0 +1,53 @@
+{
+  "utrecht": {
+    "custom-radio-button": {
+      "size": { "value": "24px" },
+      "border-color": { "value": "{basiselementen.color.zwart}" },
+      "color": { "value": "{basiselementen.color.zwart}" },
+      "border-width": { "value": "1px" },
+      "background-color": { "value": "{basiselementen.color.wit}" },
+      "border-radius": { "value": "0" },
+      "padding": {},
+      "icon": {
+        "size": { "value": "18px" }
+      },
+      "active": {
+        "border-color": {},
+        "border-width": {},
+        "background-color": { "value": "{basiselementen.color.hemelblauw}" },
+        "color": {}
+      },
+      "focus": {
+        "border-color": {},
+        "border-width": {},
+        "background-color": {}
+      },
+      "disabled": {
+        "border-color": { "value": "{basiselementen.color.grijs3}" },
+        "border-width": {},
+        "background-color": { "value": "{basiselementen.color.wit}" },
+        "color": {}
+      },
+      "checked": {
+        "border-color": { "value": "{basiselementen.color.hemelblauw}" },
+        "border-width": { "value": "3px" },
+        "background-color": { "value": "{basiselementen.color.hemelblauw}" },
+        "color": { "value": "{basiselementen.color.hemelblauw}" },
+        "active": {
+          "border-color": {},
+          "background-color": { "value": "{basiselementen.color.hemelblauw}" }
+        }
+      },
+      "invalid": {
+        "border-color": { "value": "{basiselementen.color.grijs3}" },
+        "border-width": {},
+        "background-color": {},
+        "color": {},
+        "active": {
+          "border-color": {},
+          "background-color": {}
+        }
+      }
+    }
+  }
+}
diff --git a/proprietary/basiselementen-design-tokens/src/components/utrecht/form-field-description.tokens.json b/proprietary/basiselementen-design-tokens/src/components/utrecht/form-field-description.tokens.json
deleted file mode 100644
index 3689863dc7..0000000000
--- a/proprietary/basiselementen-design-tokens/src/components/utrecht/form-field-description.tokens.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "utrecht": {
-    "form-field-description": {
-      "margin-block-end": {
-        "value": "12px"
-      },
-      "margin-block-start": {
-        "value": "0"
-      }
-    }
-  }
-}
diff --git a/proprietary/basiselementen-design-tokens/src/components/utrecht/form-field.tokens.json b/proprietary/basiselementen-design-tokens/src/components/utrecht/form-field.tokens.json
index 00f8b78267..08e9fbb4ff 100644
--- a/proprietary/basiselementen-design-tokens/src/components/utrecht/form-field.tokens.json
+++ b/proprietary/basiselementen-design-tokens/src/components/utrecht/form-field.tokens.json
@@ -1,12 +1,21 @@
 {
   "utrecht": {
     "form-field": {
-      "margin-block-start": {
-        "value": "18px"
+      "description": {
+        "margin-block-start": { "value": "0" },
+        "margin-block-end": { "value": "1ex" }
       },
-      "margin-block-end": {
-        "value": "8px"
-      }
+      "invalid": {
+        "border-inline-start-color": {},
+        "border-inline-start-width": {},
+        "padding-inline-start": {}
+      },
+      "label": {
+        "margin-block-end": {}
+      },
+      "margin-block-end": { "value": "0" },
+      "margin-block-start": { "value": "0" },
+      "min-width": { "value": "100%" }
     }
   }
 }
diff --git a/proprietary/basiselementen-design-tokens/src/components/utrecht/form-fieldset.tokens.json b/proprietary/basiselementen-design-tokens/src/components/utrecht/form-fieldset.tokens.json
index 56ec9d0beb..4db0004d6e 100644
--- a/proprietary/basiselementen-design-tokens/src/components/utrecht/form-fieldset.tokens.json
+++ b/proprietary/basiselementen-design-tokens/src/components/utrecht/form-fieldset.tokens.json
@@ -1,16 +1,23 @@
 {
   "utrecht": {
     "form-fieldset": {
-      "margin-block-end": {},
-      "margin-block-start": {},
+      "margin-block-end": { "value": "9px" },
+      "margin-block-start": { "value": "9px" },
+      "background-color": { "value": "{basiselementen.color.wit}" },
+      "color": {},
+      "padding-block-end": { "value": "36px" },
+      "padding-block-start": { "value": "36px" },
+      "padding-inline-end": { "value": "36px" },
+      "padding-inline-start": { "value": "36px" },
+
       "legend": {
         "color": {},
         "font-family": {},
-        "font-size": { "value": "1.25rem" },
+        "font-size": {},
         "font-weight": { "value": "{basiselementen.font-weight.bold}" },
         "line-height": { "value": "150%" },
-        "margin-block-end": { "value": "4px" },
-        "margin-block-start": {},
+        "margin-block-end": { "value": "0" },
+        "margin-block-start": { "value": "0" },
         "text-transform": {}
       }
     }
diff --git a/proprietary/design-tokens/src/components/rvo/form-field.tokens.json b/proprietary/design-tokens/src/components/rvo/form-field.tokens.json
deleted file mode 100644
index 8accf7a228..0000000000
--- a/proprietary/design-tokens/src/components/rvo/form-field.tokens.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "rvo": {
-    "form-field": {
-      "label": {
-        "font-weight": { "value": "{rvo.font-weight.bold}" }
-      }
-    }
-  }
-}
diff --git a/proprietary/design-tokens/src/components/rvo/form-fieldset.tokens.json b/proprietary/design-tokens/src/components/rvo/form-fieldset.tokens.json
deleted file mode 100644
index 6c6c1ee6c6..0000000000
--- a/proprietary/design-tokens/src/components/rvo/form-fieldset.tokens.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "rvo": {
-    "form-fieldset": {
-      "background-color": { "value": "{rvo.color.grijs1}" },
-      "padding-block-end": { "value": "calc({rvo.space.xs} + {rvo.space.md})" },
-      "padding-block-start": { "value": "calc({rvo.space.xs} + {rvo.space.md})" },
-      "padding-inline-end": { "value": "calc({rvo.space.xs} + {rvo.space.md})" },
-      "padding-inline-start": { "value": "calc({rvo.space.xs} + {rvo.space.md})" }
-    }
-  }
-}
diff --git a/proprietary/design-tokens/src/components/utrecht/custom-radio-button.tokens.json b/proprietary/design-tokens/src/components/utrecht/custom-radio-button.tokens.json
index 31e0bbb565..b5c6dbaf6f 100644
--- a/proprietary/design-tokens/src/components/utrecht/custom-radio-button.tokens.json
+++ b/proprietary/design-tokens/src/components/utrecht/custom-radio-button.tokens.json
@@ -12,10 +12,10 @@
         "size": { "value": "{rvo.size.md}" }
       },
       "active": {
-        "border-color": {},
-        "border-width": {},
-        "background-color": {},
-        "color": {}
+        "border-color": { "value": "{utrecht.form-input.border-color}" },
+        "border-width": { "value": "{utrecht.form-input.border-width}" },
+        "background-color": { "value": "{rvo.color.wit}" },
+        "color": { "value": "{utrecht.form-input.color}" }
       },
       "focus": {
         "border-color": {},
@@ -29,8 +29,8 @@
         "color": {}
       },
       "checked": {
-        "border-color": {},
-        "border-width": {},
+        "border-color": { "value": "{utrecht.form-input.border-color}" },
+        "border-width": { "value": "{utrecht.form-input.border-width}" },
         "background-color": {},
         "color": {},
         "active": {
diff --git a/proprietary/design-tokens/src/components/utrecht/form-field-description.tokens.json b/proprietary/design-tokens/src/components/utrecht/form-field-description.tokens.json
deleted file mode 100644
index ec195600d0..0000000000
--- a/proprietary/design-tokens/src/components/utrecht/form-field-description.tokens.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "utrecht": {
-    "form-field-description": {
-      "margin-block-end": {
-        "value": "0px"
-      },
-      "margin-block-start": {
-        "value": "0px"
-      }
-    }
-  }
-}
diff --git a/proprietary/design-tokens/src/components/utrecht/form-field.tokens.json b/proprietary/design-tokens/src/components/utrecht/form-field.tokens.json
index 9b0673123f..b0c3ba7e99 100644
--- a/proprietary/design-tokens/src/components/utrecht/form-field.tokens.json
+++ b/proprietary/design-tokens/src/components/utrecht/form-field.tokens.json
@@ -1,11 +1,21 @@
 {
   "utrecht": {
     "form-field": {
+      "description": {
+        "margin-block-start": { "value": "0" },
+        "margin-block-end": { "value": "{rvo.space.2xs}" }
+      },
+      "label": {
+        "margin-block-start": { "value": "0" },
+        "margin-block-end": {
+          "value": "0"
+        }
+      },
       "margin-block-start": {
-        "value": "{rvo.space.2xs}"
+        "value": "{rvo.space.xs}"
       },
       "margin-block-end": {
-        "value": "{rvo.space.2xs}"
+        "value": "0"
       }
     }
   }
diff --git a/proprietary/design-tokens/src/components/utrecht/form-fieldset.tokens.json b/proprietary/design-tokens/src/components/utrecht/form-fieldset.tokens.json
index 8c5a6e751a..e4d5c85a92 100644
--- a/proprietary/design-tokens/src/components/utrecht/form-fieldset.tokens.json
+++ b/proprietary/design-tokens/src/components/utrecht/form-fieldset.tokens.json
@@ -3,6 +3,14 @@
     "form-fieldset": {
       "margin-block-end": {},
       "margin-block-start": {},
+      "section": {
+        "background-color": { "value": "{rvo.color.grijs1}" },
+        "color": {},
+        "padding-block-end": { "value": "{rvo.space.xl}" },
+        "padding-block-start": { "value": "{rvo.space.xl}" },
+        "padding-inline-end": { "value": "{rvo.space.xl}" },
+        "padding-inline-start": { "value": "{rvo.space.xl}" }
+      },
       "legend": {
         "color": {},
         "font-family": {},