diff --git a/packages/component-library-react/package.json b/packages/component-library-react/package.json
index 65938b8e7de..848bf1b4166 100644
--- a/packages/component-library-react/package.json
+++ b/packages/component-library-react/package.json
@@ -74,7 +74,7 @@
     "@utrecht/button-link-css": "workspace:*",
     "@utrecht/button-react": "workspace:*",
     "@utrecht/calendar-react": "workspace:*",
-    "@utrecht/checkbox-css": "workspace:*",
+    "@utrecht/checkbox-react": "workspace:*",
     "@utrecht/code-block-css": "workspace:*",
     "@utrecht/code-css": "workspace:*",
     "@utrecht/color-sample-css": "workspace:*",
@@ -90,10 +90,11 @@
     "@utrecht/emphasis-css": "workspace:*",
     "@utrecht/figure-css": "workspace:*",
     "@utrecht/focus-ring-css": "workspace:*",
+    "@utrecht/form-field-checkbox-react": "workspace:*",
     "@utrecht/form-field-react": "workspace:*",
-    "@utrecht/form-field-description-css": "workspace:*",
-    "@utrecht/form-field-error-message-css": "workspace:*",
-    "@utrecht/form-fieldset-css": "workspace:*",
+    "@utrecht/form-field-description-react": "workspace:*",
+    "@utrecht/form-field-error-message-react": "workspace:*",
+    "@utrecht/fieldset-react": "workspace:*",
     "@utrecht/form-label-react": "workspace:*",
     "@utrecht/form-toggle-css": "workspace:*",
     "@utrecht/heading-1-css": "workspace:*",
@@ -134,7 +135,7 @@
     "@utrecht/paragraph-css": "workspace:*",
     "@utrecht/pre-heading-css": "workspace:*",
     "@utrecht/preserve-data-css": "workspace:*",
-    "@utrecht/radio-button-css": "workspace:*",
+    "@utrecht/radio-button-react": "workspace:*",
     "@utrecht/rich-text-css": "workspace:*",
     "@utrecht/search-bar-css": "workspace:*",
     "@utrecht/select-css": "workspace:*",
diff --git a/packages/component-library-react/src/Checkbox.test.tsx b/packages/component-library-react/src/Checkbox.test.tsx
deleted file mode 100644
index 995025d077e..00000000000
--- a/packages/component-library-react/src/Checkbox.test.tsx
+++ /dev/null
@@ -1,375 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { createRef } from 'react';
-import { Checkbox } from './Checkbox';
-import '@testing-library/jest-dom';
-
-describe('Checkbox', () => {
-  it('renders a checkbox role element', () => {
-    render(<Checkbox />);
-
-    const checkbox = screen.getByRole('checkbox');
-
-    expect(checkbox).toBeInTheDocument();
-  });
-
-  it('renders an HTML input type=checkbox element', () => {
-    const { container } = render(<Checkbox />);
-
-    const checkbox = container.querySelector('input[type="checkbox"]:only-child');
-
-    expect(checkbox).toBeInTheDocument();
-  });
-
-  it('displays as CSS inline-block element', () => {
-    const { container } = render(<Checkbox />);
-
-    const checkbox = container.querySelector(':only-child');
-
-    expect(checkbox).toBeVisible();
-    expect(checkbox).toHaveStyle({ display: 'inline-block' });
-  });
-
-  it('renders a design system BEM class name', () => {
-    const { container } = render(<Checkbox />);
-
-    const link = container.querySelector(':only-child');
-
-    expect(link).toHaveClass('utrecht-checkbox');
-  });
-
-  it('can have a additional class name', () => {
-    const { container } = render(<Checkbox className="large" />);
-
-    const checkbox = container.querySelector(':only-child');
-
-    expect(checkbox).toHaveClass('large');
-
-    expect(checkbox).toHaveClass('utrecht-checkbox');
-  });
-  describe('checked variant', () => {
-    it('is not checked by default', () => {
-      render(<Checkbox />);
-
-      const checkbox = screen.getByRole('checkbox');
-
-      expect(checkbox).not.toBeChecked();
-    });
-
-    it('omits non-essential checked attributes when not checked', () => {
-      const handleChange = () => {};
-      const { container } = render(<Checkbox checked={false} onChange={handleChange} />);
-
-      const checkbox = container.querySelector(':only-child');
-
-      expect(checkbox).not.toHaveAttribute('aria-checked');
-
-      expect(checkbox).not.toHaveAttribute('checked');
-    });
-
-    it('can have a checked state', () => {
-      const handleChange = () => {};
-      render(<Checkbox checked onChange={handleChange} />);
-
-      const checkbox = screen.getByRole('checkbox');
-
-      expect(checkbox).toBeChecked();
-    });
-
-    it('can have a defaultChecked state (in React)', () => {
-      render(<Checkbox defaultChecked />);
-
-      const checkbox = screen.getByRole('checkbox');
-
-      expect(checkbox).toBeChecked();
-    });
-
-    it('can have a checked state in CSS', () => {
-      const handleChange = () => {};
-      const { container } = render(<Checkbox checked onChange={handleChange} />);
-
-      const checkbox = container.querySelector(':checked');
-
-      expect(checkbox).toBeInTheDocument();
-    });
-  });
-
-  describe('invalid variant', () => {
-    it('renders a design system BEM modifier class name', () => {
-      const { container } = render(<Checkbox invalid />);
-
-      const checkbox = container.querySelector(':only-child');
-
-      expect(checkbox).toHaveClass('utrecht-checkbox--invalid');
-    });
-
-    it('is not invalid by default', () => {
-      const { container } = render(<Checkbox />);
-
-      const checkbox = container.querySelector(':only-child');
-
-      expect(checkbox).not.toBeInvalid();
-    });
-
-    it('omits non-essential invalid attributes when not invalid', () => {
-      const { container } = render(<Checkbox invalid={false} />);
-
-      const checkbox = container.querySelector(':only-child');
-
-      expect(checkbox).not.toHaveAttribute('aria-invalid');
-    });
-
-    it('can have an invalid state', () => {
-      const { container } = render(<Checkbox invalid />);
-
-      const checkbox = container.querySelector(':only-child');
-
-      expect(checkbox).toBeInvalid();
-    });
-
-    it('can have a invalid state in CSS', () => {
-      const handleChange = () => {};
-      const { container } = render(<Checkbox inputRequired checked={false} onChange={handleChange} />);
-
-      const checkbox = container.querySelector(':invalid');
-
-      expect(checkbox).toBeInTheDocument();
-    });
-  });
-
-  describe('disabled variant', () => {
-    it('renders a design system BEM modifier class name', () => {
-      const { container } = render(<Checkbox disabled />);
-
-      const checkbox = container.querySelector(':only-child');
-
-      expect(checkbox).toHaveClass('utrecht-checkbox--disabled');
-    });
-
-    it('is not disabled by default', () => {
-      const { container } = render(<Checkbox />);
-
-      const checkbox = container.querySelector(':only-child');
-
-      expect(checkbox).not.toBeDisabled();
-    });
-
-    it('omits non-essential disabled attributes when not disabled', () => {
-      const { container } = render(<Checkbox disabled={false} />);
-
-      const checkbox = container.querySelector(':only-child');
-
-      expect(checkbox).not.toHaveAttribute('aria-disabled');
-
-      expect(checkbox).not.toHaveAttribute('disabled');
-    });
-
-    it('can have a disabled state', () => {
-      const { container } = render(<Checkbox disabled />);
-
-      const checkbox = container.querySelector(':only-child');
-
-      expect(checkbox).toBeDisabled();
-    });
-
-    it('can have a disabled state in CSS', () => {
-      const { container } = render(<Checkbox disabled />);
-
-      const checkbox = container.querySelector(':disabled');
-
-      expect(checkbox).toBeInTheDocument();
-    });
-  });
-
-  describe('required variant', () => {
-    it('renders a design system BEM modifier class name', () => {
-      const { container } = render(<Checkbox required />);
-
-      const checkbox = container.querySelector(':only-child');
-
-      expect(checkbox).toHaveClass('utrecht-checkbox--required');
-    });
-
-    it('is not required by default', () => {
-      const { container } = render(<Checkbox />);
-
-      const checkbox = container.querySelector(':only-child');
-
-      expect(checkbox).not.toBeRequired();
-    });
-
-    it('omits non-essential required attributes when not required', () => {
-      const { container } = render(<Checkbox required={false} />);
-
-      const checkbox = container.querySelector(':only-child');
-
-      expect(checkbox).not.toHaveAttribute('aria-required');
-
-      expect(checkbox).not.toHaveAttribute('required');
-    });
-
-    it('can have a required state', () => {
-      const { container } = render(<Checkbox required />);
-
-      const checkbox = container.querySelector(':only-child');
-
-      expect(checkbox).toBeRequired();
-    });
-  });
-
-  describe('inputRequired variant', () => {
-    it('renders a design system BEM modifier class name: utrecht-checkbox--required', () => {
-      const { container } = render(<Checkbox inputRequired />);
-
-      const checkbox = container.querySelector('.utrecht-checkbox');
-
-      expect(checkbox).toHaveClass('utrecht-checkbox--required');
-    });
-
-    it('is not required by default', () => {
-      const { container } = render(<Checkbox />);
-
-      const checkbox = container.querySelector(':only-child');
-
-      expect(checkbox).not.toBeRequired();
-    });
-
-    it('omits non-essential required attributes when not required', () => {
-      render(<Checkbox inputRequired={false} />);
-
-      const checkbox = screen.getByRole('checkbox');
-
-      expect(checkbox).not.toHaveAttribute('aria-required');
-      expect(checkbox).not.toHaveAttribute('required');
-    });
-
-    it('can have a required state', () => {
-      render(<Checkbox inputRequired />);
-
-      const checkbox = screen.getByRole('checkbox');
-
-      expect(checkbox).toBeRequired();
-    });
-
-    it('can have a required state in CSS', () => {
-      const { container } = render(<Checkbox inputRequired />);
-
-      const checkbox = container.querySelector(':required');
-
-      expect(checkbox).toBeInTheDocument();
-    });
-  });
-
-  describe('indeterminate variant', () => {
-    it('renders a design system BEM modifier class name', () => {
-      const { container } = render(<Checkbox indeterminate />);
-
-      const checkbox = container.querySelector(':only-child');
-
-      expect(checkbox).toHaveClass('utrecht-checkbox--indeterminate');
-    });
-
-    it('is not indeterminate by default', () => {
-      const { container } = render(<Checkbox />);
-
-      const checkbox = container.querySelector(':only-child');
-
-      expect(checkbox).not.toHaveAttribute('aria-checked', 'mixed');
-    });
-
-    it('can have a indeterminate state in the attribute `aria-checked` (for server side rendering)', () => {
-      const { container } = render(<Checkbox indeterminate />);
-
-      const checkbox = container.querySelector(':only-child');
-
-      expect(checkbox).toHaveAttribute('aria-checked', 'mixed');
-    });
-
-    it('can have a indeterminate state in the DOM property `indeterminate` (for client side rendering)', () => {
-      const { container } = render(<Checkbox indeterminate />);
-
-      type FixedHTMLInput = HTMLInputElement & { indeterminate: boolean };
-
-      const checkbox = container.querySelector(':only-child') as FixedHTMLInput;
-
-      expect(checkbox.indeterminate).toBe(true);
-    });
-
-    it('can have a indeterminate state in CSS', () => {
-      const { container } = render(<Checkbox indeterminate />);
-
-      const checkbox = container.querySelector(':indeterminate');
-
-      expect(checkbox).toBeInTheDocument();
-    });
-  });
-
-  it('can be hidden', () => {
-    const { container } = render(<Checkbox hidden />);
-
-    const checkbox = container.querySelector(':only-child');
-
-    expect(checkbox).not.toBeVisible();
-  });
-
-  describe('change event', () => {
-    it('can trigger a change event', () => {
-      const handleChange = jest.fn();
-
-      const { container } = render(<Checkbox onChange={handleChange} />);
-
-      const checkbox = container.querySelector<HTMLElement>(':only-child');
-
-      checkbox?.click();
-
-      expect(handleChange).toHaveBeenCalled();
-    });
-
-    it('does not trigger a change event when disabled', () => {
-      const handleChange = jest.fn();
-
-      const { container } = render(<Checkbox disabled onChange={handleChange} />);
-
-      const checkbox = container.querySelector<HTMLElement>(':only-child');
-
-      checkbox?.click();
-
-      expect(handleChange).not.toHaveBeenCalled();
-    });
-  });
-
-  describe('input event', () => {
-    it('can trigger a input event', () => {
-      const handleInput = jest.fn();
-
-      const { container } = render(<Checkbox onInput={handleInput} />);
-
-      const checkbox = container.querySelector<HTMLElement>(':only-child');
-
-      checkbox?.click();
-
-      expect(handleInput).toHaveBeenCalled();
-    });
-
-    it('does not trigger a input event when disabled', () => {
-      const handleInput = jest.fn();
-
-      const { container } = render(<Checkbox disabled onInput={handleInput} />);
-
-      const checkbox = container.querySelector<HTMLElement>(':only-child');
-
-      checkbox?.click();
-
-      expect(handleInput).not.toHaveBeenCalled();
-    });
-  });
-
-  it('supports ForwardRef in React', () => {
-    const ref = createRef<HTMLInputElement>();
-
-    const { container } = render(<Checkbox ref={ref} />);
-
-    const checkbox = container.querySelector(':only-child');
-
-    expect(ref.current).toBe(checkbox);
-  });
-});
diff --git a/packages/component-library-react/src/Checkbox.tsx b/packages/component-library-react/src/Checkbox.tsx
deleted file mode 100644
index 886c308a32a..00000000000
--- a/packages/component-library-react/src/Checkbox.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import clsx from 'clsx';
-import { ForwardedRef, forwardRef, InputHTMLAttributes, useEffect, useImperativeHandle, useRef } from 'react';
-
-export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'readOnly'> {
-  appearance?: string;
-  indeterminate?: boolean;
-  invalid?: boolean;
-  inputRequired?: boolean;
-}
-
-export const Checkbox = forwardRef(
-  (
-    {
-      appearance = 'custom',
-      disabled,
-      indeterminate = false,
-      inputRequired,
-      invalid,
-      required,
-      className,
-      ...restProps
-    }: CheckboxProps,
-    ref: ForwardedRef<HTMLInputElement>,
-  ) => {
-    // What's the correct way to use useRef and forwardRef together?
-    // https://stackoverflow.com/a/68163315
-
-    // `indeterminate` is has no TypeScript definition in React.
-    // `indeterminate` renders an attribute, not a property in React.
-    let internalRef = useRef<HTMLInputElement>(null);
-
-    useImperativeHandle(ref, () => internalRef.current!);
-
-    useEffect(() => {
-      if (internalRef.current) {
-        internalRef.current.indeterminate = indeterminate;
-      }
-    }, [indeterminate]);
-
-    return (
-      <input
-        {...restProps}
-        ref={internalRef}
-        type="checkbox"
-        className={clsx(
-          'utrecht-checkbox',
-          'utrecht-checkbox--html-input',
-          {
-            'utrecht-checkbox--disabled': disabled,
-            'utrecht-checkbox--custom': appearance === 'custom',
-            'utrecht-checkbox--invalid': invalid,
-            'utrecht-checkbox--indeterminate': indeterminate,
-            'utrecht-checkbox--required': required || inputRequired,
-          },
-          className,
-        )}
-        aria-checked={indeterminate ? 'mixed' : undefined}
-        aria-invalid={invalid || undefined}
-        aria-required={required ? required : undefined}
-        disabled={disabled}
-        required={inputRequired}
-      />
-    );
-  },
-);
-
-Checkbox.displayName = 'Checkbox';
diff --git a/packages/component-library-react/src/Fieldset.test.tsx b/packages/component-library-react/src/Fieldset.test.tsx
deleted file mode 100644
index a2c2d01e54e..00000000000
--- a/packages/component-library-react/src/Fieldset.test.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { createRef } from 'react';
-import { Fieldset } from './Fieldset';
-import '@testing-library/jest-dom';
-
-describe('Fieldset', () => {
-  it('renders a group role', () => {
-    render(<Fieldset />);
-
-    const fieldset = screen.getByRole('group');
-
-    expect(fieldset).toBeInTheDocument();
-    expect(fieldset).toBeVisible();
-  });
-
-  it('can be configured with the radiogroup role', () => {
-    render(<Fieldset role="radiogroup" />);
-
-    const fieldset = screen.getByRole('radiogroup');
-
-    expect(fieldset).toBeInTheDocument();
-    expect(fieldset).toBeVisible();
-  });
-
-  it('renders an HTML fieldset element', () => {
-    const { container } = render(<Fieldset />);
-
-    const fieldset = container.querySelector('fieldset:only-child');
-
-    expect(fieldset).toBeInTheDocument();
-  });
-
-  it('renders a design system BEM class name', () => {
-    const { container } = render(<Fieldset />);
-
-    const fieldset = container.querySelector(':only-child');
-
-    expect(fieldset).toHaveClass('utrecht-form-fieldset');
-  });
-  it('can have a additional class name', () => {
-    const { container } = render(<Fieldset className="large" />);
-
-    const fieldSet = container.querySelector(':only-child');
-
-    expect(fieldSet).toHaveClass('large');
-
-    expect(fieldSet).toHaveClass('utrecht-form-fieldset');
-  });
-  it('displays as CSS block element', () => {
-    const { container } = render(<Fieldset />);
-
-    const fieldset = container.querySelector(':only-child');
-
-    expect(fieldset).toHaveStyle({ display: 'block' });
-  });
-
-  it('renders rich text content', () => {
-    const { container } = render(
-      <Fieldset>
-        <p>Description</p>
-      </Fieldset>,
-    );
-
-    const fieldset = container.querySelector(':only-child');
-
-    const richText = fieldset?.querySelector('p');
-
-    expect(richText).toBeInTheDocument();
-  });
-
-  it('can be hidden', () => {
-    const { container } = render(<Fieldset hidden />);
-
-    const fieldset = container.querySelector(':only-child');
-
-    expect(fieldset).not.toBeVisible();
-  });
-
-  it('can have a custom class name', () => {
-    const { container } = render(<Fieldset className="card" />);
-
-    const fieldset = container.querySelector(':only-child');
-
-    expect(fieldset).toHaveClass('card');
-  });
-
-  it('supports ForwardRef in React', () => {
-    const ref = createRef<HTMLDivElement>();
-
-    const { container } = render(<Fieldset ref={ref} />);
-
-    const fieldset = container.querySelector(':only-child');
-
-    expect(ref.current).toBe(fieldset);
-  });
-
-  describe('invalid state', () => {
-    it('has no aria-invalid="true" attribute', () => {
-      render(<Fieldset invalid />);
-
-      const group = screen.getByRole('group');
-
-      expect(group).not.toHaveAttribute('aria-invalid');
-    });
-  });
-
-  describe('required state', () => {
-    it('has no aria-required="true" attribute', () => {
-      render(<Fieldset required />);
-
-      const group = screen.getByRole('group');
-
-      expect(group).not.toHaveAttribute('aria-required');
-    });
-  });
-
-  describe('radio group', () => {
-    describe('required state', () => {
-      it('has an aria-invalid="true" attribute', () => {
-        render(<Fieldset role="radiogroup" invalid />);
-
-        const group = screen.getByRole('radiogroup');
-
-        expect(group).toHaveAttribute('aria-invalid', 'true');
-      });
-
-      it('has an invalid state in the accessibility tree', () => {
-        render(<Fieldset role="radiogroup" invalid />);
-
-        const group = screen.getByRole('radiogroup');
-
-        expect(group).toBeInvalid();
-      });
-    });
-
-    describe('required state', () => {
-      it('has an aria-required="true" attribute', () => {
-        render(<Fieldset role="radiogroup" required />);
-
-        const group = screen.getByRole('radiogroup');
-
-        expect(group).toHaveAttribute('aria-required', 'true');
-      });
-
-      it('has an required state in the accessibility tree', () => {
-        render(<Fieldset role="radiogroup" required />);
-
-        const group = screen.getByRole('radiogroup');
-
-        expect(group).toBeRequired();
-      });
-    });
-  });
-});
diff --git a/packages/component-library-react/src/Fieldset.tsx b/packages/component-library-react/src/Fieldset.tsx
deleted file mode 100644
index dab0bbdd762..00000000000
--- a/packages/component-library-react/src/Fieldset.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import clsx from 'clsx';
-import { FieldsetHTMLAttributes, ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren } from 'react';
-
-export interface FieldsetProps extends HTMLAttributes<HTMLDivElement> {
-  'aria-describedby'?: string;
-  'aria-label'?: string;
-  'aria-labelledby'?: string;
-  disabled?: boolean;
-  form?: string;
-  invalid?: boolean;
-  required?: boolean;
-  name?: string;
-}
-
-export const Fieldset = forwardRef(
-  (
-    {
-      'aria-describedby': ariaDescribedby,
-      'aria-label': ariaLabel,
-      'aria-labelledby': ariaLabelledby,
-      className,
-      children,
-      disabled,
-      form,
-      invalid,
-      name,
-      required,
-      role,
-      ...restProps
-    }: PropsWithChildren<FieldsetProps>,
-    ref: ForwardedRef<HTMLDivElement>,
-  ) => (
-    <div
-      {...restProps}
-      ref={ref}
-      className={clsx(
-        'utrecht-form-fieldset',
-        disabled && 'utrecht-form-fieldset--disabled',
-        invalid && 'utrecht-form-fieldset--invalid',
-        className,
-      )}
-    >
-      <fieldset
-        aria-describedby={ariaDescribedby}
-        aria-label={ariaLabel}
-        aria-labelledby={ariaLabelledby}
-        aria-invalid={role === 'radiogroup' ? invalid || undefined : undefined}
-        aria-required={role === 'radiogroup' ? required || undefined : undefined}
-        disabled={disabled}
-        form={form}
-        name={name}
-        role={role}
-        className={clsx('utrecht-form-fieldset__fieldset', 'utrecht-form-fieldset--html-fieldset')}
-      >
-        {children}
-      </fieldset>
-    </div>
-  ),
-);
-
-Fieldset.displayName = 'Fieldset';
-
-/*
- * Life used to be so much simpler,
- * when we didn't want to put use `background-color` and `border` around the fieldset.
- */
-
-export interface FieldsetOnlyProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {
-  invalid?: boolean;
-}
-
-export const FieldsetOnly = forwardRef(
-  (
-    { className, children, disabled, invalid, ...restProps }: PropsWithChildren<FieldsetOnlyProps>,
-    ref: ForwardedRef<HTMLFieldSetElement>,
-  ) => (
-    <fieldset
-      {...restProps}
-      ref={ref}
-      aria-invalid={invalid || undefined}
-      disabled={disabled}
-      className={clsx(
-        'utrecht-form-fieldset',
-        'utrecht-form-fieldset--html-fieldset',
-        disabled && 'utrecht-form-fieldset--disabled',
-        invalid && 'utrecht-form-fieldset--invalid',
-        className,
-      )}
-    >
-      {children}
-    </fieldset>
-  ),
-);
-
-FieldsetOnly.displayName = 'Fieldset';
diff --git a/packages/component-library-react/src/FieldsetLegend.test.tsx b/packages/component-library-react/src/FieldsetLegend.test.tsx
deleted file mode 100644
index ed0f6618f64..00000000000
--- a/packages/component-library-react/src/FieldsetLegend.test.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { createRef } from 'react';
-import { Fieldset } from './Fieldset';
-import { FieldsetLegend } from './FieldsetLegend';
-import '@testing-library/jest-dom';
-
-describe('Fieldset legend', () => {
-  it('renders a label to a group', () => {
-    render(
-      <Fieldset>
-        <FieldsetLegend>Shipping address</FieldsetLegend>
-      </Fieldset>,
-    );
-
-    const fieldset = screen.getByRole('group', {
-      name: 'Shipping address',
-    });
-
-    expect(fieldset).toBeInTheDocument();
-  });
-
-  it('renders a label to a radiogroup', () => {
-    render(
-      <Fieldset role="radiogroup">
-        <FieldsetLegend>Shipping method</FieldsetLegend>
-      </Fieldset>,
-    );
-
-    const fieldset = screen.getByRole('radiogroup', {
-      name: 'Shipping method',
-    });
-
-    expect(fieldset).toBeInTheDocument();
-  });
-
-  it('renders an HTML legend element', () => {
-    const { container } = render(<FieldsetLegend />);
-
-    const legend = container.querySelector('legend:only-child');
-
-    expect(legend).toBeInTheDocument();
-  });
-
-  it('renders a design system BEM class name', () => {
-    const { container } = render(<FieldsetLegend />);
-
-    const legend = container.querySelector(':only-child');
-
-    expect(legend).toHaveClass('utrecht-form-fieldset__legend');
-  });
-
-  it('displays as CSS block element', () => {
-    const { container } = render(<FieldsetLegend />);
-
-    const legend = container.querySelector(':only-child');
-
-    expect(legend).toBeVisible();
-    expect(legend).toHaveStyle({ display: 'block' });
-  });
-
-  it('renders rich text content', () => {
-    const { container } = render(
-      <FieldsetLegend>
-        <h2>Shipping address</h2>
-      </FieldsetLegend>,
-    );
-
-    const legend = container.querySelector(':only-child');
-    const richText = legend?.querySelector('h2');
-
-    expect(richText).toBeInTheDocument();
-  });
-
-  it('can render a rich text content as a label to a group', () => {
-    render(
-      <Fieldset>
-        <FieldsetLegend>
-          <h2>Shipping address</h2>
-        </FieldsetLegend>
-      </Fieldset>,
-    );
-
-    const fieldset = screen.getByRole('group', {
-      name: 'Shipping address',
-    });
-
-    expect(fieldset).toBeInTheDocument();
-  });
-
-  it('can be hidden', () => {
-    const { container } = render(<FieldsetLegend hidden />);
-
-    const legend = container.querySelector(':only-child');
-
-    expect(legend).not.toBeVisible();
-  });
-
-  it('can have a custom class name', () => {
-    const { container } = render(<FieldsetLegend className="heading-2" />);
-
-    const legend = container.querySelector(':only-child');
-
-    expect(legend).toHaveClass('heading-2');
-  });
-
-  it('can have a additional class name', () => {
-    const { container } = render(<FieldsetLegend className="large" />);
-
-    const legend = container.querySelector(':only-child');
-
-    expect(legend).toHaveClass('large');
-
-    expect(legend).toHaveClass('utrecht-form-fieldset__legend');
-  });
-
-  it('supports ForwardRef in React', () => {
-    const ref = createRef<HTMLLegendElement>();
-
-    const { container } = render(<FieldsetLegend ref={ref} />);
-
-    const legend = container.querySelector(':only-child');
-
-    expect(ref.current).toBe(legend);
-  });
-});
diff --git a/packages/component-library-react/src/FieldsetLegend.tsx b/packages/component-library-react/src/FieldsetLegend.tsx
deleted file mode 100644
index 8fb0162f03d..00000000000
--- a/packages/component-library-react/src/FieldsetLegend.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import clsx from 'clsx';
-import { ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren } from 'react';
-
-export type FieldsetLegendProps = HTMLAttributes<HTMLLegendElement>;
-
-export const FieldsetLegend = forwardRef(
-  (
-    { className, children, ...restProps }: PropsWithChildren<FieldsetLegendProps>,
-    ref: ForwardedRef<HTMLLegendElement>,
-  ) => (
-    <legend
-      {...restProps}
-      ref={ref}
-      className={clsx('utrecht-form-fieldset__legend', 'utrecht-form-fieldset__legend--html-legend', className)}
-    >
-      {children}
-    </legend>
-  ),
-);
-
-FieldsetLegend.displayName = 'FieldsetLegend';
diff --git a/packages/component-library-react/src/FormFieldCheckbox.test.tsx b/packages/component-library-react/src/FormFieldCheckbox.test.tsx
deleted file mode 100644
index c7c52414815..00000000000
--- a/packages/component-library-react/src/FormFieldCheckbox.test.tsx
+++ /dev/null
@@ -1,670 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { createRef } from 'react';
-import { FormFieldCheckbox } from './FormFieldCheckbox';
-import '@testing-library/jest-dom';
-
-describe('Form field with a checkbox', () => {
-  const defaultProps = {
-    name: 'check',
-    label: 'I agree',
-  };
-
-  it('renders an HTML div element', () => {
-    const { container } = render(<FormFieldCheckbox {...defaultProps} />);
-
-    const field = container.querySelector('div');
-
-    expect(field).toBeInTheDocument();
-  });
-
-  it('renders a design system BEM class name: utrecht-form-field', () => {
-    const { container } = render(<FormFieldCheckbox {...defaultProps} />);
-
-    const field = container.querySelector('div');
-
-    expect(field).toHaveClass('utrecht-form-field');
-  });
-
-  it('renders a design system BEM modifier class name: utrecht-form-field--checkbox', () => {
-    const { container } = render(<FormFieldCheckbox {...defaultProps} />);
-
-    const field = container.querySelector('.utrecht-form-field');
-
-    expect(field).toHaveClass('utrecht-form-field--checkbox');
-  });
-
-  it('displays as CSS block element (or equivalent)', () => {
-    const { container } = render(<FormFieldCheckbox {...defaultProps} />);
-
-    const field = container.querySelector('div');
-
-    expect(field).toBeVisible();
-    expect(field).not.toHaveStyle({ display: 'inline' });
-    expect(field).not.toHaveStyle({ display: 'inline-block' });
-  });
-
-  it('renders rich text content', () => {
-    const { container } = render(
-      <FormFieldCheckbox {...defaultProps}>
-        <hr />
-      </FormFieldCheckbox>,
-    );
-
-    const richText = container.querySelector('hr');
-
-    expect(richText).toBeInTheDocument();
-  });
-
-  it('can be hidden', () => {
-    const { container } = render(<FormFieldCheckbox {...defaultProps} hidden />);
-
-    const field = container.querySelector('div');
-
-    expect(field).not.toBeVisible();
-  });
-
-  it('can have a custom class name', () => {
-    const { container } = render(<FormFieldCheckbox {...defaultProps} className="invalid" />);
-
-    const field = container.querySelector('div');
-
-    expect(field).toHaveClass('invalid');
-  });
-
-  it('can have a additional class name', () => {
-    const { container } = render(<FormFieldCheckbox {...defaultProps} className="large" />);
-
-    const field = container.querySelector(':only-child');
-
-    expect(field).toHaveClass('large');
-    expect(field).toHaveClass('utrecht-form-field');
-  });
-
-  describe('label', () => {
-    it('renders a design system BEM class name: utrecht-form-field__label', () => {
-      const { container } = render(<FormFieldCheckbox {...defaultProps} />);
-
-      const field = container.querySelector('.utrecht-form-field__label');
-
-      expect(field).toBeInTheDocument();
-    });
-
-    it('renders rich text content', () => {
-      const { container } = render(
-        <FormFieldCheckbox
-          {...defaultProps}
-          label={
-            <>
-              I can speak the <i lang="la">lingua franca</i>
-            </>
-          }
-        />,
-      );
-
-      const richText = container.querySelector('i');
-
-      expect(richText).toBeInTheDocument();
-    });
-
-    it('is associated with the checkbox', () => {
-      render(<FormFieldCheckbox {...defaultProps} />);
-
-      const checkbox = screen.getByRole('checkbox', { name: 'I agree' });
-
-      expect(checkbox).toBeInTheDocument();
-    });
-
-    it('can be clicked to toggle the checkbox', () => {
-      const labelRef = createRef<HTMLSpanElement>();
-
-      render(<FormFieldCheckbox {...defaultProps} label={<span ref={labelRef}>I agree</span>} />);
-
-      const checkbox = screen.getByRole('checkbox', { name: 'I agree' });
-
-      expect(checkbox).not.toBeChecked();
-
-      labelRef.current?.click();
-
-      expect(checkbox).toBeChecked();
-
-      labelRef.current?.click();
-
-      expect(checkbox).not.toBeChecked();
-    });
-  });
-
-  describe('description', () => {
-    it('is not rendered by default', () => {
-      const { container } = render(<FormFieldCheckbox {...defaultProps} />);
-
-      const field = container.querySelector('.utrecht-form-field__description');
-
-      expect(field).not.toBeInTheDocument();
-    });
-
-    it('renders a design system BEM class name: utrecht-form-field__description', () => {
-      const { container } = render(
-        <FormFieldCheckbox
-          {...defaultProps}
-          description="Lingua franca is a common language between groups of people."
-        />,
-      );
-
-      const field = container.querySelector('.utrecht-form-field__description');
-
-      expect(field).toBeInTheDocument();
-    });
-
-    it('renders rich text content', () => {
-      const { container } = render(
-        <FormFieldCheckbox
-          {...defaultProps}
-          description={
-            <p>
-              You are <strong>not</strong> required to agree.
-            </p>
-          }
-        />,
-      );
-
-      const richText = container.querySelector('strong');
-
-      expect(richText).toBeInTheDocument();
-    });
-
-    it('is associated with the checkbox', () => {
-      const description = 'Lingua franca is a common language between groups of people.';
-
-      render(<FormFieldCheckbox {...defaultProps} description={description} />);
-
-      const checkbox = screen.getByRole('checkbox', { description });
-
-      expect(checkbox).toBeInTheDocument();
-    });
-  });
-
-  describe('error message', () => {
-    it('is not rendered by default', () => {
-      const { container } = render(<FormFieldCheckbox {...defaultProps} />);
-
-      const field = container.querySelector('.utrecht-form-field__error-message');
-
-      expect(field).not.toBeInTheDocument();
-    });
-
-    it('renders a design system BEM class name: utrecht-form-field__error-message', () => {
-      const { container } = render(
-        <FormFieldCheckbox {...defaultProps} invalid errorMessage="Check this required field to continue." />,
-      );
-
-      const field = container.querySelector('.utrecht-form-field__error-message');
-
-      expect(field).toBeInTheDocument();
-    });
-
-    it('renders rich text content', () => {
-      const { container } = render(
-        <FormFieldCheckbox
-          {...defaultProps}
-          invalid
-          errorMessage={
-            <p>
-              You <strong>required</strong> to agree.
-            </p>
-          }
-        />,
-      );
-
-      const richText = container.querySelector('strong');
-
-      expect(richText).toBeInTheDocument();
-    });
-
-    it('is associated with the checkbox', () => {
-      const errorMessage = 'Check this required field to continue.';
-
-      render(<FormFieldCheckbox {...defaultProps} invalid errorMessage={errorMessage} />);
-
-      const checkbox = screen.getByRole('checkbox', { description: errorMessage });
-
-      expect(checkbox).toBeInTheDocument();
-    });
-  });
-
-  describe('input', () => {
-    it('renders a checkbox role element', () => {
-      render(<FormFieldCheckbox {...defaultProps} />);
-
-      const checkbox = screen.getByRole('checkbox');
-
-      expect(checkbox).toBeInTheDocument();
-    });
-
-    it('renders a design system BEM class name: utrecht-form-field__input', () => {
-      const { container } = render(<FormFieldCheckbox {...defaultProps} />);
-
-      const field = container.querySelector('.utrecht-form-field__input');
-
-      expect(field).toBeInTheDocument();
-    });
-
-    it('renders an HTML input type=checkbox element', () => {
-      const { container } = render(<FormFieldCheckbox {...defaultProps} />);
-
-      const checkbox = container.querySelector('input[type="checkbox"]');
-
-      expect(checkbox).toBeInTheDocument();
-    });
-
-    // TypeScript definitions do not support `switch` yet
-    /*
-    it.skip('can render a switch role element', () => {
-      render(<FormFieldCheckbox {...defaultProps} switch={true} />);
-
-      const checkbox = screen.getByRole('checkbox');
-
-      expect(checkbox).toBeInTheDocument();
-    });
-
-    it.skip('can render a HTML switch input', () => {
-      const { container } = render(<FormFieldCheckbox {...defaultProps} switch />);
-
-      const checkbox = container.querySelector('input[type="checkbox"][switch]');
-
-      expect(checkbox).toBeInTheDocument();
-    });
-    */
-  });
-
-  describe('status', () => {
-    it('is not rendered by default', () => {
-      const { container } = render(<FormFieldCheckbox {...defaultProps} />);
-
-      const field = container.querySelector('.utrecht-form-field__status');
-
-      expect(field).not.toBeInTheDocument();
-    });
-
-    it('renders a design system BEM class name: utrecht-form-field__status', () => {
-      const { container } = render(<FormFieldCheckbox {...defaultProps} status="Saving..." />);
-
-      const field = container.querySelector('.utrecht-form-field__status');
-
-      expect(field).toBeInTheDocument();
-    });
-
-    it('renders rich text content', () => {
-      const { container } = render(
-        <FormFieldCheckbox
-          {...defaultProps}
-          status={
-            <p>
-              Saving <strong>failed</strong>. Please try again at a later time.
-            </p>
-          }
-        />,
-      );
-
-      const richText = container.querySelector('strong');
-
-      expect(richText).toBeInTheDocument();
-    });
-  });
-
-  describe('change event', () => {
-    it('can trigger a change event', () => {
-      const handleChange = jest.fn();
-
-      render(<FormFieldCheckbox {...defaultProps} onChange={handleChange} />);
-
-      const checkbox = screen.getByRole('checkbox');
-
-      checkbox?.click();
-
-      expect(handleChange).toHaveBeenCalled();
-    });
-
-    it('does not trigger a change event when disabled', () => {
-      const handleChange = jest.fn();
-
-      render(<FormFieldCheckbox {...defaultProps} disabled onChange={handleChange} />);
-
-      const checkbox = screen.getByRole('checkbox');
-
-      checkbox?.click();
-
-      expect(handleChange).not.toHaveBeenCalled();
-    });
-  });
-
-  describe('input event', () => {
-    it('can trigger a input event', () => {
-      const handleInput = jest.fn();
-
-      render(<FormFieldCheckbox {...defaultProps} onInput={handleInput} />);
-
-      const checkbox = screen.getByRole('checkbox');
-
-      checkbox?.click();
-
-      expect(handleInput).toHaveBeenCalled();
-    });
-
-    it('does not trigger a input event when disabled', () => {
-      const handleInput = jest.fn();
-
-      render(<FormFieldCheckbox {...defaultProps} disabled onInput={handleInput} />);
-
-      const checkbox = screen.getByRole('checkbox');
-
-      checkbox?.click();
-
-      expect(handleInput).not.toHaveBeenCalled();
-    });
-  });
-
-  describe('focus event', () => {
-    it('can trigger a focus event', async () => {
-      const handleFocus = jest.fn();
-
-      render(<FormFieldCheckbox {...defaultProps} onFocus={handleFocus} />);
-
-      const textbox = screen.getByRole('checkbox');
-
-      expect(handleFocus).not.toHaveBeenCalled();
-
-      textbox?.focus();
-
-      expect(handleFocus).toHaveBeenCalled();
-    });
-
-    it('does not trigger a focus event when disabled', async () => {
-      const handleFocus = jest.fn();
-
-      render(<FormFieldCheckbox {...defaultProps} disabled onFocus={handleFocus} />);
-
-      const textbox = screen.getByRole('checkbox');
-
-      textbox?.focus();
-
-      expect(handleFocus).not.toHaveBeenCalled();
-    });
-  });
-
-  describe('blur event', () => {
-    it('can trigger a blur event', async () => {
-      const handleBlur = jest.fn();
-
-      render(<FormFieldCheckbox {...defaultProps} onBlur={handleBlur} />);
-
-      const textbox = screen.getByRole('checkbox');
-
-      expect(handleBlur).not.toHaveBeenCalled();
-
-      textbox?.focus();
-      textbox?.blur();
-
-      expect(handleBlur).toHaveBeenCalled();
-    });
-
-    it('does not trigger a blur event when disabled', async () => {
-      const handleBlur = jest.fn();
-
-      render(<FormFieldCheckbox {...defaultProps} disabled onBlur={handleBlur} />);
-
-      const textbox = screen.getByRole('checkbox');
-
-      textbox?.focus();
-      textbox?.blur();
-
-      expect(handleBlur).not.toHaveBeenCalled();
-    });
-  });
-
-  describe('checked variant', () => {
-    it('is not checked by default', () => {
-      render(<FormFieldCheckbox {...defaultProps} />);
-
-      const checkbox = screen.getByRole('checkbox');
-
-      expect(checkbox).not.toBeChecked();
-    });
-
-    it('can have a checked state', () => {
-      render(<FormFieldCheckbox {...defaultProps} defaultChecked />);
-
-      const checkbox = screen.getByRole('checkbox');
-
-      expect(checkbox).toBeChecked();
-    });
-
-    it('can have a defaultChecked state (in React)', () => {
-      render(<FormFieldCheckbox {...defaultProps} defaultChecked />);
-
-      const checkbox = screen.getByRole('checkbox');
-
-      expect(checkbox).toBeChecked();
-    });
-
-    it('can have a checked state in CSS', () => {
-      const handleChange = () => {};
-      const { container } = render(<FormFieldCheckbox {...defaultProps} defaultChecked onChange={handleChange} />);
-
-      const checkbox = container.querySelector(':checked');
-
-      expect(checkbox).toBeInTheDocument();
-    });
-
-    describe('label', () => {
-      it.skip('renders a design system BEM modifier class name: utrecht-form-label--checked', () => {
-        const { container } = render(<FormFieldCheckbox {...defaultProps} defaultChecked />);
-
-        const checkbox = container.querySelector('.utrecht-form-label--checked');
-
-        expect(checkbox).toBeInTheDocument();
-      });
-    });
-  });
-
-  describe('invalid variant', () => {
-    it('renders a design system BEM modifier class name: utrecht-form-field--invalid', () => {
-      const { container } = render(<FormFieldCheckbox {...defaultProps} invalid />);
-
-      const checkbox = container.querySelector('.utrecht-form-field');
-
-      expect(checkbox).toHaveClass('utrecht-form-field--invalid');
-    });
-
-    it('renders a design system BEM modifier class name: utrecht-checkbox--invalid', () => {
-      const { container } = render(<FormFieldCheckbox {...defaultProps} invalid />);
-
-      const checkbox = container.querySelector('.utrecht-checkbox');
-
-      expect(checkbox).toHaveClass('utrecht-checkbox--invalid');
-    });
-
-    it('is not invalid by default', () => {
-      render(<FormFieldCheckbox {...defaultProps} />);
-
-      const checkbox = screen.getByRole('checkbox');
-
-      expect(checkbox).not.toBeInvalid();
-    });
-
-    it('omits non-essential invalid attributes when not invalid', () => {
-      render(<FormFieldCheckbox {...defaultProps} invalid={false} />);
-
-      const checkbox = screen.getByRole('checkbox');
-
-      expect(checkbox).not.toBeInvalid();
-      expect(checkbox).not.toHaveAttribute('aria-invalid');
-    });
-
-    it('can have an invalid state', () => {
-      render(<FormFieldCheckbox {...defaultProps} invalid />);
-
-      const checkbox = screen.getByRole('checkbox');
-
-      expect(checkbox).toBeInvalid();
-    });
-
-    it('can have a invalid state in CSS for inputRequired', () => {
-      const { container } = render(<FormFieldCheckbox {...defaultProps} inputRequired defaultChecked={false} />);
-
-      const checkbox = container.querySelector(':invalid');
-
-      expect(checkbox).toBeInTheDocument();
-    });
-  });
-
-  describe('disabled variant', () => {
-    it('renders a design system BEM modifier class name', () => {
-      const { container } = render(<FormFieldCheckbox {...defaultProps} disabled />);
-
-      const checkbox = container.querySelector('.utrecht-checkbox');
-
-      expect(checkbox).toHaveClass('utrecht-checkbox--disabled');
-    });
-
-    it('is not disabled by default', () => {
-      render(<FormFieldCheckbox {...defaultProps} />);
-
-      const checkbox = screen.getByRole('checkbox');
-
-      expect(checkbox).not.toBeDisabled();
-    });
-
-    it('omits non-essential disabled attributes when not disabled', () => {
-      render(<FormFieldCheckbox {...defaultProps} disabled={false} />);
-
-      const checkbox = screen.getByRole('checkbox');
-
-      expect(checkbox).not.toBeDisabled();
-      expect(checkbox).not.toHaveAttribute('aria-disabled');
-      expect(checkbox).not.toHaveAttribute('disabled');
-    });
-
-    it('can have a disabled state', () => {
-      render(<FormFieldCheckbox {...defaultProps} disabled />);
-
-      const checkbox = screen.getByRole('checkbox');
-
-      expect(checkbox).toBeDisabled();
-    });
-
-    it('can have a disabled state in CSS', () => {
-      const { container } = render(<FormFieldCheckbox {...defaultProps} disabled />);
-
-      const checkbox = container.querySelector(':disabled');
-
-      expect(checkbox).toBeInTheDocument();
-    });
-  });
-
-  describe('required variant', () => {
-    it('is not required by default', () => {
-      render(<FormFieldCheckbox {...defaultProps} />);
-
-      const checkbox = screen.getByRole('checkbox');
-
-      expect(checkbox).not.toBeRequired();
-    });
-
-    it('omits non-essential required attributes when not required', () => {
-      render(<FormFieldCheckbox {...defaultProps} required={false} />);
-
-      const checkbox = screen.getByRole('checkbox');
-
-      expect(checkbox).not.toBeRequired();
-      expect(checkbox).not.toHaveAttribute('aria-required');
-      expect(checkbox).not.toHaveAttribute('required');
-    });
-
-    it('can have a required state', () => {
-      render(<FormFieldCheckbox {...defaultProps} required />);
-
-      const checkbox = screen.getByRole('checkbox');
-
-      expect(checkbox).toBeRequired();
-    });
-  });
-
-  describe('inputRequired state', () => {
-    it('is not required by default', () => {
-      render(<FormFieldCheckbox {...defaultProps} />);
-
-      const checkbox = screen.getByRole('checkbox');
-
-      expect(checkbox).not.toBeRequired();
-    });
-
-    it('omits non-essential required attributes when not required', () => {
-      render(<FormFieldCheckbox {...defaultProps} inputRequired={false} />);
-
-      const checkbox = screen.getByRole('checkbox');
-
-      expect(checkbox).not.toBeRequired();
-      expect(checkbox).not.toHaveAttribute('aria-required');
-      expect(checkbox).not.toHaveAttribute('required');
-    });
-
-    it('can have a required state', () => {
-      render(<FormFieldCheckbox {...defaultProps} inputRequired />);
-
-      const checkbox = screen.getByRole('checkbox');
-
-      expect(checkbox).toBeRequired();
-    });
-
-    it('can have a required state in CSS', () => {
-      const { container } = render(<FormFieldCheckbox {...defaultProps} inputRequired />);
-
-      const checkbox = container.querySelector(':required');
-
-      expect(checkbox).toBeInTheDocument();
-    });
-  });
-
-  describe('indeterminate variant', () => {
-    it.skip('is not indeterminate by default (in the accessibility tree)', () => {});
-
-    it('is not indeterminate by default', () => {
-      render(<FormFieldCheckbox {...defaultProps} />);
-
-      const checkbox = screen.getByRole('checkbox');
-
-      // TODO: Find out how to test the indeterminate state
-      expect(checkbox).not.toHaveAttribute('aria-checked', 'mixed');
-    });
-
-    it.skip('can have a indeterminate state (in the accessibility tree)', () => {});
-
-    it('can have a indeterminate state', () => {
-      render(<FormFieldCheckbox {...defaultProps} indeterminate />);
-
-      const checkbox = screen.getByRole('checkbox');
-
-      expect(checkbox).toHaveAttribute('aria-checked', 'mixed');
-    });
-  });
-
-  it('supports ForwardRef in React', () => {
-    const ref = createRef<HTMLDivElement>();
-
-    const { container } = render(<FormFieldCheckbox {...defaultProps} ref={ref} />);
-
-    const div = container.querySelector('div');
-
-    expect(ref.current).toBe(div);
-  });
-
-  it('supports ForwardRef for the form control in React', () => {
-    const inputRef = createRef<HTMLInputElement>();
-
-    const { container } = render(<FormFieldCheckbox {...defaultProps} inputRef={inputRef} />);
-
-    const div = container.querySelector('input');
-
-    expect(inputRef.current).toBe(div);
-  });
-});
diff --git a/packages/component-library-react/src/FormFieldCheckbox.tsx b/packages/component-library-react/src/FormFieldCheckbox.tsx
deleted file mode 100644
index 31ef0377831..00000000000
--- a/packages/component-library-react/src/FormFieldCheckbox.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import clsx from 'clsx';
-import type { ForwardedRef, PropsWithChildren, ReactNode, Ref } from 'react';
-import { forwardRef, useId } from 'react';
-import type { CheckboxProps } from './Checkbox';
-import { Checkbox } from './Checkbox';
-import type { FormFieldProps } from './FormField';
-import { FormField } from './FormField';
-import { FormFieldDescription } from './FormFieldDescription';
-import { FormFieldErrorMessage } from './FormFieldErrorMessage';
-import { FormLabel } from './FormLabel';
-
-export interface FormFieldCheckboxProps
-  extends Omit<FormFieldProps, 'type'>,
-    Pick<
-      CheckboxProps,
-      | 'checked'
-      | 'defaultChecked'
-      | 'defaultValue'
-      | 'disabled'
-      | 'indeterminate'
-      | 'inputRequired'
-      | 'invalid'
-      | 'name'
-      | 'required'
-      | 'value'
-    > {
-  description?: ReactNode;
-  errorMessage?: ReactNode;
-  inputRef?: Ref<HTMLInputElement>;
-  label: ReactNode;
-  status?: ReactNode;
-}
-
-export const FormFieldCheckbox = forwardRef(
-  (
-    {
-      checked,
-      children,
-      defaultChecked,
-      defaultValue,
-      description,
-      disabled,
-      errorMessage,
-      indeterminate,
-      inputRef,
-      inputRequired,
-      invalid,
-      label,
-      name,
-      onBlur,
-      onChange,
-      onFocus,
-      onInput,
-      required,
-      status,
-      value,
-      ...props
-    }: PropsWithChildren<FormFieldCheckboxProps>,
-    ref: ForwardedRef<HTMLDivElement>,
-  ) => {
-    const inputId = useId();
-    const descriptionId = useId();
-    const statusId = useId();
-    const errorMessageId = useId();
-
-    return (
-      <FormField invalid={invalid} type="checkbox" ref={ref} {...props}>
-        <div className="utrecht-form-field__label utrecht-form-field__label--checkbox">
-          <FormLabel type="checkbox" htmlFor={inputId}>
-            <Checkbox
-              aria-describedby={
-                clsx({
-                  [descriptionId]: description,
-                  [errorMessageId]: invalid,
-                  [statusId]: status,
-                }) || undefined
-              }
-              checked={checked}
-              className="utrecht-form-field__input"
-              defaultChecked={defaultChecked}
-              defaultValue={defaultValue}
-              disabled={disabled}
-              id={inputId}
-              indeterminate={indeterminate}
-              ref={inputRef}
-              inputRequired={inputRequired}
-              invalid={invalid}
-              name={name}
-              onBlur={onBlur}
-              onChange={onChange}
-              onFocus={onFocus}
-              onInput={onInput}
-              required={required}
-              value={value}
-            />
-            {label}
-          </FormLabel>
-        </div>
-        {description && (
-          <FormFieldDescription className="utrecht-form-field__description" id={descriptionId}>
-            {description}
-          </FormFieldDescription>
-        )}
-        {invalid && errorMessage && (
-          <FormFieldErrorMessage className="utrecht-form-field__error-message" id={errorMessageId}>
-            {errorMessage}
-          </FormFieldErrorMessage>
-        )}
-        {status && (
-          <div className="utrecht-form-field__status" id={statusId}>
-            {status}
-          </div>
-        )}
-        {children}
-      </FormField>
-    );
-  },
-);
-
-FormFieldCheckbox.displayName = 'FormFieldCheckbox';
diff --git a/packages/component-library-react/src/FormFieldDescription.test.tsx b/packages/component-library-react/src/FormFieldDescription.test.tsx
deleted file mode 100644
index ca9b8e73dff..00000000000
--- a/packages/component-library-react/src/FormFieldDescription.test.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import { render } from '@testing-library/react';
-import { createRef } from 'react';
-import { FormFieldDescription } from './FormFieldDescription';
-import '@testing-library/jest-dom';
-
-describe('Form field description', () => {
-  it('renders an HTML div element', () => {
-    const { container } = render(<FormFieldDescription />);
-
-    const desc = container.querySelector('div:only-child');
-
-    expect(desc).toBeInTheDocument();
-  });
-
-  it('renders a design system BEM class name', () => {
-    const { container } = render(<FormFieldDescription />);
-
-    const desc = container.querySelector(':only-child');
-
-    expect(desc).toHaveClass('utrecht-form-field-description');
-  });
-
-  describe('variant for a message that describes why the form control is invalid', () => {
-    it('renders a design system BEM class name', () => {
-      const { container } = render(<FormFieldDescription invalid />);
-
-      const desc = container.querySelector(':only-child');
-
-      expect(desc).toHaveClass('utrecht-form-field-description--invalid');
-    });
-  });
-
-  describe('variant for a message that mentions the form control has become valid', () => {
-    it('renders a design system BEM class name', () => {
-      const { container } = render(<FormFieldDescription valid />);
-
-      const desc = container.querySelector(':only-child');
-
-      expect(desc).toHaveClass('utrecht-form-field-description--valid');
-    });
-  });
-
-  describe('variant for a warning that is provided with a form control', () => {
-    it('renders a design system BEM class name', () => {
-      const { container } = render(<FormFieldDescription warning />);
-
-      const desc = container.querySelector(':only-child');
-
-      expect(desc).toHaveClass('utrecht-form-field-description--warning');
-    });
-  });
-
-  it('displays as CSS block element', () => {
-    const { container } = render(<FormFieldDescription />);
-
-    const desc = container.querySelector(':only-child');
-
-    expect(desc).toBeVisible();
-    expect(desc).toHaveStyle({ display: 'block' });
-  });
-
-  it('renders rich text content', () => {
-    const { container } = render(
-      <FormFieldDescription>
-        <strong>Current</strong> password
-      </FormFieldDescription>,
-    );
-
-    const desc = container.querySelector(':only-child');
-
-    expect(desc).toBeInTheDocument();
-  });
-
-  it('can be hidden', () => {
-    const { container } = render(<FormFieldDescription hidden />);
-
-    const desc = container.querySelector(':only-child');
-
-    expect(desc).not.toBeVisible();
-  });
-
-  it('can have a custom class name', () => {
-    const { container } = render(<FormFieldDescription className="internal-server-error" />);
-
-    const desc = container.querySelector(':only-child');
-
-    expect(desc).toHaveClass('internal-server-error');
-  });
-  it('can have a additional class name', () => {
-    const { container } = render(<FormFieldDescription className="large" />);
-
-    const desc = container.querySelector(':only-child');
-
-    expect(desc).toHaveClass('large');
-
-    expect(desc).toHaveClass('utrecht-form-field-description');
-  });
-
-  it('supports ForwardRef in React', () => {
-    const ref = createRef<HTMLDivElement>();
-
-    const { container } = render(<FormFieldDescription ref={ref} />);
-
-    const div = container.querySelector(':only-child');
-
-    expect(ref.current).toBe(div);
-  });
-});
diff --git a/packages/component-library-react/src/FormFieldDescription.tsx b/packages/component-library-react/src/FormFieldDescription.tsx
deleted file mode 100644
index 2b732c97eea..00000000000
--- a/packages/component-library-react/src/FormFieldDescription.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import clsx from 'clsx';
-import { ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren } from 'react';
-
-export interface FormFieldDescriptionProps extends HTMLAttributes<HTMLDivElement> {
-  invalid?: boolean;
-  valid?: boolean;
-  warning?: boolean;
-}
-
-export const FormFieldDescription = forwardRef(
-  (
-    { invalid, valid, warning, className, children, ...restProps }: PropsWithChildren<FormFieldDescriptionProps>,
-    ref: ForwardedRef<HTMLDivElement>,
-  ) => (
-    <div
-      {...restProps}
-      ref={ref}
-      className={clsx(
-        'utrecht-form-field-description',
-        invalid && 'utrecht-form-field-description--invalid',
-        valid && 'utrecht-form-field-description--valid',
-        warning && 'utrecht-form-field-description--warning',
-        className,
-      )}
-    >
-      {children}
-    </div>
-  ),
-);
-
-FormFieldDescription.displayName = 'FormFieldDescription';
diff --git a/packages/component-library-react/src/FormFieldErrorMessage.tsx b/packages/component-library-react/src/FormFieldErrorMessage.tsx
deleted file mode 100644
index f38da5fed67..00000000000
--- a/packages/component-library-react/src/FormFieldErrorMessage.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import clsx from 'clsx';
-import { ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren } from 'react';
-
-export type FormFieldErrorMessageProps = HTMLAttributes<HTMLDivElement>;
-
-export const FormFieldErrorMessage = forwardRef(
-  (
-    { className, children, ...restProps }: PropsWithChildren<FormFieldErrorMessageProps>,
-    ref: ForwardedRef<HTMLDivElement>,
-  ) => (
-    <div {...restProps} ref={ref} className={clsx('utrecht-form-field-error-message', className)}>
-      {children}
-    </div>
-  ),
-);
-
-FormFieldErrorMessage.displayName = 'FormFieldErrorMessage';
diff --git a/packages/component-library-react/src/FormFieldTextarea.tsx b/packages/component-library-react/src/FormFieldTextarea.tsx
index 6cf50c73131..608b18fa837 100644
--- a/packages/component-library-react/src/FormFieldTextarea.tsx
+++ b/packages/component-library-react/src/FormFieldTextarea.tsx
@@ -1,9 +1,9 @@
+import { FormFieldDescription } from '@utrecht/form-field-description-react';
+import { FormFieldErrorMessage } from '@utrecht/form-field-error-message-react';
 import clsx from 'clsx';
 import { ForwardedRef, forwardRef, ReactNode, Ref, useId } from 'react';
 import type { FormFieldProps } from './FormField';
 import { FormField } from './FormField';
-import { FormFieldDescription } from './FormFieldDescription';
-import { FormFieldErrorMessage } from './FormFieldErrorMessage';
 import { FormLabel } from './FormLabel';
 import { Textarea } from './Textarea';
 import type { TextareaProps } from './Textarea';
diff --git a/packages/component-library-react/src/FormFieldTextbox.tsx b/packages/component-library-react/src/FormFieldTextbox.tsx
index 6ccb61750dc..71f7dc30f67 100644
--- a/packages/component-library-react/src/FormFieldTextbox.tsx
+++ b/packages/component-library-react/src/FormFieldTextbox.tsx
@@ -1,9 +1,9 @@
+import { FormFieldDescription } from '@utrecht/form-field-description-react';
+import { FormFieldErrorMessage } from '@utrecht/form-field-error-message-react';
 import clsx from 'clsx';
 import { ForwardedRef, forwardRef, PropsWithChildren, ReactNode, Ref, useId } from 'react';
 import type { FormFieldProps } from './FormField';
 import { FormField } from './FormField';
-import { FormFieldDescription } from './FormFieldDescription';
-import { FormFieldErrorMessage } from './FormFieldErrorMessage';
 import { FormLabel } from './FormLabel';
 import { Textbox, TextboxProps } from './Textbox';
 import { TextboxTypes } from './Textbox';
diff --git a/packages/component-library-react/src/RadioButton.test.tsx b/packages/component-library-react/src/RadioButton.test.tsx
deleted file mode 100644
index ed5f1e0b12f..00000000000
--- a/packages/component-library-react/src/RadioButton.test.tsx
+++ /dev/null
@@ -1,252 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { createRef } from 'react';
-import { RadioButton } from './RadioButton';
-import '@testing-library/jest-dom';
-
-describe('RadioButton', () => {
-  it('renders a radioButton role element', () => {
-    render(<RadioButton />);
-
-    const radioButton = screen.getByRole('radio');
-
-    expect(radioButton).toBeInTheDocument();
-  });
-
-  it('renders an HTML input type=radio element', () => {
-    const { container } = render(<RadioButton />);
-
-    const radioButton = container.querySelector('input[type="radio"]:only-child');
-
-    expect(radioButton).toBeInTheDocument();
-  });
-
-  it('displays as CSS inline-block element', () => {
-    const { container } = render(<RadioButton />);
-
-    const radioButton = container.querySelector(':only-child');
-
-    expect(radioButton).toBeVisible();
-    expect(radioButton).toHaveStyle({ display: 'inline-block' });
-  });
-
-  it('renders a design system BEM block class name', () => {
-    const { container } = render(<RadioButton />);
-
-    const radioButton = container.querySelector(':only-child');
-
-    expect(radioButton).toHaveClass('utrecht-radio-button');
-  });
-
-  describe('checked variant', () => {
-    it('is not checked by default', () => {
-      const { container } = render(<RadioButton />);
-
-      const radiobutton = container.querySelector(':only-child');
-
-      expect(radiobutton).not.toBeChecked();
-    });
-
-    it('omits non-essential checked attributes when not checked', () => {
-      const handleChange = () => {};
-      const { container } = render(<RadioButton checked={false} onChange={handleChange} />);
-
-      const radiobutton = container.querySelector(':only-child');
-
-      expect(radiobutton).not.toHaveAttribute('aria-checked');
-
-      expect(radiobutton).not.toHaveAttribute('checked');
-    });
-
-    it('can have a checked state', () => {
-      const handleChange = () => {};
-      const { container } = render(<RadioButton checked onChange={handleChange} />);
-
-      const radiobutton = container.querySelector(':only-child');
-
-      expect(radiobutton).toBeChecked();
-    });
-
-    it('can have a checked state in CSS', () => {
-      const handleChange = () => {};
-      const { container } = render(<RadioButton checked onChange={handleChange} />);
-
-      const radiobutton = container.querySelector(':checked');
-
-      expect(radiobutton).toBeInTheDocument();
-    });
-  });
-
-  describe('invalid variant', () => {
-    it('renders a design system BEM modifier class name', () => {
-      const { container } = render(<RadioButton invalid />);
-
-      const radiobutton = container.querySelector(':only-child');
-
-      expect(radiobutton).toHaveClass('utrecht-radio-button--invalid');
-    });
-
-    it('is not invalid by default', () => {
-      const { container } = render(<RadioButton />);
-
-      const radiobutton = container.querySelector(':only-child');
-
-      expect(radiobutton).not.toBeInvalid();
-    });
-
-    it('omits non-essential invalid attributes when not invalid', () => {
-      const { container } = render(<RadioButton invalid={false} />);
-
-      const radiobutton = container.querySelector(':only-child');
-
-      expect(radiobutton).not.toHaveAttribute('aria-invalid');
-    });
-
-    it('can have an invalid state', () => {
-      const { container } = render(<RadioButton invalid />);
-
-      const radiobutton = container.querySelector(':only-child');
-
-      expect(radiobutton).toBeInvalid();
-    });
-
-    it('can have a invalid state in CSS', () => {
-      const handleChange = () => {};
-      const { container } = render(<RadioButton required checked={false} onChange={handleChange} />);
-
-      const radiobutton = container.querySelector(':invalid');
-
-      expect(radiobutton).toBeInTheDocument();
-    });
-  });
-
-  describe('disabled variant', () => {
-    it('renders a design system BEM modifier class name', () => {
-      const { container } = render(<RadioButton disabled />);
-
-      const radiobutton = container.querySelector(':only-child');
-
-      expect(radiobutton).toHaveClass('utrecht-radio-button--disabled');
-    });
-
-    it('is not disabled by default', () => {
-      const { container } = render(<RadioButton />);
-
-      const radiobutton = container.querySelector(':only-child');
-
-      expect(radiobutton).not.toBeDisabled();
-    });
-
-    it('omits non-essential disabled attributes when not disabled', () => {
-      const { container } = render(<RadioButton disabled={false} />);
-
-      const radiobutton = container.querySelector(':only-child');
-
-      expect(radiobutton).not.toHaveAttribute('aria-disabled');
-
-      expect(radiobutton).not.toHaveAttribute('disabled');
-    });
-
-    it('can have a disabled state', () => {
-      const { container } = render(<RadioButton disabled />);
-
-      const radiobutton = container.querySelector(':only-child');
-
-      expect(radiobutton).toBeDisabled();
-    });
-
-    it('can have a disabled state in CSS', () => {
-      const { container } = render(<RadioButton disabled />);
-
-      const radiobutton = container.querySelector(':disabled');
-
-      expect(radiobutton).toBeInTheDocument();
-    });
-  });
-
-  it('can be hidden', () => {
-    const { container } = render(<RadioButton hidden />);
-
-    const radiobutton = container.querySelector(':only-child');
-
-    expect(radiobutton).not.toBeVisible();
-  });
-
-  it('can have a custom class name', () => {
-    const { container } = render(<RadioButton className="ballot-box" />);
-
-    const radiobutton = container.querySelector(':only-child');
-
-    expect(radiobutton).toHaveClass('ballot-box');
-  });
-  it('can have a additional class name', () => {
-    const { container } = render(<RadioButton className="large" />);
-
-    const radiobutton = container.querySelector(':only-child');
-
-    expect(radiobutton).toHaveClass('large');
-
-    expect(radiobutton).toHaveClass('utrecht-radio-button');
-  });
-
-  describe('change event', () => {
-    it('can trigger a change event', () => {
-      const handleChange = jest.fn();
-
-      const { container } = render(<RadioButton onChange={handleChange} />);
-
-      const radiobutton = container.querySelector<HTMLElement>(':only-child');
-
-      radiobutton?.click();
-
-      expect(handleChange).toHaveBeenCalled();
-    });
-
-    it('does not trigger a change event when disabled', () => {
-      const handleChange = jest.fn();
-
-      const { container } = render(<RadioButton disabled onChange={handleChange} />);
-
-      const radiobutton = container.querySelector<HTMLElement>(':only-child');
-
-      radiobutton?.click();
-
-      expect(handleChange).not.toHaveBeenCalled();
-    });
-  });
-
-  describe('input event', () => {
-    it('can trigger a input event', () => {
-      const handleInput = jest.fn();
-
-      const { container } = render(<RadioButton onInput={handleInput} />);
-
-      const radiobutton = container.querySelector<HTMLElement>(':only-child');
-
-      radiobutton?.click();
-
-      expect(handleInput).toHaveBeenCalled();
-    });
-
-    it('does not trigger a input event when disabled', () => {
-      const handleInput = jest.fn();
-
-      const { container } = render(<RadioButton disabled onInput={handleInput} />);
-
-      const radiobutton = container.querySelector<HTMLElement>(':only-child');
-
-      radiobutton?.click();
-
-      expect(handleInput).not.toHaveBeenCalled();
-    });
-  });
-
-  it('supports ForwardRef in React', () => {
-    const ref = createRef<HTMLInputElement>();
-
-    const { container } = render(<RadioButton ref={ref} />);
-
-    const radiobutton = container.querySelector(':only-child');
-
-    expect(ref.current).toBe(radiobutton);
-  });
-});
diff --git a/packages/component-library-react/src/RadioButton.tsx b/packages/component-library-react/src/RadioButton.tsx
deleted file mode 100644
index 6f1558f5e63..00000000000
--- a/packages/component-library-react/src/RadioButton.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-
-import clsx from 'clsx';
-import { ForwardedRef, forwardRef, InputHTMLAttributes, PropsWithChildren } from 'react';
-
-export type RadioButtonProps = InputHTMLAttributes<HTMLInputElement> & {
-  invalid?: boolean;
-};
-
-export const RadioButton = forwardRef(
-  (
-    { disabled, required, className, invalid, ...restProps }: PropsWithChildren<RadioButtonProps>,
-    ref: ForwardedRef<HTMLInputElement>,
-  ) => (
-    <input
-      type="radio"
-      aria-invalid={invalid || undefined}
-      disabled={disabled}
-      required={required}
-      ref={ref}
-      className={clsx(
-        'utrecht-radio-button',
-        'utrecht-radio-button--html-input',
-        disabled && 'utrecht-radio-button--disabled',
-        invalid && 'utrecht-radio-button--invalid',
-        className,
-      )}
-      {...restProps}
-    />
-  ),
-);
-
-RadioButton.displayName = 'RadioButton';
diff --git a/packages/component-library-react/src/css-module/Checkbox.tsx b/packages/component-library-react/src/css-module/Checkbox.tsx
deleted file mode 100644
index de68604ff68..00000000000
--- a/packages/component-library-react/src/css-module/Checkbox.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-
-import '@utrecht/custom-checkbox-css/src/index.scss';
-import '@utrecht/checkbox-css/src/index.scss';
-
-export * from '../Checkbox';
diff --git a/packages/component-library-react/src/css-module/Fieldset.tsx b/packages/component-library-react/src/css-module/Fieldset.tsx
deleted file mode 100644
index 675e5e41572..00000000000
--- a/packages/component-library-react/src/css-module/Fieldset.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-
-import '@utrecht/form-fieldset-css/src/index.scss';
-
-export * from '../Fieldset';
diff --git a/packages/component-library-react/src/css-module/FieldsetLegend.tsx b/packages/component-library-react/src/css-module/FieldsetLegend.tsx
deleted file mode 100644
index ab52bf1d449..00000000000
--- a/packages/component-library-react/src/css-module/FieldsetLegend.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-
-import '@utrecht/form-fieldset-css/src/index.scss';
-
-export * from '../FieldsetLegend';
diff --git a/packages/component-library-react/src/css-module/FormFieldCheckbox.tsx b/packages/component-library-react/src/css-module/FormFieldCheckbox.tsx
deleted file mode 100644
index 139ddbec44d..00000000000
--- a/packages/component-library-react/src/css-module/FormFieldCheckbox.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-
-// Inject CSS from components used in `FormFieldCheckbox`
-import './Checkbox';
-import './FormField';
-import './FormFieldDescription';
-import './FormFieldErrorMessage';
-
-export * from '../FormFieldCheckbox';
diff --git a/packages/component-library-react/src/css-module/FormFieldDescription.tsx b/packages/component-library-react/src/css-module/FormFieldDescription.tsx
deleted file mode 100644
index 7aa9128415b..00000000000
--- a/packages/component-library-react/src/css-module/FormFieldDescription.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-
-import '@utrecht/form-field-description-css/src/index.scss';
-
-export * from '../FormFieldDescription';
diff --git a/packages/component-library-react/src/css-module/FormFieldErrorMessage.tsx b/packages/component-library-react/src/css-module/FormFieldErrorMessage.tsx
deleted file mode 100644
index eee633cb7bb..00000000000
--- a/packages/component-library-react/src/css-module/FormFieldErrorMessage.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-
-import '@utrecht/form-field-error-message-css/src/index.scss';
-
-export * from '../FormFieldErrorMessage';
diff --git a/packages/component-library-react/src/css-module/FormFieldTextarea.tsx b/packages/component-library-react/src/css-module/FormFieldTextarea.tsx
index 083e503b454..22f540efd9d 100644
--- a/packages/component-library-react/src/css-module/FormFieldTextarea.tsx
+++ b/packages/component-library-react/src/css-module/FormFieldTextarea.tsx
@@ -5,8 +5,8 @@
 
 // Inject CSS from components used in `FormFieldTextarea`
 import './Textarea';
-import './FormField';
-import './FormFieldDescription';
-import './FormFieldErrorMessage';
+import '@utrecht/form-field-react';
+import '@utrecht/form-field-description-react';
+import '@utrecht/form-field-error-message-react';
 
 export * from '../FormFieldTextarea';
diff --git a/packages/component-library-react/src/css-module/FormFieldTextbox.tsx b/packages/component-library-react/src/css-module/FormFieldTextbox.tsx
index 9ede01453a2..00cc4067ab2 100644
--- a/packages/component-library-react/src/css-module/FormFieldTextbox.tsx
+++ b/packages/component-library-react/src/css-module/FormFieldTextbox.tsx
@@ -5,8 +5,8 @@
 
 // Inject CSS from components used in `FormFieldTextbox`
 import './Textbox';
-import './FormField';
-import './FormFieldDescription';
-import './FormFieldErrorMessage';
+import '@utrecht/form-field-react';
+import '@utrecht/form-field-description-react';
+import '@utrecht/form-field-error-message-react';
 
 export * from '../FormFieldTextbox';
diff --git a/packages/component-library-react/src/css-module/RadioButton.tsx b/packages/component-library-react/src/css-module/RadioButton.tsx
deleted file mode 100644
index f28a11b34bc..00000000000
--- a/packages/component-library-react/src/css-module/RadioButton.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-
-import '@utrecht/radio-button-css/src/index.scss';
-
-export * from '../RadioButton';
diff --git a/packages/component-library-react/src/css-module/index.ts b/packages/component-library-react/src/css-module/index.ts
index 991d3722904..61a2a5061e9 100644
--- a/packages/component-library-react/src/css-module/index.ts
+++ b/packages/component-library-react/src/css-module/index.ts
@@ -26,8 +26,8 @@ export type { ButtonGroupProps } from '../ButtonGroup';
 export { ButtonGroup } from './ButtonGroup';
 export type { ButtonLinkProps } from '../ButtonLink';
 export { ButtonLink } from './ButtonLink';
-export type { CheckboxProps } from '../Checkbox';
-export { Checkbox } from './Checkbox';
+export type { CheckboxProps } from '@utrecht/checkbox-react/dist/css';
+export { Checkbox } from '@utrecht/checkbox-react/dist/css';
 export type { CodeProps } from '../Code';
 export { Code } from './Code';
 export type { CodeBlockProps } from '../CodeBlock';
@@ -56,22 +56,22 @@ export type { EmphasisProps } from '../Emphasis';
 export type { DrawerAlignType, DrawerProps } from './Drawer';
 export { Drawer } from './Drawer';
 export { Emphasis } from './Emphasis';
-export type { FieldsetProps } from '../Fieldset';
-export { Fieldset } from './Fieldset';
-export type { FieldsetLegendProps } from '../FieldsetLegend';
-export { FieldsetLegend } from './FieldsetLegend';
+export type { FieldsetProps } from '@utrecht/fieldset-react/dist/css';
+export { Fieldset } from '@utrecht/fieldset-react/dist/css';
+export type { FieldsetLegendProps } from '@utrecht/fieldset-react/dist/css';
+export { FieldsetLegend } from '@utrecht/fieldset-react/dist/css';
 export type { FigureProps } from '../Figure';
 export { Figure } from './Figure';
 export type { FigureCaptionProps } from '../FigureCaption';
 export { FigureCaption } from './FigureCaption';
 export type { FormFieldProps } from '../FormField';
 export { FormField } from './FormField';
-export type { FormFieldCheckboxProps } from '../FormFieldCheckbox';
-export { FormFieldCheckbox } from './FormFieldCheckbox';
-export type { FormFieldDescriptionProps } from '../FormFieldDescription';
-export { FormFieldDescription } from './FormFieldDescription';
-export type { FormFieldErrorMessageProps } from '../FormFieldErrorMessage';
-export { FormFieldErrorMessage } from './FormFieldErrorMessage';
+export type { FormFieldCheckboxProps } from '@utrecht/form-field-checkbox-react/dist/css';
+export { FormFieldCheckbox } from '@utrecht/form-field-checkbox-react/dist/css';
+export type { FormFieldDescriptionProps } from '@utrecht/form-field-description-react/dist/css';
+export { FormFieldDescription } from '@utrecht/form-field-description-react/dist/css';
+export type { FormFieldErrorMessageProps } from '@utrecht/form-field-error-message-react/dist/css';
+export { FormFieldErrorMessage } from '@utrecht/form-field-error-message-react/dist/css';
 export type { FormFieldTextareaProps } from '../FormFieldTextarea';
 export { FormFieldTextarea } from './FormFieldTextarea';
 export type { FormFieldTextboxProps } from '../FormFieldTextbox';
@@ -154,8 +154,8 @@ export type { PreHeadingProps } from '../PreHeading';
 export { PreHeading } from './PreHeading';
 export type { PreserveDataProps } from './PreserveData';
 export { PreserveData } from './PreserveData';
-export type { RadioButtonProps } from '../RadioButton';
-export { RadioButton } from './RadioButton';
+export type { RadioButtonProps } from '@utrecht/radio-button-react/dist/css';
+export { RadioButton } from '@utrecht/radio-button-react/dist/css';
 export type { RichTextProps } from '../RichText';
 export { RichText } from './RichText';
 export type { ScrollLinkProps } from '../ScrollLink';
diff --git a/packages/component-library-react/src/index.ts b/packages/component-library-react/src/index.ts
index 453a5dd1b2f..b36f050893b 100644
--- a/packages/component-library-react/src/index.ts
+++ b/packages/component-library-react/src/index.ts
@@ -33,8 +33,8 @@ export type { ButtonGroupProps } from './ButtonGroup';
 export { ButtonGroup } from './ButtonGroup';
 export type { ButtonLinkProps } from './ButtonLink';
 export { ButtonLink } from './ButtonLink';
-export type { CheckboxProps } from './Checkbox';
-export { Checkbox } from './Checkbox';
+export type { CheckboxProps } from '@utrecht/checkbox-react';
+export { Checkbox } from '@utrecht/checkbox-react';
 export type { CodeProps } from './Code';
 export { Code } from './Code';
 export type { CodeBlockProps } from './CodeBlock';
@@ -63,22 +63,22 @@ export type { DrawerAlignType, DrawerProps } from './Drawer';
 export { Drawer } from './Drawer';
 export type { EmphasisProps } from './Emphasis';
 export { Emphasis } from './Emphasis';
-export type { FieldsetProps } from './Fieldset';
-export { Fieldset } from './Fieldset';
-export type { FieldsetLegendProps } from './FieldsetLegend';
-export { FieldsetLegend } from './FieldsetLegend';
+export type { FieldsetProps } from '@utrecht/fieldset-react';
+export { Fieldset } from '@utrecht/fieldset-react';
+export type { FieldsetLegendProps } from '@utrecht/fieldset-react';
+export { FieldsetLegend } from '@utrecht/fieldset-react';
 export type { FigureProps } from './Figure';
 export { Figure } from './Figure';
 export type { FigureCaptionProps } from './FigureCaption';
 export { FigureCaption } from './FigureCaption';
 export type { FormFieldProps } from './FormField';
 export { FormField } from './FormField';
-export type { FormFieldCheckboxProps } from './FormFieldCheckbox';
-export { FormFieldCheckbox } from './FormFieldCheckbox';
-export type { FormFieldDescriptionProps } from './FormFieldDescription';
-export { FormFieldDescription } from './FormFieldDescription';
-export type { FormFieldErrorMessageProps } from './FormFieldErrorMessage';
-export { FormFieldErrorMessage } from './FormFieldErrorMessage';
+export type { FormFieldCheckboxProps } from '@utrecht/form-field-checkbox-react';
+export { FormFieldCheckbox } from '@utrecht/form-field-checkbox-react';
+export type { FormFieldDescriptionProps } from '@utrecht/form-field-description-react';
+export { FormFieldDescription } from '@utrecht/form-field-description-react';
+export type { FormFieldErrorMessageProps } from '@utrecht/form-field-error-message-react';
+export { FormFieldErrorMessage } from '@utrecht/form-field-error-message-react';
 export type { FormFieldTextareaProps } from './FormFieldTextarea';
 export { FormFieldTextarea } from './FormFieldTextarea';
 export type { FormFieldTextboxProps } from './FormFieldTextbox';
@@ -161,8 +161,8 @@ export type { PreHeadingProps } from './PreHeading';
 export { PreHeading } from './PreHeading';
 export type { PreserveDataProps } from './PreserveData';
 export { PreserveData } from './PreserveData';
-export type { RadioButtonProps } from './RadioButton';
-export { RadioButton } from './RadioButton';
+export type { RadioButtonProps } from '@utrecht/radio-button-react';
+export { RadioButton } from '@utrecht/radio-button-react';
 export type { RichTextProps } from './RichText';
 export { RichText } from './RichText';
 export type { ScrollLinkProps } from './ScrollLink';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9e45c718666..2b0ac7d2370 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1384,7 +1384,7 @@ importers:
         version: 29.7.0(@types/node@22.7.4)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.100(@swc/helpers@0.5.5))(@types/node@22.7.4)(typescript@5.3.3))
       jest-preset-angular:
         specifier: 13.1.4
-        version: 13.1.4(6b34yrqv6cw3yppjzvogcm4gq4)
+        version: 13.1.4(lclvuqcmfjqpf7yvsvwiyjlzae)
       lodash.clonedeepwith:
         specifier: 4.5.0
         version: 4.5.0
@@ -1632,9 +1632,9 @@ importers:
       '@utrecht/calendar-react':
         specifier: workspace:*
         version: link:../components-react/calendar-react
-      '@utrecht/checkbox-css':
+      '@utrecht/checkbox-react':
         specifier: workspace:*
-        version: link:../../components/checkbox
+        version: link:../components-react/checkbox-react
       '@utrecht/code-block-css':
         specifier: workspace:*
         version: link:../../components/code-block
@@ -1674,24 +1674,27 @@ importers:
       '@utrecht/emphasis-css':
         specifier: workspace:*
         version: link:../../components/emphasis
+      '@utrecht/fieldset-react':
+        specifier: workspace:*
+        version: link:../components-react/fieldset-react
       '@utrecht/figure-css':
         specifier: workspace:*
         version: link:../../components/figure
       '@utrecht/focus-ring-css':
         specifier: workspace:*
         version: link:../../components/focus-ring
-      '@utrecht/form-field-description-css':
+      '@utrecht/form-field-checkbox-react':
         specifier: workspace:*
-        version: link:../../components/form-field-description
-      '@utrecht/form-field-error-message-css':
+        version: link:../components-react/form-field-checkbox-react
+      '@utrecht/form-field-description-react':
         specifier: workspace:*
-        version: link:../../components/form-field-error-message
+        version: link:../components-react/form-field-description-react
+      '@utrecht/form-field-error-message-react':
+        specifier: workspace:*
+        version: link:../components-react/form-field-error-message-react
       '@utrecht/form-field-react':
         specifier: workspace:*
         version: link:../components-react/form-field-react
-      '@utrecht/form-fieldset-css':
-        specifier: workspace:*
-        version: link:../../components/form-fieldset
       '@utrecht/form-label-react':
         specifier: workspace:*
         version: link:../components-react/form-label-react
@@ -1812,9 +1815,9 @@ importers:
       '@utrecht/preserve-data-css':
         specifier: workspace:*
         version: link:../../components/preserve-data
-      '@utrecht/radio-button-css':
+      '@utrecht/radio-button-react':
         specifier: workspace:*
-        version: link:../../components/radio-button
+        version: link:../components-react/radio-button-react
       '@utrecht/rich-text-css':
         specifier: workspace:*
         version: link:../../components/rich-text
@@ -2346,6 +2349,585 @@ importers:
         specifier: 5.6.2
         version: 5.6.2
 
+  packages/components-react/checkbox-group-react:
+    dependencies:
+      '@babel/runtime':
+        specifier: '*'
+        version: 7.24.7
+      clsx:
+        specifier: 2.1.1
+        version: 2.1.1
+      react-dom:
+        specifier: '18'
+        version: 18.3.1(react@18.3.1)
+    devDependencies:
+      '@babel/plugin-transform-runtime':
+        specifier: 7.24.7
+        version: 7.24.7(@babel/core@7.24.7)
+      '@babel/preset-env':
+        specifier: 7.24.7
+        version: 7.24.7(@babel/core@7.24.7)
+      '@babel/preset-react':
+        specifier: 7.24.7
+        version: 7.24.7(@babel/core@7.24.7)
+      '@babel/preset-typescript':
+        specifier: 7.24.7
+        version: 7.24.7(@babel/core@7.24.7)
+      '@rollup/plugin-babel':
+        specifier: 6.0.4
+        version: 6.0.4(@babel/core@7.24.7)(@types/babel__core@7.20.5)(rollup@4.23.0)
+      '@rollup/plugin-commonjs':
+        specifier: 26.0.1
+        version: 26.0.1(rollup@4.23.0)
+      '@rollup/plugin-json':
+        specifier: 6.1.0
+        version: 6.1.0(rollup@4.23.0)
+      '@rollup/plugin-node-resolve':
+        specifier: 15.2.3
+        version: 15.2.3(rollup@4.23.0)
+      '@rollup/plugin-typescript':
+        specifier: 12.1.0
+        version: 12.1.0(rollup@4.23.0)(tslib@2.6.2)(typescript@5.6.2)
+      '@testing-library/dom':
+        specifier: 8.20.1
+        version: 8.20.1
+      '@testing-library/jest-dom':
+        specifier: 6.5.0
+        version: 6.5.0
+      '@testing-library/react':
+        specifier: 16.0.1
+        version: 16.0.1(@testing-library/dom@8.20.1)(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@testing-library/user-event':
+        specifier: 14.5.1
+        version: 14.5.1(@testing-library/dom@8.20.1)
+      '@types/jest':
+        specifier: 29.5.13
+        version: 29.5.13
+      '@types/react':
+        specifier: 18.3.3
+        version: 18.3.3
+      '@types/testing-library__jest-dom':
+        specifier: 5.14.9
+        version: 5.14.9
+      '@utrecht/checkbox-react':
+        specifier: workspace:*
+        version: link:../checkbox-react
+      '@utrecht/fieldset-react':
+        specifier: workspace:*
+        version: link:../fieldset-react
+      '@utrecht/form-field-checkbox-react':
+        specifier: workspace:*
+        version: link:../form-field-checkbox-react
+      '@utrecht/form-field-css':
+        specifier: workspace:*
+        version: link:../../../components/form-field
+      '@utrecht/form-field-description-react':
+        specifier: workspace:*
+        version: link:../form-field-description-react
+      '@utrecht/form-field-error-message-react':
+        specifier: workspace:*
+        version: link:../form-field-error-message-react
+      '@utrecht/form-field-react':
+        specifier: workspace:*
+        version: link:../form-field-react
+      jest:
+        specifier: 29.7.0
+        version: 29.7.0(@types/node@22.7.4)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.100(@swc/helpers@0.5.5))(@types/node@22.7.4)(typescript@5.6.2))
+      jest-environment-jsdom:
+        specifier: 29.7.0
+        version: 29.7.0
+      react:
+        specifier: 18.3.1
+        version: 18.3.1
+      rollup:
+        specifier: 4.23.0
+        version: 4.23.0
+      rollup-plugin-filesize:
+        specifier: 10.0.0
+        version: 10.0.0
+      rollup-plugin-node-externals:
+        specifier: 7.1.2
+        version: 7.1.2(rollup@4.23.0)
+      rollup-plugin-peer-deps-external:
+        specifier: 2.2.4
+        version: 2.2.4(rollup@4.23.0)
+      rollup-plugin-postcss:
+        specifier: 4.0.2
+        version: 4.0.2(postcss@8.4.38)(ts-node@10.9.1(@swc/core@1.3.100(@swc/helpers@0.5.5))(@types/node@22.7.4)(typescript@5.6.2))
+      typescript:
+        specifier: 5.6.2
+        version: 5.6.2
+
+  packages/components-react/checkbox-react:
+    dependencies:
+      '@babel/runtime':
+        specifier: '*'
+        version: 7.24.7
+      clsx:
+        specifier: 2.1.1
+        version: 2.1.1
+      react-dom:
+        specifier: '18'
+        version: 18.3.1(react@18.3.1)
+    devDependencies:
+      '@babel/plugin-transform-runtime':
+        specifier: 7.24.7
+        version: 7.24.7(@babel/core@7.24.7)
+      '@babel/preset-env':
+        specifier: 7.24.7
+        version: 7.24.7(@babel/core@7.24.7)
+      '@babel/preset-react':
+        specifier: 7.24.7
+        version: 7.24.7(@babel/core@7.24.7)
+      '@babel/preset-typescript':
+        specifier: 7.24.7
+        version: 7.24.7(@babel/core@7.24.7)
+      '@rollup/plugin-babel':
+        specifier: 6.0.4
+        version: 6.0.4(@babel/core@7.24.7)(@types/babel__core@7.20.5)(rollup@4.23.0)
+      '@rollup/plugin-commonjs':
+        specifier: 26.0.1
+        version: 26.0.1(rollup@4.23.0)
+      '@rollup/plugin-json':
+        specifier: 6.1.0
+        version: 6.1.0(rollup@4.23.0)
+      '@rollup/plugin-node-resolve':
+        specifier: 15.2.3
+        version: 15.2.3(rollup@4.23.0)
+      '@rollup/plugin-typescript':
+        specifier: 12.1.0
+        version: 12.1.0(rollup@4.23.0)(tslib@2.6.2)(typescript@5.6.2)
+      '@testing-library/dom':
+        specifier: 8.20.1
+        version: 8.20.1
+      '@testing-library/jest-dom':
+        specifier: 6.5.0
+        version: 6.5.0
+      '@testing-library/react':
+        specifier: 16.0.1
+        version: 16.0.1(@testing-library/dom@8.20.1)(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@testing-library/user-event':
+        specifier: 14.5.1
+        version: 14.5.1(@testing-library/dom@8.20.1)
+      '@types/jest':
+        specifier: 29.5.13
+        version: 29.5.13
+      '@types/react':
+        specifier: 18.3.3
+        version: 18.3.3
+      '@types/testing-library__jest-dom':
+        specifier: 5.14.9
+        version: 5.14.9
+      '@utrecht/checkbox-css':
+        specifier: workspace:*
+        version: link:../../../components/checkbox
+      '@utrecht/custom-checkbox-css':
+        specifier: workspace:*
+        version: link:../../../components/custom-checkbox
+      jest:
+        specifier: 29.7.0
+        version: 29.7.0(@types/node@22.7.4)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.100(@swc/helpers@0.5.5))(@types/node@22.7.4)(typescript@5.6.2))
+      jest-environment-jsdom:
+        specifier: 29.7.0
+        version: 29.7.0
+      react:
+        specifier: 18.3.1
+        version: 18.3.1
+      rollup:
+        specifier: 4.23.0
+        version: 4.23.0
+      rollup-plugin-filesize:
+        specifier: 10.0.0
+        version: 10.0.0
+      rollup-plugin-node-externals:
+        specifier: 7.1.2
+        version: 7.1.2(rollup@4.23.0)
+      rollup-plugin-peer-deps-external:
+        specifier: 2.2.4
+        version: 2.2.4(rollup@4.23.0)
+      rollup-plugin-postcss:
+        specifier: 4.0.2
+        version: 4.0.2(postcss@8.4.38)(ts-node@10.9.1(@swc/core@1.3.100(@swc/helpers@0.5.5))(@types/node@22.7.4)(typescript@5.6.2))
+      typescript:
+        specifier: 5.6.2
+        version: 5.6.2
+
+  packages/components-react/fieldset-react:
+    dependencies:
+      '@babel/runtime':
+        specifier: '*'
+        version: 7.24.7
+      clsx:
+        specifier: 2.1.1
+        version: 2.1.1
+      react-dom:
+        specifier: '18'
+        version: 18.3.1(react@18.3.1)
+    devDependencies:
+      '@babel/plugin-transform-runtime':
+        specifier: 7.24.7
+        version: 7.24.7(@babel/core@7.24.7)
+      '@babel/preset-env':
+        specifier: 7.24.7
+        version: 7.24.7(@babel/core@7.24.7)
+      '@babel/preset-react':
+        specifier: 7.24.7
+        version: 7.24.7(@babel/core@7.24.7)
+      '@babel/preset-typescript':
+        specifier: 7.24.7
+        version: 7.24.7(@babel/core@7.24.7)
+      '@rollup/plugin-babel':
+        specifier: 6.0.4
+        version: 6.0.4(@babel/core@7.24.7)(@types/babel__core@7.20.5)(rollup@4.23.0)
+      '@rollup/plugin-commonjs':
+        specifier: 26.0.1
+        version: 26.0.1(rollup@4.23.0)
+      '@rollup/plugin-json':
+        specifier: 6.1.0
+        version: 6.1.0(rollup@4.23.0)
+      '@rollup/plugin-node-resolve':
+        specifier: 15.2.3
+        version: 15.2.3(rollup@4.23.0)
+      '@rollup/plugin-typescript':
+        specifier: 12.1.0
+        version: 12.1.0(rollup@4.23.0)(tslib@2.6.2)(typescript@5.6.2)
+      '@testing-library/dom':
+        specifier: 8.20.1
+        version: 8.20.1
+      '@testing-library/jest-dom':
+        specifier: 6.5.0
+        version: 6.5.0
+      '@testing-library/react':
+        specifier: 16.0.1
+        version: 16.0.1(@testing-library/dom@8.20.1)(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@testing-library/user-event':
+        specifier: 14.5.1
+        version: 14.5.1(@testing-library/dom@8.20.1)
+      '@types/jest':
+        specifier: 29.5.13
+        version: 29.5.13
+      '@types/react':
+        specifier: 18.3.3
+        version: 18.3.3
+      '@types/testing-library__jest-dom':
+        specifier: 5.14.9
+        version: 5.14.9
+      '@utrecht/form-fieldset-css':
+        specifier: workspace:*
+        version: link:../../../components/form-fieldset
+      jest:
+        specifier: 29.7.0
+        version: 29.7.0(@types/node@22.7.4)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.100(@swc/helpers@0.5.5))(@types/node@22.7.4)(typescript@5.6.2))
+      jest-environment-jsdom:
+        specifier: 29.7.0
+        version: 29.7.0
+      react:
+        specifier: 18.3.1
+        version: 18.3.1
+      rollup:
+        specifier: 4.23.0
+        version: 4.23.0
+      rollup-plugin-filesize:
+        specifier: 10.0.0
+        version: 10.0.0
+      rollup-plugin-node-externals:
+        specifier: 7.1.2
+        version: 7.1.2(rollup@4.23.0)
+      rollup-plugin-peer-deps-external:
+        specifier: 2.2.4
+        version: 2.2.4(rollup@4.23.0)
+      rollup-plugin-postcss:
+        specifier: 4.0.2
+        version: 4.0.2(postcss@8.4.38)(ts-node@10.9.1(@swc/core@1.3.100(@swc/helpers@0.5.5))(@types/node@22.7.4)(typescript@5.6.2))
+      typescript:
+        specifier: 5.6.2
+        version: 5.6.2
+
+  packages/components-react/form-field-checkbox-react:
+    dependencies:
+      '@babel/runtime':
+        specifier: '*'
+        version: 7.24.7
+      clsx:
+        specifier: 2.1.1
+        version: 2.1.1
+      react-dom:
+        specifier: '18'
+        version: 18.3.1(react@18.3.1)
+    devDependencies:
+      '@babel/plugin-transform-runtime':
+        specifier: 7.24.7
+        version: 7.24.7(@babel/core@7.24.7)
+      '@babel/preset-env':
+        specifier: 7.24.7
+        version: 7.24.7(@babel/core@7.24.7)
+      '@babel/preset-react':
+        specifier: 7.24.7
+        version: 7.24.7(@babel/core@7.24.7)
+      '@babel/preset-typescript':
+        specifier: 7.24.7
+        version: 7.24.7(@babel/core@7.24.7)
+      '@rollup/plugin-babel':
+        specifier: 6.0.4
+        version: 6.0.4(@babel/core@7.24.7)(@types/babel__core@7.20.5)(rollup@4.23.0)
+      '@rollup/plugin-commonjs':
+        specifier: 26.0.1
+        version: 26.0.1(rollup@4.23.0)
+      '@rollup/plugin-json':
+        specifier: 6.1.0
+        version: 6.1.0(rollup@4.23.0)
+      '@rollup/plugin-node-resolve':
+        specifier: 15.2.3
+        version: 15.2.3(rollup@4.23.0)
+      '@rollup/plugin-typescript':
+        specifier: 12.1.0
+        version: 12.1.0(rollup@4.23.0)(tslib@2.6.2)(typescript@5.6.2)
+      '@testing-library/dom':
+        specifier: 8.20.1
+        version: 8.20.1
+      '@testing-library/jest-dom':
+        specifier: 6.5.0
+        version: 6.5.0
+      '@testing-library/react':
+        specifier: 16.0.1
+        version: 16.0.1(@testing-library/dom@8.20.1)(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@testing-library/user-event':
+        specifier: 14.5.1
+        version: 14.5.1(@testing-library/dom@8.20.1)
+      '@types/jest':
+        specifier: 29.5.13
+        version: 29.5.13
+      '@types/react':
+        specifier: 18.3.3
+        version: 18.3.3
+      '@types/testing-library__jest-dom':
+        specifier: 5.14.9
+        version: 5.14.9
+      '@utrecht/checkbox-react':
+        specifier: workspace:*
+        version: link:../checkbox-react
+      '@utrecht/form-field-description-react':
+        specifier: workspace:*
+        version: link:../form-field-description-react
+      '@utrecht/form-field-error-message-react':
+        specifier: workspace:*
+        version: link:../form-field-error-message-react
+      '@utrecht/form-field-react':
+        specifier: workspace:*
+        version: link:../form-field-react
+      '@utrecht/form-label-react':
+        specifier: workspace:*
+        version: link:../form-label-react
+      jest:
+        specifier: 29.7.0
+        version: 29.7.0(@types/node@22.7.4)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.100(@swc/helpers@0.5.5))(@types/node@22.7.4)(typescript@5.6.2))
+      jest-environment-jsdom:
+        specifier: 29.7.0
+        version: 29.7.0
+      react:
+        specifier: 18.3.1
+        version: 18.3.1
+      rollup:
+        specifier: 4.23.0
+        version: 4.23.0
+      rollup-plugin-filesize:
+        specifier: 10.0.0
+        version: 10.0.0
+      rollup-plugin-node-externals:
+        specifier: 7.1.2
+        version: 7.1.2(rollup@4.23.0)
+      rollup-plugin-peer-deps-external:
+        specifier: 2.2.4
+        version: 2.2.4(rollup@4.23.0)
+      rollup-plugin-postcss:
+        specifier: 4.0.2
+        version: 4.0.2(postcss@8.4.38)(ts-node@10.9.1(@swc/core@1.3.100(@swc/helpers@0.5.5))(@types/node@22.7.4)(typescript@5.6.2))
+      typescript:
+        specifier: 5.6.2
+        version: 5.6.2
+
+  packages/components-react/form-field-description-react:
+    dependencies:
+      '@babel/runtime':
+        specifier: '*'
+        version: 7.24.7
+      clsx:
+        specifier: 2.1.1
+        version: 2.1.1
+      react-dom:
+        specifier: '18'
+        version: 18.3.1(react@18.3.1)
+    devDependencies:
+      '@babel/plugin-transform-runtime':
+        specifier: 7.24.7
+        version: 7.24.7(@babel/core@7.24.7)
+      '@babel/preset-env':
+        specifier: 7.24.7
+        version: 7.24.7(@babel/core@7.24.7)
+      '@babel/preset-react':
+        specifier: 7.24.7
+        version: 7.24.7(@babel/core@7.24.7)
+      '@babel/preset-typescript':
+        specifier: 7.24.7
+        version: 7.24.7(@babel/core@7.24.7)
+      '@rollup/plugin-babel':
+        specifier: 6.0.4
+        version: 6.0.4(@babel/core@7.24.7)(@types/babel__core@7.20.5)(rollup@4.23.0)
+      '@rollup/plugin-commonjs':
+        specifier: 26.0.1
+        version: 26.0.1(rollup@4.23.0)
+      '@rollup/plugin-json':
+        specifier: 6.1.0
+        version: 6.1.0(rollup@4.23.0)
+      '@rollup/plugin-node-resolve':
+        specifier: 15.2.3
+        version: 15.2.3(rollup@4.23.0)
+      '@rollup/plugin-typescript':
+        specifier: 12.1.0
+        version: 12.1.0(rollup@4.23.0)(tslib@2.6.2)(typescript@5.6.2)
+      '@testing-library/dom':
+        specifier: 8.20.1
+        version: 8.20.1
+      '@testing-library/jest-dom':
+        specifier: 6.5.0
+        version: 6.5.0
+      '@testing-library/react':
+        specifier: 16.0.1
+        version: 16.0.1(@testing-library/dom@8.20.1)(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@testing-library/user-event':
+        specifier: 14.5.1
+        version: 14.5.1(@testing-library/dom@8.20.1)
+      '@types/jest':
+        specifier: 29.5.13
+        version: 29.5.13
+      '@types/react':
+        specifier: 18.3.3
+        version: 18.3.3
+      '@types/testing-library__jest-dom':
+        specifier: 5.14.9
+        version: 5.14.9
+      '@utrecht/form-field-description-css':
+        specifier: workspace:*
+        version: link:../../../components/form-field-description
+      jest:
+        specifier: 29.7.0
+        version: 29.7.0(@types/node@22.7.4)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.100(@swc/helpers@0.5.5))(@types/node@22.7.4)(typescript@5.6.2))
+      jest-environment-jsdom:
+        specifier: 29.7.0
+        version: 29.7.0
+      react:
+        specifier: 18.3.1
+        version: 18.3.1
+      rollup:
+        specifier: 4.23.0
+        version: 4.23.0
+      rollup-plugin-filesize:
+        specifier: 10.0.0
+        version: 10.0.0
+      rollup-plugin-node-externals:
+        specifier: 7.1.2
+        version: 7.1.2(rollup@4.23.0)
+      rollup-plugin-peer-deps-external:
+        specifier: 2.2.4
+        version: 2.2.4(rollup@4.23.0)
+      rollup-plugin-postcss:
+        specifier: 4.0.2
+        version: 4.0.2(postcss@8.4.38)(ts-node@10.9.1(@swc/core@1.3.100(@swc/helpers@0.5.5))(@types/node@22.7.4)(typescript@5.6.2))
+      typescript:
+        specifier: 5.6.2
+        version: 5.6.2
+
+  packages/components-react/form-field-error-message-react:
+    dependencies:
+      '@babel/runtime':
+        specifier: '*'
+        version: 7.24.7
+      clsx:
+        specifier: 2.1.1
+        version: 2.1.1
+      react-dom:
+        specifier: '18'
+        version: 18.3.1(react@18.3.1)
+    devDependencies:
+      '@babel/plugin-transform-runtime':
+        specifier: 7.24.7
+        version: 7.24.7(@babel/core@7.24.7)
+      '@babel/preset-env':
+        specifier: 7.24.7
+        version: 7.24.7(@babel/core@7.24.7)
+      '@babel/preset-react':
+        specifier: 7.24.7
+        version: 7.24.7(@babel/core@7.24.7)
+      '@babel/preset-typescript':
+        specifier: 7.24.7
+        version: 7.24.7(@babel/core@7.24.7)
+      '@rollup/plugin-babel':
+        specifier: 6.0.4
+        version: 6.0.4(@babel/core@7.24.7)(@types/babel__core@7.20.5)(rollup@4.23.0)
+      '@rollup/plugin-commonjs':
+        specifier: 26.0.1
+        version: 26.0.1(rollup@4.23.0)
+      '@rollup/plugin-json':
+        specifier: 6.1.0
+        version: 6.1.0(rollup@4.23.0)
+      '@rollup/plugin-node-resolve':
+        specifier: 15.2.3
+        version: 15.2.3(rollup@4.23.0)
+      '@rollup/plugin-typescript':
+        specifier: 12.1.0
+        version: 12.1.0(rollup@4.23.0)(tslib@2.6.2)(typescript@5.6.2)
+      '@testing-library/dom':
+        specifier: 8.20.1
+        version: 8.20.1
+      '@testing-library/jest-dom':
+        specifier: 6.5.0
+        version: 6.5.0
+      '@testing-library/react':
+        specifier: 16.0.1
+        version: 16.0.1(@testing-library/dom@8.20.1)(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@testing-library/user-event':
+        specifier: 14.5.1
+        version: 14.5.1(@testing-library/dom@8.20.1)
+      '@types/jest':
+        specifier: 29.5.13
+        version: 29.5.13
+      '@types/react':
+        specifier: 18.3.3
+        version: 18.3.3
+      '@types/testing-library__jest-dom':
+        specifier: 5.14.9
+        version: 5.14.9
+      '@utrecht/form-field-error-message-css':
+        specifier: workspace:*
+        version: link:../../../components/form-field-error-message
+      jest:
+        specifier: 29.7.0
+        version: 29.7.0(@types/node@22.7.4)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.100(@swc/helpers@0.5.5))(@types/node@22.7.4)(typescript@5.6.2))
+      jest-environment-jsdom:
+        specifier: 29.7.0
+        version: 29.7.0
+      react:
+        specifier: 18.3.1
+        version: 18.3.1
+      rollup:
+        specifier: 4.23.0
+        version: 4.23.0
+      rollup-plugin-filesize:
+        specifier: 10.0.0
+        version: 10.0.0
+      rollup-plugin-node-externals:
+        specifier: 7.1.2
+        version: 7.1.2(rollup@4.23.0)
+      rollup-plugin-peer-deps-external:
+        specifier: 2.2.4
+        version: 2.2.4(rollup@4.23.0)
+      rollup-plugin-postcss:
+        specifier: 4.0.2
+        version: 4.0.2(postcss@8.4.38)(ts-node@10.9.1(@swc/core@1.3.100(@swc/helpers@0.5.5))(@types/node@22.7.4)(typescript@5.6.2))
+      typescript:
+        specifier: 5.6.2
+        version: 5.6.2
+
   packages/components-react/form-field-react:
     dependencies:
       '@babel/runtime':
@@ -2409,188 +2991,388 @@ importers:
       '@utrecht/form-field-css':
         specifier: workspace:*
         version: link:../../../components/form-field
-      jest:
-        specifier: 29.7.0
-        version: 29.7.0(@types/node@22.7.4)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.100(@swc/helpers@0.5.5))(@types/node@22.7.4)(typescript@5.6.2))
-      jest-environment-jsdom:
-        specifier: 29.7.0
-        version: 29.7.0
-      react:
-        specifier: 18.3.1
-        version: 18.3.1
-      rollup:
-        specifier: 4.23.0
-        version: 4.23.0
-      rollup-plugin-filesize:
-        specifier: 10.0.0
-        version: 10.0.0
-      rollup-plugin-node-externals:
-        specifier: 7.1.2
-        version: 7.1.2(rollup@4.23.0)
-      rollup-plugin-peer-deps-external:
-        specifier: 2.2.4
-        version: 2.2.4(rollup@4.23.0)
-      rollup-plugin-postcss:
-        specifier: 4.0.2
-        version: 4.0.2(postcss@8.4.38)(ts-node@10.9.1(@swc/core@1.3.100(@swc/helpers@0.5.5))(@types/node@22.7.4)(typescript@5.6.2))
-      typescript:
-        specifier: 5.6.2
-        version: 5.6.2
-
-  packages/components-react/form-label-react:
-    dependencies:
-      '@babel/runtime':
-        specifier: '*'
-        version: 7.24.7
-      clsx:
-        specifier: 2.1.1
-        version: 2.1.1
-      react-dom:
-        specifier: '18'
-        version: 18.3.1(react@18.3.1)
-    devDependencies:
-      '@babel/plugin-transform-runtime':
-        specifier: 7.24.7
-        version: 7.24.7(@babel/core@7.24.7)
-      '@babel/preset-env':
-        specifier: 7.24.7
-        version: 7.24.7(@babel/core@7.24.7)
-      '@babel/preset-react':
-        specifier: 7.24.7
-        version: 7.24.7(@babel/core@7.24.7)
-      '@babel/preset-typescript':
-        specifier: 7.24.7
-        version: 7.24.7(@babel/core@7.24.7)
-      '@rollup/plugin-babel':
-        specifier: 6.0.4
-        version: 6.0.4(@babel/core@7.24.7)(@types/babel__core@7.20.5)(rollup@4.23.0)
-      '@rollup/plugin-commonjs':
-        specifier: 26.0.1
-        version: 26.0.1(rollup@4.23.0)
-      '@rollup/plugin-json':
-        specifier: 6.1.0
-        version: 6.1.0(rollup@4.23.0)
-      '@rollup/plugin-node-resolve':
-        specifier: 15.2.3
-        version: 15.2.3(rollup@4.23.0)
-      '@rollup/plugin-typescript':
-        specifier: 12.1.0
-        version: 12.1.0(rollup@4.23.0)(tslib@2.6.2)(typescript@5.6.2)
-      '@testing-library/dom':
-        specifier: 8.20.1
-        version: 8.20.1
-      '@testing-library/jest-dom':
-        specifier: 6.5.0
-        version: 6.5.0
-      '@testing-library/react':
-        specifier: 16.0.1
-        version: 16.0.1(@testing-library/dom@8.20.1)(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@testing-library/user-event':
-        specifier: 14.5.1
-        version: 14.5.1(@testing-library/dom@8.20.1)
-      '@types/jest':
-        specifier: 29.5.13
-        version: 29.5.13
-      '@types/react':
-        specifier: 18.3.3
-        version: 18.3.3
-      '@types/testing-library__jest-dom':
-        specifier: 5.14.9
-        version: 5.14.9
-      '@utrecht/form-label-css':
+      jest:
+        specifier: 29.7.0
+        version: 29.7.0(@types/node@22.7.4)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.100(@swc/helpers@0.5.5))(@types/node@22.7.4)(typescript@5.6.2))
+      jest-environment-jsdom:
+        specifier: 29.7.0
+        version: 29.7.0
+      react:
+        specifier: 18.3.1
+        version: 18.3.1
+      rollup:
+        specifier: 4.23.0
+        version: 4.23.0
+      rollup-plugin-filesize:
+        specifier: 10.0.0
+        version: 10.0.0
+      rollup-plugin-node-externals:
+        specifier: 7.1.2
+        version: 7.1.2(rollup@4.23.0)
+      rollup-plugin-peer-deps-external:
+        specifier: 2.2.4
+        version: 2.2.4(rollup@4.23.0)
+      rollup-plugin-postcss:
+        specifier: 4.0.2
+        version: 4.0.2(postcss@8.4.38)(ts-node@10.9.1(@swc/core@1.3.100(@swc/helpers@0.5.5))(@types/node@22.7.4)(typescript@5.6.2))
+      typescript:
+        specifier: 5.6.2
+        version: 5.6.2
+
+  packages/components-react/form-label-react:
+    dependencies:
+      '@babel/runtime':
+        specifier: '*'
+        version: 7.24.7
+      clsx:
+        specifier: 2.1.1
+        version: 2.1.1
+      react-dom:
+        specifier: '18'
+        version: 18.3.1(react@18.3.1)
+    devDependencies:
+      '@babel/plugin-transform-runtime':
+        specifier: 7.24.7
+        version: 7.24.7(@babel/core@7.24.7)
+      '@babel/preset-env':
+        specifier: 7.24.7
+        version: 7.24.7(@babel/core@7.24.7)
+      '@babel/preset-react':
+        specifier: 7.24.7
+        version: 7.24.7(@babel/core@7.24.7)
+      '@babel/preset-typescript':
+        specifier: 7.24.7
+        version: 7.24.7(@babel/core@7.24.7)
+      '@rollup/plugin-babel':
+        specifier: 6.0.4
+        version: 6.0.4(@babel/core@7.24.7)(@types/babel__core@7.20.5)(rollup@4.23.0)
+      '@rollup/plugin-commonjs':
+        specifier: 26.0.1
+        version: 26.0.1(rollup@4.23.0)
+      '@rollup/plugin-json':
+        specifier: 6.1.0
+        version: 6.1.0(rollup@4.23.0)
+      '@rollup/plugin-node-resolve':
+        specifier: 15.2.3
+        version: 15.2.3(rollup@4.23.0)
+      '@rollup/plugin-typescript':
+        specifier: 12.1.0
+        version: 12.1.0(rollup@4.23.0)(tslib@2.6.2)(typescript@5.6.2)
+      '@testing-library/dom':
+        specifier: 8.20.1
+        version: 8.20.1
+      '@testing-library/jest-dom':
+        specifier: 6.5.0
+        version: 6.5.0
+      '@testing-library/react':
+        specifier: 16.0.1
+        version: 16.0.1(@testing-library/dom@8.20.1)(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@testing-library/user-event':
+        specifier: 14.5.1
+        version: 14.5.1(@testing-library/dom@8.20.1)
+      '@types/jest':
+        specifier: 29.5.13
+        version: 29.5.13
+      '@types/react':
+        specifier: 18.3.3
+        version: 18.3.3
+      '@types/testing-library__jest-dom':
+        specifier: 5.14.9
+        version: 5.14.9
+      '@utrecht/form-label-css':
+        specifier: workspace:*
+        version: link:../../../components/form-label
+      jest:
+        specifier: 29.7.0
+        version: 29.7.0(@types/node@22.7.4)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.100(@swc/helpers@0.5.5))(@types/node@22.7.4)(typescript@5.6.2))
+      jest-environment-jsdom:
+        specifier: 29.7.0
+        version: 29.7.0
+      react:
+        specifier: 18.3.1
+        version: 18.3.1
+      rollup:
+        specifier: 4.23.0
+        version: 4.23.0
+      rollup-plugin-filesize:
+        specifier: 10.0.0
+        version: 10.0.0
+      rollup-plugin-node-externals:
+        specifier: 7.1.2
+        version: 7.1.2(rollup@4.23.0)
+      rollup-plugin-peer-deps-external:
+        specifier: 2.2.4
+        version: 2.2.4(rollup@4.23.0)
+      rollup-plugin-postcss:
+        specifier: 4.0.2
+        version: 4.0.2(postcss@8.4.38)(ts-node@10.9.1(@swc/core@1.3.100(@swc/helpers@0.5.5))(@types/node@22.7.4)(typescript@5.6.2))
+      typescript:
+        specifier: 5.6.2
+        version: 5.6.2
+
+  packages/components-react/listbox-react:
+    dependencies:
+      '@babel/runtime':
+        specifier: '*'
+        version: 7.24.7
+      clsx:
+        specifier: 2.1.1
+        version: 2.1.1
+      react-dom:
+        specifier: '18'
+        version: 18.3.1(react@18.3.1)
+    devDependencies:
+      '@babel/plugin-transform-runtime':
+        specifier: 7.24.7
+        version: 7.24.7(@babel/core@7.24.7)
+      '@babel/preset-env':
+        specifier: 7.24.7
+        version: 7.24.7(@babel/core@7.24.7)
+      '@babel/preset-react':
+        specifier: 7.24.7
+        version: 7.24.7(@babel/core@7.24.7)
+      '@babel/preset-typescript':
+        specifier: 7.24.7
+        version: 7.24.7(@babel/core@7.24.7)
+      '@rollup/plugin-babel':
+        specifier: 6.0.4
+        version: 6.0.4(@babel/core@7.24.7)(@types/babel__core@7.20.5)(rollup@4.23.0)
+      '@rollup/plugin-commonjs':
+        specifier: 26.0.1
+        version: 26.0.1(rollup@4.23.0)
+      '@rollup/plugin-json':
+        specifier: 6.1.0
+        version: 6.1.0(rollup@4.23.0)
+      '@rollup/plugin-node-resolve':
+        specifier: 15.2.3
+        version: 15.2.3(rollup@4.23.0)
+      '@rollup/plugin-typescript':
+        specifier: 12.1.0
+        version: 12.1.0(rollup@4.23.0)(tslib@2.6.2)(typescript@5.6.2)
+      '@testing-library/dom':
+        specifier: 8.20.1
+        version: 8.20.1
+      '@testing-library/jest-dom':
+        specifier: 6.5.0
+        version: 6.5.0
+      '@testing-library/react':
+        specifier: 16.0.1
+        version: 16.0.1(@testing-library/dom@8.20.1)(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@testing-library/user-event':
+        specifier: 14.5.1
+        version: 14.5.1(@testing-library/dom@8.20.1)
+      '@types/jest':
+        specifier: 29.5.13
+        version: 29.5.13
+      '@types/react':
+        specifier: 18.3.3
+        version: 18.3.3
+      '@types/testing-library__jest-dom':
+        specifier: 5.14.9
+        version: 5.14.9
+      '@utrecht/listbox-css':
+        specifier: workspace:*
+        version: link:../../../components/listbox
+      jest:
+        specifier: 29.7.0
+        version: 29.7.0(@types/node@22.7.4)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.100(@swc/helpers@0.5.5))(@types/node@22.7.4)(typescript@5.6.2))
+      jest-environment-jsdom:
+        specifier: 29.7.0
+        version: 29.7.0
+      react:
+        specifier: 18.3.1
+        version: 18.3.1
+      rollup:
+        specifier: 4.23.0
+        version: 4.23.0
+      rollup-plugin-filesize:
+        specifier: 10.0.0
+        version: 10.0.0
+      rollup-plugin-node-externals:
+        specifier: 7.1.2
+        version: 7.1.2(rollup@4.23.0)
+      rollup-plugin-peer-deps-external:
+        specifier: 2.2.4
+        version: 2.2.4(rollup@4.23.0)
+      rollup-plugin-postcss:
+        specifier: 4.0.2
+        version: 4.0.2(postcss@8.4.38)(ts-node@10.9.1(@swc/core@1.3.100(@swc/helpers@0.5.5))(@types/node@22.7.4)(typescript@5.6.2))
+      typescript:
+        specifier: 5.6.2
+        version: 5.6.2
+
+  packages/components-react/radio-button-react:
+    dependencies:
+      '@babel/runtime':
+        specifier: '*'
+        version: 7.24.7
+      clsx:
+        specifier: 2.1.1
+        version: 2.1.1
+      react-dom:
+        specifier: '18'
+        version: 18.3.1(react@18.3.1)
+    devDependencies:
+      '@babel/plugin-transform-runtime':
+        specifier: 7.24.7
+        version: 7.24.7(@babel/core@7.24.7)
+      '@babel/preset-env':
+        specifier: 7.24.7
+        version: 7.24.7(@babel/core@7.24.7)
+      '@babel/preset-react':
+        specifier: 7.24.7
+        version: 7.24.7(@babel/core@7.24.7)
+      '@babel/preset-typescript':
+        specifier: 7.24.7
+        version: 7.24.7(@babel/core@7.24.7)
+      '@rollup/plugin-babel':
+        specifier: 6.0.4
+        version: 6.0.4(@babel/core@7.24.7)(@types/babel__core@7.20.5)(rollup@4.23.0)
+      '@rollup/plugin-commonjs':
+        specifier: 26.0.1
+        version: 26.0.1(rollup@4.23.0)
+      '@rollup/plugin-json':
+        specifier: 6.1.0
+        version: 6.1.0(rollup@4.23.0)
+      '@rollup/plugin-node-resolve':
+        specifier: 15.2.3
+        version: 15.2.3(rollup@4.23.0)
+      '@rollup/plugin-typescript':
+        specifier: 12.1.0
+        version: 12.1.0(rollup@4.23.0)(tslib@2.6.2)(typescript@5.6.2)
+      '@testing-library/dom':
+        specifier: 8.20.1
+        version: 8.20.1
+      '@testing-library/jest-dom':
+        specifier: 6.5.0
+        version: 6.5.0
+      '@testing-library/react':
+        specifier: 16.0.1
+        version: 16.0.1(@testing-library/dom@8.20.1)(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@testing-library/user-event':
+        specifier: 14.5.1
+        version: 14.5.1(@testing-library/dom@8.20.1)
+      '@types/jest':
+        specifier: 29.5.13
+        version: 29.5.13
+      '@types/react':
+        specifier: 18.3.3
+        version: 18.3.3
+      '@types/testing-library__jest-dom':
+        specifier: 5.14.9
+        version: 5.14.9
+      '@utrecht/radio-button-css':
+        specifier: workspace:*
+        version: link:../../../components/radio-button
+      jest:
+        specifier: 29.7.0
+        version: 29.7.0(@types/node@22.7.4)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.100(@swc/helpers@0.5.5))(@types/node@22.7.4)(typescript@5.6.2))
+      jest-environment-jsdom:
+        specifier: 29.7.0
+        version: 29.7.0
+      react:
+        specifier: 18.3.1
+        version: 18.3.1
+      rollup:
+        specifier: 4.23.0
+        version: 4.23.0
+      rollup-plugin-filesize:
+        specifier: 10.0.0
+        version: 10.0.0
+      rollup-plugin-node-externals:
+        specifier: 7.1.2
+        version: 7.1.2(rollup@4.23.0)
+      rollup-plugin-peer-deps-external:
+        specifier: 2.2.4
+        version: 2.2.4(rollup@4.23.0)
+      rollup-plugin-postcss:
+        specifier: 4.0.2
+        version: 4.0.2(postcss@8.4.38)(ts-node@10.9.1(@swc/core@1.3.100(@swc/helpers@0.5.5))(@types/node@22.7.4)(typescript@5.6.2))
+      typescript:
+        specifier: 5.6.2
+        version: 5.6.2
+
+  packages/components-react/radio-group-react:
+    dependencies:
+      '@babel/runtime':
+        specifier: '*'
+        version: 7.24.7
+      clsx:
+        specifier: 2.1.1
+        version: 2.1.1
+      react-dom:
+        specifier: '18'
+        version: 18.3.1(react@18.3.1)
+    devDependencies:
+      '@babel/plugin-transform-runtime':
+        specifier: 7.24.7
+        version: 7.24.7(@babel/core@7.24.7)
+      '@babel/preset-env':
+        specifier: 7.24.7
+        version: 7.24.7(@babel/core@7.24.7)
+      '@babel/preset-react':
+        specifier: 7.24.7
+        version: 7.24.7(@babel/core@7.24.7)
+      '@babel/preset-typescript':
+        specifier: 7.24.7
+        version: 7.24.7(@babel/core@7.24.7)
+      '@rollup/plugin-babel':
+        specifier: 6.0.4
+        version: 6.0.4(@babel/core@7.24.7)(@types/babel__core@7.20.5)(rollup@4.23.0)
+      '@rollup/plugin-commonjs':
+        specifier: 26.0.1
+        version: 26.0.1(rollup@4.23.0)
+      '@rollup/plugin-json':
+        specifier: 6.1.0
+        version: 6.1.0(rollup@4.23.0)
+      '@rollup/plugin-node-resolve':
+        specifier: 15.2.3
+        version: 15.2.3(rollup@4.23.0)
+      '@rollup/plugin-typescript':
+        specifier: 12.1.0
+        version: 12.1.0(rollup@4.23.0)(tslib@2.6.2)(typescript@5.6.2)
+      '@testing-library/dom':
+        specifier: 8.20.1
+        version: 8.20.1
+      '@testing-library/jest-dom':
+        specifier: 6.5.0
+        version: 6.5.0
+      '@testing-library/react':
+        specifier: 16.0.1
+        version: 16.0.1(@testing-library/dom@8.20.1)(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@testing-library/user-event':
+        specifier: 14.5.1
+        version: 14.5.1(@testing-library/dom@8.20.1)
+      '@types/jest':
+        specifier: 29.5.13
+        version: 29.5.13
+      '@types/react':
+        specifier: 18.3.3
+        version: 18.3.3
+      '@types/testing-library__jest-dom':
+        specifier: 5.14.9
+        version: 5.14.9
+      '@utrecht/fieldset-react':
+        specifier: workspace:*
+        version: link:../fieldset-react
+      '@utrecht/form-field-css':
+        specifier: workspace:*
+        version: link:../../../components/form-field
+      '@utrecht/form-field-description-react':
         specifier: workspace:*
-        version: link:../../../components/form-label
-      jest:
-        specifier: 29.7.0
-        version: 29.7.0(@types/node@22.7.4)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.100(@swc/helpers@0.5.5))(@types/node@22.7.4)(typescript@5.6.2))
-      jest-environment-jsdom:
-        specifier: 29.7.0
-        version: 29.7.0
-      react:
-        specifier: 18.3.1
-        version: 18.3.1
-      rollup:
-        specifier: 4.23.0
-        version: 4.23.0
-      rollup-plugin-filesize:
-        specifier: 10.0.0
-        version: 10.0.0
-      rollup-plugin-node-externals:
-        specifier: 7.1.2
-        version: 7.1.2(rollup@4.23.0)
-      rollup-plugin-peer-deps-external:
-        specifier: 2.2.4
-        version: 2.2.4(rollup@4.23.0)
-      rollup-plugin-postcss:
-        specifier: 4.0.2
-        version: 4.0.2(postcss@8.4.38)(ts-node@10.9.1(@swc/core@1.3.100(@swc/helpers@0.5.5))(@types/node@22.7.4)(typescript@5.6.2))
-      typescript:
-        specifier: 5.6.2
-        version: 5.6.2
-
-  packages/components-react/listbox-react:
-    dependencies:
-      '@babel/runtime':
-        specifier: '*'
-        version: 7.24.7
-      clsx:
-        specifier: 2.1.1
-        version: 2.1.1
-      react-dom:
-        specifier: '18'
-        version: 18.3.1(react@18.3.1)
-    devDependencies:
-      '@babel/plugin-transform-runtime':
-        specifier: 7.24.7
-        version: 7.24.7(@babel/core@7.24.7)
-      '@babel/preset-env':
-        specifier: 7.24.7
-        version: 7.24.7(@babel/core@7.24.7)
-      '@babel/preset-react':
-        specifier: 7.24.7
-        version: 7.24.7(@babel/core@7.24.7)
-      '@babel/preset-typescript':
-        specifier: 7.24.7
-        version: 7.24.7(@babel/core@7.24.7)
-      '@rollup/plugin-babel':
-        specifier: 6.0.4
-        version: 6.0.4(@babel/core@7.24.7)(@types/babel__core@7.20.5)(rollup@4.23.0)
-      '@rollup/plugin-commonjs':
-        specifier: 26.0.1
-        version: 26.0.1(rollup@4.23.0)
-      '@rollup/plugin-json':
-        specifier: 6.1.0
-        version: 6.1.0(rollup@4.23.0)
-      '@rollup/plugin-node-resolve':
-        specifier: 15.2.3
-        version: 15.2.3(rollup@4.23.0)
-      '@rollup/plugin-typescript':
-        specifier: 12.1.0
-        version: 12.1.0(rollup@4.23.0)(tslib@2.6.2)(typescript@5.6.2)
-      '@testing-library/dom':
-        specifier: 8.20.1
-        version: 8.20.1
-      '@testing-library/jest-dom':
-        specifier: 6.5.0
-        version: 6.5.0
-      '@testing-library/react':
-        specifier: 16.0.1
-        version: 16.0.1(@testing-library/dom@8.20.1)(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@testing-library/user-event':
-        specifier: 14.5.1
-        version: 14.5.1(@testing-library/dom@8.20.1)
-      '@types/jest':
-        specifier: 29.5.13
-        version: 29.5.13
-      '@types/react':
-        specifier: 18.3.3
-        version: 18.3.3
-      '@types/testing-library__jest-dom':
-        specifier: 5.14.9
-        version: 5.14.9
-      '@utrecht/listbox-css':
+        version: link:../form-field-description-react
+      '@utrecht/form-field-error-message-react':
         specifier: workspace:*
-        version: link:../../../components/listbox
+        version: link:../form-field-error-message-react
+      '@utrecht/form-field-react':
+        specifier: workspace:*
+        version: link:../form-field-react
+      '@utrecht/form-label-react':
+        specifier: workspace:*
+        version: link:../form-label-react
+      '@utrecht/radio-button-react':
+        specifier: workspace:*
+        version: link:../radio-button-react
       jest:
         specifier: 29.7.0
         version: 29.7.0(@types/node@22.7.4)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.100(@swc/helpers@0.5.5))(@types/node@22.7.4)(typescript@5.6.2))
@@ -4308,6 +5090,9 @@ importers:
       '@utrecht/checkbox-css':
         specifier: workspace:*
         version: link:../../components/checkbox
+      '@utrecht/checkbox-group-react':
+        specifier: workspace:*
+        version: link:../components-react/checkbox-group-react
       '@utrecht/code-block-css':
         specifier: workspace:*
         version: link:../../components/code-block
@@ -4467,6 +5252,9 @@ importers:
       '@utrecht/radio-button-css':
         specifier: workspace:*
         version: link:../../components/radio-button
+      '@utrecht/radio-group-react':
+        specifier: workspace:*
+        version: link:../components-react/radio-group-react
       '@utrecht/select-css':
         specifier: workspace:*
         version: link:../../components/select
@@ -22607,8 +23395,8 @@ packages:
   vue-component-type-helpers@1.8.25:
     resolution: {integrity: sha512-NCA6sekiJIMnMs4DdORxATXD+/NRkQpS32UC+I1KQJUasx+Z7MZUb3Y+MsKsFmX+PgyTYSteb73JW77AibaCCw==}
 
-  vue-component-type-helpers@2.1.6:
-    resolution: {integrity: sha512-ng11B8B/ZADUMMOsRbqv0arc442q7lifSubD0v8oDXIFoMg/mXwAPUunrroIDkY+mcD0dHKccdaznSVp8EoX3w==}
+  vue-component-type-helpers@2.1.10:
+    resolution: {integrity: sha512-lfgdSLQKrUmADiSV6PbBvYgQ33KF3Ztv6gP85MfGaGaSGMTXORVaHT1EHfsqCgzRNBstPKYDmvAV9Do5CmJ07A==}
 
   vue-docgen-api@4.75.1:
     resolution: {integrity: sha512-MECZ3uExz+ssmhD/2XrFoQQs93y17IVO1KDYTp8nr6i9GNrk67AAto6QAtilW1H/pTDPMkQxJ7w/25ZIqVtfAA==}
@@ -24562,6 +25350,12 @@ snapshots:
       '@babel/core': 7.20.12
       '@babel/helper-plugin-utils': 7.24.7
 
+  '@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.23.2)':
+    dependencies:
+      '@babel/core': 7.23.2
+      '@babel/helper-plugin-utils': 7.24.7
+    optional: true
+
   '@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.23.7)':
     dependencies:
       '@babel/core': 7.23.7
@@ -24572,6 +25366,12 @@ snapshots:
       '@babel/core': 7.24.7
       '@babel/helper-plugin-utils': 7.24.7
 
+  '@babel/plugin-syntax-bigint@7.8.3(@babel/core@7.23.2)':
+    dependencies:
+      '@babel/core': 7.23.2
+      '@babel/helper-plugin-utils': 7.24.7
+    optional: true
+
   '@babel/plugin-syntax-bigint@7.8.3(@babel/core@7.24.7)':
     dependencies:
       '@babel/core': 7.24.7
@@ -24582,6 +25382,12 @@ snapshots:
       '@babel/core': 7.20.12
       '@babel/helper-plugin-utils': 7.24.7
 
+  '@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.23.2)':
+    dependencies:
+      '@babel/core': 7.23.2
+      '@babel/helper-plugin-utils': 7.24.7
+    optional: true
+
   '@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.23.7)':
     dependencies:
       '@babel/core': 7.23.7
@@ -24672,6 +25478,12 @@ snapshots:
       '@babel/core': 7.24.7
       '@babel/helper-plugin-utils': 7.24.7
 
+  '@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.23.2)':
+    dependencies:
+      '@babel/core': 7.23.2
+      '@babel/helper-plugin-utils': 7.24.7
+    optional: true
+
   '@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.23.7)':
     dependencies:
       '@babel/core': 7.23.7
@@ -24687,6 +25499,12 @@ snapshots:
       '@babel/core': 7.20.12
       '@babel/helper-plugin-utils': 7.24.7
 
+  '@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.23.2)':
+    dependencies:
+      '@babel/core': 7.23.2
+      '@babel/helper-plugin-utils': 7.24.7
+    optional: true
+
   '@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.23.7)':
     dependencies:
       '@babel/core': 7.23.7
@@ -24707,6 +25525,12 @@ snapshots:
       '@babel/core': 7.20.12
       '@babel/helper-plugin-utils': 7.24.7
 
+  '@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.23.2)':
+    dependencies:
+      '@babel/core': 7.23.2
+      '@babel/helper-plugin-utils': 7.24.7
+    optional: true
+
   '@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.23.7)':
     dependencies:
       '@babel/core': 7.23.7
@@ -24722,6 +25546,12 @@ snapshots:
       '@babel/core': 7.20.12
       '@babel/helper-plugin-utils': 7.24.7
 
+  '@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.23.2)':
+    dependencies:
+      '@babel/core': 7.23.2
+      '@babel/helper-plugin-utils': 7.24.7
+    optional: true
+
   '@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.23.7)':
     dependencies:
       '@babel/core': 7.23.7
@@ -24737,6 +25567,12 @@ snapshots:
       '@babel/core': 7.20.12
       '@babel/helper-plugin-utils': 7.24.7
 
+  '@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.23.2)':
+    dependencies:
+      '@babel/core': 7.23.2
+      '@babel/helper-plugin-utils': 7.24.7
+    optional: true
+
   '@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.23.7)':
     dependencies:
       '@babel/core': 7.23.7
@@ -24752,6 +25588,12 @@ snapshots:
       '@babel/core': 7.20.12
       '@babel/helper-plugin-utils': 7.24.7
 
+  '@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.23.2)':
+    dependencies:
+      '@babel/core': 7.23.2
+      '@babel/helper-plugin-utils': 7.24.7
+    optional: true
+
   '@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.23.7)':
     dependencies:
       '@babel/core': 7.23.7
@@ -24767,6 +25609,12 @@ snapshots:
       '@babel/core': 7.20.12
       '@babel/helper-plugin-utils': 7.24.7
 
+  '@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.23.2)':
+    dependencies:
+      '@babel/core': 7.23.2
+      '@babel/helper-plugin-utils': 7.24.7
+    optional: true
+
   '@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.23.7)':
     dependencies:
       '@babel/core': 7.23.7
@@ -24782,6 +25630,12 @@ snapshots:
       '@babel/core': 7.20.12
       '@babel/helper-plugin-utils': 7.24.7
 
+  '@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.23.2)':
+    dependencies:
+      '@babel/core': 7.23.2
+      '@babel/helper-plugin-utils': 7.24.7
+    optional: true
+
   '@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.23.7)':
     dependencies:
       '@babel/core': 7.23.7
@@ -24812,6 +25666,12 @@ snapshots:
       '@babel/core': 7.20.12
       '@babel/helper-plugin-utils': 7.24.7
 
+  '@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.23.2)':
+    dependencies:
+      '@babel/core': 7.23.2
+      '@babel/helper-plugin-utils': 7.24.7
+    optional: true
+
   '@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.23.7)':
     dependencies:
       '@babel/core': 7.23.7
@@ -32707,7 +33567,7 @@ snapshots:
       ts-dedent: 2.2.0
       type-fest: 2.19.0
       vue: 3.3.11(typescript@4.9.5)
-      vue-component-type-helpers: 2.1.6
+      vue-component-type-helpers: 2.1.10
     transitivePeerDependencies:
       - encoding
       - supports-color
@@ -34619,6 +35479,20 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  babel-jest@29.7.0(@babel/core@7.23.2):
+    dependencies:
+      '@babel/core': 7.23.2
+      '@jest/transform': 29.7.0
+      '@types/babel__core': 7.20.5
+      babel-plugin-istanbul: 6.1.1
+      babel-preset-jest: 29.6.3(@babel/core@7.23.2)
+      chalk: 4.1.2
+      graceful-fs: 4.2.11
+      slash: 3.0.0
+    transitivePeerDependencies:
+      - supports-color
+    optional: true
+
   babel-jest@29.7.0(@babel/core@7.24.7):
     dependencies:
       '@babel/core': 7.24.7
@@ -34824,6 +35698,23 @@ snapshots:
       core-js: 2.6.12
       regenerator-runtime: 0.10.5
 
+  babel-preset-current-node-syntax@1.0.1(@babel/core@7.23.2):
+    dependencies:
+      '@babel/core': 7.23.2
+      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.23.2)
+      '@babel/plugin-syntax-bigint': 7.8.3(@babel/core@7.23.2)
+      '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.23.2)
+      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.23.2)
+      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.23.2)
+      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.23.2)
+      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.23.2)
+      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.23.2)
+      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.23.2)
+      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.23.2)
+      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.23.2)
+      '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.23.2)
+    optional: true
+
   babel-preset-current-node-syntax@1.0.1(@babel/core@7.24.7):
     dependencies:
       '@babel/core': 7.24.7
@@ -34895,6 +35786,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  babel-preset-jest@29.6.3(@babel/core@7.23.2):
+    dependencies:
+      '@babel/core': 7.23.2
+      babel-plugin-jest-hoist: 29.6.3
+      babel-preset-current-node-syntax: 1.0.1(@babel/core@7.23.2)
+    optional: true
+
   babel-preset-jest@29.6.3(@babel/core@7.24.7):
     dependencies:
       '@babel/core': 7.24.7
@@ -40886,7 +41784,7 @@ snapshots:
     optionalDependencies:
       jest-resolve: 29.7.0
 
-  jest-preset-angular@13.1.4(6b34yrqv6cw3yppjzvogcm4gq4):
+  jest-preset-angular@13.1.4(lclvuqcmfjqpf7yvsvwiyjlzae):
     dependencies:
       '@angular-devkit/build-angular': 17.1.0(@angular/compiler-cli@17.1.0(@angular/compiler@17.1.0(@angular/core@17.1.0(rxjs@7.8.1)(zone.js@0.14.3)))(typescript@5.3.3))(@swc/core@1.3.100(@swc/helpers@0.5.5))(@types/express@4.17.21)(@types/node@22.7.4)(chokidar@3.5.3)(html-webpack-plugin@5.5.4(webpack@5.89.0(@swc/core@1.3.100(@swc/helpers@0.5.5))))(jest-environment-jsdom@29.7.0)(jest@29.7.0(@types/node@22.7.4)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.100(@swc/helpers@0.5.5))(@types/node@22.7.4)(typescript@5.3.3)))(ng-packagr@17.0.3(@angular/compiler-cli@17.1.0(@angular/compiler@17.1.0(@angular/core@17.1.0(rxjs@7.8.1)(zone.js@0.14.3)))(typescript@5.3.3))(tslib@2.6.2)(typescript@5.3.3))(typescript@5.3.3)
       '@angular/compiler-cli': 17.1.0(@angular/compiler@17.1.0(@angular/core@17.1.0(rxjs@7.8.1)(zone.js@0.14.3)))(typescript@5.3.3)
@@ -40898,7 +41796,7 @@ snapshots:
       jest-environment-jsdom: 29.7.0
       jest-util: 29.7.0
       pretty-format: 29.7.0
-      ts-jest: 29.2.4(@babel/core@7.24.7)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.24.7))(esbuild@0.23.1)(jest@29.7.0(@types/node@22.7.4)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.100(@swc/helpers@0.5.5))(@types/node@22.7.4)(typescript@5.3.3)))(typescript@5.3.3)
+      ts-jest: 29.2.4(@babel/core@7.23.2)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.23.2))(esbuild@0.23.1)(jest@29.7.0(@types/node@22.7.4)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.100(@swc/helpers@0.5.5))(@types/node@22.7.4)(typescript@5.3.3)))(typescript@5.3.3)
       typescript: 5.3.3
     optionalDependencies:
       esbuild: 0.23.1
@@ -47806,7 +48704,7 @@ snapshots:
       '@jest/types': 29.6.3
       babel-jest: 29.7.0(@babel/core@7.24.7)
 
-  ts-jest@29.2.4(@babel/core@7.24.7)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.24.7))(esbuild@0.23.1)(jest@29.7.0(@types/node@22.7.4)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.100(@swc/helpers@0.5.5))(@types/node@22.7.4)(typescript@5.3.3)))(typescript@5.3.3):
+  ts-jest@29.2.4(@babel/core@7.23.2)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.23.2))(esbuild@0.23.1)(jest@29.7.0(@types/node@22.7.4)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.100(@swc/helpers@0.5.5))(@types/node@22.7.4)(typescript@5.3.3)))(typescript@5.3.3):
     dependencies:
       bs-logger: 0.2.6
       ejs: 3.1.10
@@ -47820,10 +48718,10 @@ snapshots:
       typescript: 5.3.3
       yargs-parser: 21.1.1
     optionalDependencies:
-      '@babel/core': 7.24.7
+      '@babel/core': 7.23.2
       '@jest/transform': 29.7.0
       '@jest/types': 29.6.3
-      babel-jest: 29.7.0(@babel/core@7.24.7)
+      babel-jest: 29.7.0(@babel/core@7.23.2)
       esbuild: 0.23.1
 
   ts-jest@29.2.4(@babel/core@7.24.7)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.24.7))(jest@29.7.0(@types/node@20.14.8)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.100(@swc/helpers@0.5.5))(@types/node@20.14.8)(typescript@5.5.4)))(typescript@5.5.4):
@@ -49029,7 +49927,7 @@ snapshots:
 
   vue-component-type-helpers@1.8.25: {}
 
-  vue-component-type-helpers@2.1.6: {}
+  vue-component-type-helpers@2.1.10: {}
 
   vue-docgen-api@4.75.1(vue@3.3.11(typescript@4.9.5)):
     dependencies: