refactor(components): rewrite form components

59 files changed, 846 insertions, 2969 deletions

diff --git a/src/components/molecules/forms/ackee-toggle.fixture.tsx b/src/components/molecules/forms/ackee-toggle.fixture.tsx
deleted file mode 100644
index 04602f2..0000000
--- a/src/components/molecules/forms/ackee-toggle.fixture.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export const storageKey = 'ackee';
diff --git a/src/components/molecules/forms/ackee-toggle.module.scss b/src/components/molecules/forms/ackee-toggle.module.scss
deleted file mode 100644
index f238bda..0000000
--- a/src/components/molecules/forms/ackee-toggle.module.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.wrapper {
-  display: flex;
-  flex-flow: row wrap;
-  align-items: center;
-  position: relative;
-}
diff --git a/src/components/molecules/forms/ackee-toggle.stories.tsx b/src/components/molecules/forms/ackee-toggle.stories.tsx
deleted file mode 100644
index 779f49d..0000000
--- a/src/components/molecules/forms/ackee-toggle.stories.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { AckeeToggle } from './ackee-toggle';
-import { storageKey } from './ackee-toggle.fixture';
-
-/**
- * AckeeToggle - Storybook Meta
- */
-export default {
-  title: 'Molecules/Forms/Toggle',
-  component: AckeeToggle,
-  argTypes: {
-    bodyClassName: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the fieldset body wrapper.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    buttonClassName: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the help button.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    className: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the toggle wrapper.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    defaultValue: {
-      control: {
-        type: 'select',
-      },
-      description: 'Set the default value.',
-      options: ['full', 'partial'],
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    groupClassName: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the radio group wrapper.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    legendClassName: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the legend.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    storageKey: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set local storage key.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    tooltipClassName: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the tooltip wrapper.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-  },
-} as ComponentMeta<typeof AckeeToggle>;
-
-const Template: ComponentStory<typeof AckeeToggle> = (args) => (
-  <AckeeToggle {...args} />
-);
-
-/**
- * Toggle Stories - Ackee
- */
-export const Ackee = Template.bind({});
-Ackee.args = {
-  defaultValue: 'full',
-  storageKey,
-};
diff --git a/src/components/molecules/forms/ackee-toggle.test.tsx b/src/components/molecules/forms/ackee-toggle.test.tsx
deleted file mode 100644
index 97ebbe5..0000000
--- a/src/components/molecules/forms/ackee-toggle.test.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { render, screen } from '../../../../tests/utils';
-import { AckeeToggle } from './ackee-toggle';
-import { storageKey } from './ackee-toggle.fixture';
-
-describe('AckeeToggle', () => {
-  // toHaveValue received undefined. Maybe because of localStorage hook...
-  it('renders a toggle component', () => {
-    render(<AckeeToggle storageKey={storageKey} defaultValue="full" />);
-    expect(
-      screen.getByRole('radiogroup', {
-        name: /Tracking:/i,
-      })
-    ).toBeInTheDocument();
-  });
-});
diff --git a/src/components/molecules/forms/ackee-toggle.tsx b/src/components/molecules/forms/ackee-toggle.tsx
deleted file mode 100644
index 32949b2..0000000
--- a/src/components/molecules/forms/ackee-toggle.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-import { FC } from 'react';
-import { useIntl } from 'react-intl';
-import {
-  type AckeeOptions,
-  useLocalStorage,
-  useUpdateAckeeOptions,
-} from '../../../utils/hooks';
-import {
-  RadioGroup,
-  type RadioGroupCallback,
-  type RadioGroupCallbackProps,
-  type RadioGroupOption,
-  type RadioGroupProps,
-} from './radio-group';
-import { Tooltip, type TooltipProps } from '../modals/tooltip';
-
-export type AckeeToggleProps = Pick<
-  RadioGroupProps,
-  | 'bodyClassName'
-  | 'buttonClassName'
-  | 'groupClassName'
-  | 'legendClassName'
-  | 'legendPosition'
-> & {
-  /**
-   * Set additional classnames to the toggle wrapper.
-   */
-  className?: string;
-  /**
-   * True if motion should be reduced by default.
-   */
-  defaultValue: AckeeOptions;
-  /**
-   * The local storage key to save preference.
-   */
-  storageKey: string;
-  /**
-   * Set additional classnames to the tooltip wrapper.
-   */
-  tooltipClassName?: TooltipProps['className'];
-};
-
-/**
- * AckeeToggle component
- *
- * Render a Toggle component to set reduce motion.
- */
-export const AckeeToggle: FC<AckeeToggleProps> = ({
-  defaultValue,
-  storageKey,
-  tooltipClassName,
-  ...props
-}) => {
-  const intl = useIntl();
-  const { value, setValue } = useLocalStorage<AckeeOptions>(
-    storageKey,
-    defaultValue
-  );
-  useUpdateAckeeOptions(value);
-
-  const ackeeLabel = intl.formatMessage({
-    defaultMessage: 'Tracking:',
-    description: 'AckeeToggle: select label',
-    id: '0gVlI3',
-  });
-  const tooltipTitle = intl.formatMessage({
-    defaultMessage: 'Ackee tracking (analytics)',
-    description: 'AckeeToggle: tooltip title',
-    id: 'nGss/j',
-  });
-  const tooltipContent = [
-    intl.formatMessage({
-      defaultMessage: 'Partial includes only page url, views and duration.',
-      description: 'AckeeToggle: tooltip message',
-      id: 'ZB/Aw2',
-    }),
-    intl.formatMessage({
-      defaultMessage:
-        'Full includes all information from partial as well as information about referrer, operating system, device, browser, screen size and language.',
-      description: 'AckeeToggle: tooltip message',
-      id: '7zDlQo',
-    }),
-  ];
-  const partialLabel = intl.formatMessage({
-    defaultMessage: 'Partial',
-    description: 'AckeeToggle: partial option name',
-    id: 'tIZYpD',
-  });
-  const fullLabel = intl.formatMessage({
-    defaultMessage: 'Full',
-    description: 'AckeeToggle: full option name',
-    id: '5eD6y2',
-  });
-
-  const options: RadioGroupOption[] = [
-    {
-      id: 'ackee-full',
-      label: fullLabel,
-      name: 'ackee',
-      value: 'full',
-    },
-    {
-      id: 'ackee-partial',
-      label: partialLabel,
-      name: 'ackee',
-      value: 'partial',
-    },
-  ];
-
-  /**
-   * Handle change events.
-   *
-   * @param {RadioGroupCallbackProps} props - An object with choices.
-   */
-  const handleChange: RadioGroupCallback = ({
-    choices,
-    updateChoice,
-  }: RadioGroupCallbackProps) => {
-    let newChoice: AckeeOptions = choices.new as AckeeOptions;
-
-    if (choices.new === choices.prev) {
-      newChoice = choices.new === 'full' ? 'partial' : 'full';
-      updateChoice(newChoice);
-    }
-
-    setValue(newChoice);
-  };
-
-  return (
-    <RadioGroup
-      {...props}
-      kind="toggle"
-      initialChoice={value}
-      legend={ackeeLabel}
-      onChange={handleChange}
-      options={options}
-      Tooltip={
-        <Tooltip
-          title={tooltipTitle}
-          content={tooltipContent}
-          icon="?"
-          className={tooltipClassName}
-        />
-      }
-    />
-  );
-};
diff --git a/src/components/molecules/forms/fieldset.fixture.tsx b/src/components/molecules/forms/fieldset.fixture.tsx
deleted file mode 100644
index b94f340..0000000
--- a/src/components/molecules/forms/fieldset.fixture.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { TooltipProps } from '../modals/tooltip';
-import { Help } from '../modals/tooltip.stories';
-
-export const body = 'doloribus magni aut';
-export const legend = 'maiores autem est';
-export const Tooltip = <Help {...(Help.args as TooltipProps)} />;
diff --git a/src/components/molecules/forms/fieldset.module.scss b/src/components/molecules/forms/fieldset.module.scss
deleted file mode 100644
index 38327b4..0000000
--- a/src/components/molecules/forms/fieldset.module.scss
+++ /dev/null
@@ -1,61 +0,0 @@
-.legend {
-  float: left;
-  color: var(--color-primary-darker);
-  font-size: var(--font-size-md);
-  font-weight: 600;
-
-  &#{&}--has-tooltip {
-    margin: 0 var(--spacing-2xs) 0 0;
-  }
-}
-
-.btn {
-  margin: 0 var(--spacing-xs) var(--spacing-2xs) 0;
-
-  &--activated {
-    background: var(--color-primary);
-
-    * {
-      color: var(--color-fg-inverted);
-    }
-  }
-}
-
-.tooltip {
-  top: calc(100% + var(--spacing-xs));
-  transform-origin: top;
-  transition: all 0.75s ease-in-out 0s;
-
-  &--hidden {
-    flex: 0 0 0;
-    opacity: 0;
-    visibility: hidden;
-    transform: scale(0);
-  }
-
-  &--visible {
-    opacity: 1;
-    visibility: visible;
-    transform: scale(1);
-  }
-}
-
-.wrapper {
-  display: flex;
-  flex-flow: row wrap;
-  align-items: center;
-  max-width: 100%;
-  padding: 0;
-  position: relative;
-  border: none;
-
-  &--stacked {
-    .body {
-      flex: 1 0 100%;
-    }
-  }
-
-  .tooltip {
-    position: absolute;
-  }
-}
diff --git a/src/components/molecules/forms/fieldset.stories.tsx b/src/components/molecules/forms/fieldset.stories.tsx
deleted file mode 100644
index d53a21a..0000000
--- a/src/components/molecules/forms/fieldset.stories.tsx
+++ /dev/null
@@ -1,176 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Fieldset as FieldsetComponent } from './fieldset';
-import { body, legend, Tooltip } from './fieldset.fixture';
-
-/**
- * Fieldset - Storybook Meta
- */
-export default {
-  title: 'Molecules/Forms/Fieldset',
-  component: FieldsetComponent,
-  args: {
-    legendPosition: 'stacked',
-    role: 'group',
-  },
-  argTypes: {
-    bodyClassName: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the body wrapper.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    buttonClassName: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the help button.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    children: {
-      control: {
-        type: null,
-      },
-      description: 'The fieldset body.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    className: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the fieldset.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    legend: {
-      control: {
-        type: 'text',
-      },
-      description: 'The fieldset legend.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    legendClassName: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the legend.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    legendPosition: {
-      control: {
-        type: 'select',
-      },
-      description: 'Determine the legend position.',
-      options: ['inline', 'stacked'],
-      table: {
-        category: 'Options',
-        defaultValue: { summary: 'inline' },
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    role: {
-      control: {
-        type: 'select',
-      },
-      description: 'An accessible role.',
-      table: {
-        category: 'Accessibility',
-        defaultValue: { summary: 'group' },
-      },
-      options: ['group', 'radiogroup', 'presentation', 'none'],
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    Tooltip: {
-      control: {
-        type: null,
-      },
-      description: 'Add an optional tooltip.',
-      table: {
-        category: 'Options',
-      },
-      type: {
-        name: 'function',
-        required: false,
-      },
-    },
-  },
-} as ComponentMeta<typeof FieldsetComponent>;
-
-const Template: ComponentStory<typeof FieldsetComponent> = (args) => (
-  <FieldsetComponent {...args} />
-);
-
-/**
- * Fieldset Stories - Stacked legend
- */
-export const StackedLegend = Template.bind({});
-StackedLegend.args = {
-  children: body,
-  legend: legend,
-};
-
-/**
- * Fieldset Stories - Inlined legend
- */
-export const InlinedLegend = Template.bind({});
-InlinedLegend.args = {
-  children: body,
-  legend: legend,
-  legendPosition: 'inline',
-};
-
-/**
- * Fieldset Stories - Stacked legend with tooltip
- */
-export const StackedLegendWithTooltip = Template.bind({});
-StackedLegendWithTooltip.args = {
-  children: body,
-  legend: legend,
-  Tooltip,
-};
-
-/**
- * Fieldset Stories - Inlined legend with tooltip
- */
-export const InlinedLegendWithTooltip = Template.bind({});
-InlinedLegendWithTooltip.args = {
-  children: body,
-  legend: legend,
-  legendPosition: 'inline',
-  Tooltip,
-};
diff --git a/src/components/molecules/forms/fieldset.test.tsx b/src/components/molecules/forms/fieldset.test.tsx
deleted file mode 100644
index f397bcd..0000000
--- a/src/components/molecules/forms/fieldset.test.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { render, screen } from '../../../../tests/utils';
-import { Fieldset } from './fieldset';
-import { body, legend, Tooltip } from './fieldset.fixture';
-
-describe('Fieldset', () => {
-  // Cannot use toBeInTheDocument because of body is not an HTMLElement.
-
-  it('renders a legend and a body', () => {
-    render(<Fieldset legend={legend}>{body}</Fieldset>);
-    expect(screen.findByRole('group', { name: legend })).toBeTruthy();
-    expect(screen.findByText(body)).toBeTruthy();
-  });
-
-  it('renders a button to open a tooltip', () => {
-    render(
-      <Fieldset legend={legend} Tooltip={Tooltip}>
-        {body}
-      </Fieldset>
-    );
-    expect(screen.findByRole('button', { name: /Help/i })).toBeTruthy();
-  });
-});
diff --git a/src/components/molecules/forms/fieldset.tsx b/src/components/molecules/forms/fieldset.tsx
deleted file mode 100644
index 7564d14..0000000
--- a/src/components/molecules/forms/fieldset.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import {
-  cloneElement,
-  FC,
-  ReactComponentElement,
-  ReactNode,
-  useRef,
-  useState,
-} from 'react';
-import { useOnClickOutside } from '../../../utils/hooks';
-import { HelpButton } from '../buttons';
-import { Tooltip } from '../modals';
-import styles from './fieldset.module.scss';
-
-export type FieldsetProps = {
-  /**
-   * Set additional classnames to the body wrapper.
-   */
-  bodyClassName?: string;
-  /**
-   * Set additional classnames to the help button.
-   */
-  buttonClassName?: string;
-  /**
-   * The fieldset body.
-   */
-  children: ReactNode | ReactNode[];
-  /**
-   * Set additional classnames to the fieldset wrapper.
-   */
-  className?: string;
-  /**
-   * The fieldset legend.
-   */
-  legend: string;
-  /**
-   * Set additional classnames to the legend.
-   */
-  legendClassName?: string;
-  /**
-   * The legend position.
-   *
-   * @default 'stacked'
-   */
-  legendPosition?: 'inline' | 'stacked';
-  /**
-   * An accessible role.
-   *
-   * @default 'group'
-   */
-  role?: 'group' | 'radiogroup' | 'presentation' | 'none';
-  /**
-   * An optional tooltip component.
-   */
-  Tooltip?: ReactComponentElement<typeof Tooltip>;
-};
-
-/**
- * Fieldset component
- *
- * Render a fieldset with a legend.
- */
-export const Fieldset: FC<FieldsetProps> = ({
-  bodyClassName = '',
-  buttonClassName = '',
-  children,
-  className = '',
-  legend,
-  legendClassName = '',
-  legendPosition = 'stacked',
-  Tooltip: TooltipComponent,
-  ...props
-}) => {
-  const [isTooltipOpened, setIsTooltipOpened] = useState<boolean>(false);
-  const buttonRef = useRef<HTMLButtonElement>(null);
-  const wrapperModifier = `wrapper--${legendPosition}`;
-  const buttonModifier = isTooltipOpened ? styles['btn--activated'] : '';
-  const legendModifier =
-    TooltipComponent === undefined ? '' : 'legend--has-tooltip';
-  const tooltipModifier = isTooltipOpened
-    ? 'tooltip--visible'
-    : 'tooltip--hidden';
-
-  /**
-   * Close the tooltip if the target is not the button.
-   *
-   * @param {Node} target - The event target.
-   */
-  const closeTooltip = (target: Node) => {
-    if (buttonRef.current && !buttonRef.current.contains(target)) {
-      setIsTooltipOpened(false);
-    }
-  };
-
-  const tooltipRef = useOnClickOutside<HTMLDivElement>(closeTooltip);
-  const fieldsetClass = `${styles.wrapper} ${styles[wrapperModifier]} ${className}`;
-  const legendClass = `${styles.legend} ${styles[legendModifier]} ${legendClassName}`;
-
-  return (
-    <fieldset {...props} className={fieldsetClass}>
-      <legend className={legendClass}>{legend}</legend>
-      {TooltipComponent && (
-        <>
-          <HelpButton
-            aria-pressed={isTooltipOpened}
-            className={`${styles.btn} ${buttonModifier} ${buttonClassName}`}
-            onClick={() => setIsTooltipOpened(!isTooltipOpened)}
-            ref={buttonRef}
-          />
-          {cloneElement(TooltipComponent, {
-            cloneClassName: `${styles.tooltip} ${styles[tooltipModifier]}`,
-            ref: tooltipRef,
-          })}
-        </>
-      )}
-      <div className={`${styles.body} ${bodyClassName}`}>{children}</div>
-    </fieldset>
-  );
-};
diff --git a/src/components/molecules/forms/flipping-label.module.scss b/src/components/molecules/forms/flipping-label/flipping-label.module.scss
index b0452fe..88ef3ec 100644
--- a/src/components/molecules/forms/flipping-label.module.scss
+++ b/src/components/molecules/forms/flipping-label/flipping-label.module.scss
@@ -1,4 +1,4 @@
-@use "../../../styles/abstracts/functions" as fun;
+@use "../../../../styles/abstracts/functions" as fun;
 
 .label {
   display: block;
diff --git a/src/components/molecules/forms/flipping-label.stories.tsx b/src/components/molecules/forms/flipping-label/flipping-label.stories.tsx
index 7dad3cb..3ad3529 100644
--- a/src/components/molecules/forms/flipping-label.stories.tsx
+++ b/src/components/molecules/forms/flipping-label/flipping-label.stories.tsx
@@ -1,10 +1,10 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { useState } from 'react';
-import { MagnifyingGlass } from '../../atoms';
+import { MagnifyingGlass } from '../../../atoms';
 import { FlippingLabel } from './flipping-label';
 
 export default {
-  title: 'Organisms/Forms/FlippingLabel',
+  title: 'Molecules/Forms/FlippingLabel',
   component: FlippingLabel,
   argTypes: {
     'aria-label': {
diff --git a/src/components/molecules/forms/flipping-label.test.tsx b/src/components/molecules/forms/flipping-label/flipping-label.test.tsx
index 0f5dd30..7813855 100644
--- a/src/components/molecules/forms/flipping-label.test.tsx
+++ b/src/components/molecules/forms/flipping-label/flipping-label.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '../../../../tests/utils';
+import { render, screen } from '../../../../../tests/utils';
 import { FlippingLabel } from './flipping-label';
 
 describe('FlippingLabel', () => {
diff --git a/src/components/molecules/forms/flipping-label.tsx b/src/components/molecules/forms/flipping-label/flipping-label.tsx
index c85642b..3e23915 100644
--- a/src/components/molecules/forms/flipping-label.tsx
+++ b/src/components/molecules/forms/flipping-label/flipping-label.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { Close, Label, type LabelProps } from '../../atoms';
+import { Close, Label, type LabelProps } from '../../../atoms';
 import styles from './flipping-label.module.scss';
 
 export type FlippingLabelProps = Pick<
diff --git a/src/components/molecules/forms/flipping-label/index.ts b/src/components/molecules/forms/flipping-label/index.ts
new file mode 100644
index 0000000..7b50c75
--- /dev/null
+++ b/src/components/molecules/forms/flipping-label/index.ts
@@ -0,0 +1 @@
+export * from './flipping-label';
diff --git a/src/components/molecules/forms/index.ts b/src/components/molecules/forms/index.ts
index 4d0497d..883a033 100644
--- a/src/components/molecules/forms/index.ts
+++ b/src/components/molecules/forms/index.ts
@@ -1,10 +1,4 @@
-export * from './ackee-toggle';
-export * from './fieldset';
 export * from './flipping-label';
-export * from './labelled-boolean-field';
 export * from './labelled-field';
-export * from './labelled-select';
-export * from './motion-toggle';
-export * from './prism-theme-toggle';
 export * from './radio-group';
-export * from './theme-toggle';
+export * from './switch';
diff --git a/src/components/molecules/forms/labelled-boolean-field.fixture.tsx b/src/components/molecules/forms/labelled-boolean-field.fixture.tsx
deleted file mode 100644
index 6b06887..0000000
--- a/src/components/molecules/forms/labelled-boolean-field.fixture.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export const label = 'Quas et natus';
diff --git a/src/components/molecules/forms/labelled-boolean-field.module.scss b/src/components/molecules/forms/labelled-boolean-field.module.scss
deleted file mode 100644
index 10a9eb2..0000000
--- a/src/components/molecules/forms/labelled-boolean-field.module.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-.label {
-  &--visible#{&}--left {
-    margin-right: var(--spacing-2xs);
-  }
-
-  &--visible#{&}--right {
-    margin-left: var(--spacing-2xs);
-  }
-}
-
-.wrapper {
-  display: inline-flex;
-  flex-flow: row wrap;
-  align-items: center;
-}
diff --git a/src/components/molecules/forms/labelled-boolean-field.stories.tsx b/src/components/molecules/forms/labelled-boolean-field.stories.tsx
deleted file mode 100644
index b1f8194..0000000
--- a/src/components/molecules/forms/labelled-boolean-field.stories.tsx
+++ /dev/null
@@ -1,254 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { useState } from 'react';
-import { LabelledBooleanField } from './labelled-boolean-field';
-import { label } from './labelled-boolean-field.fixture';
-
-/**
- * LabelledBooleanField - Storybook Meta
- */
-export default {
-  title: 'Molecules/Forms/Boolean',
-  component: LabelledBooleanField,
-  args: {
-    checked: false,
-    hidden: false,
-    label,
-    labelSize: 'small',
-  },
-  argTypes: {
-    checked: {
-      control: {
-        type: null,
-      },
-      description: 'Should the option be checked?',
-      type: {
-        name: 'boolean',
-        required: true,
-      },
-    },
-    className: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the labelled field wrapper.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    fieldClassName: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the field.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    hidden: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Define if the field should be visually hidden.',
-      table: {
-        category: 'Options',
-        defaultValue: { summary: false },
-      },
-      type: {
-        name: 'boolean',
-        required: false,
-      },
-    },
-    id: {
-      control: {
-        type: 'text',
-      },
-      description: 'The option id.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    label: {
-      control: {
-        type: 'text',
-      },
-      description: 'The radio label.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    labelClassName: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the label.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    labelPosition: {
-      control: {
-        type: 'select',
-      },
-      description: 'Determine the label position.',
-      options: ['left', 'right'],
-      table: {
-        category: 'Options',
-        defaultValue: { summary: 'left' },
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    labelSize: {
-      control: {
-        type: 'select',
-      },
-      description: 'The label size.',
-      options: ['medium', 'small'],
-      table: {
-        category: 'Options',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    name: {
-      control: {
-        type: 'text',
-      },
-      description: 'The field name.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    onChange: {
-      control: {
-        type: null,
-      },
-      description: 'A callback function to handle field state change.',
-      table: {
-        category: 'Events',
-      },
-      type: {
-        name: 'function',
-        required: true,
-      },
-    },
-    onClick: {
-      control: {
-        type: null,
-      },
-      description: 'A callback function to handle click on field.',
-      table: {
-        category: 'Events',
-      },
-      type: {
-        name: 'function',
-        required: false,
-      },
-    },
-    type: {
-      control: {
-        type: 'select',
-      },
-      description: 'The field type. Either checkbox or radio.',
-      options: ['checkbox', 'radio'],
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    value: {
-      control: {
-        type: 'text',
-      },
-      description: 'The field value.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-  },
-} as ComponentMeta<typeof LabelledBooleanField>;
-
-const Template: ComponentStory<typeof LabelledBooleanField> = ({
-  checked,
-  onChange: _onChange,
-  ...args
-}) => {
-  const [isChecked, setIsChecked] = useState<boolean>(checked);
-
-  return (
-    <LabelledBooleanField
-      checked={isChecked}
-      onChange={() => {
-        setIsChecked(!isChecked);
-      }}
-      {...args}
-    />
-  );
-};
-
-/**
- * Labelled Boolean Field Stories - Checkbox with left label
- */
-export const CheckboxLeftLabel = Template.bind({});
-CheckboxLeftLabel.args = {
-  id: 'checkbox',
-  labelPosition: 'left',
-  name: 'checkbox-left-label',
-  type: 'checkbox',
-  value: 'checkbox',
-};
-
-/**
- * Labelled Boolean Field Stories - Checkbox with right label
- */
-export const CheckboxRightLabel = Template.bind({});
-CheckboxRightLabel.args = {
-  id: 'checkbox',
-  labelPosition: 'right',
-  name: 'checkbox-right-label',
-  type: 'checkbox',
-};
-
-/**
- * Labelled Boolean Field Stories - Radio button with left label
- */
-export const RadioButtonLeftLabel = Template.bind({});
-RadioButtonLeftLabel.args = {
-  id: 'radio',
-  labelPosition: 'left',
-  name: 'radio-left-label',
-  type: 'radio',
-  value: 'radio',
-};
-
-/**
- * Labelled Boolean Field Stories - Radio button with right label
- */
-export const RadioButtonRightLabel = Template.bind({});
-RadioButtonRightLabel.args = {
-  id: 'radio',
-  labelPosition: 'right',
-  name: 'radio-right-label',
-  type: 'radio',
-  value: 'radio',
-};
diff --git a/src/components/molecules/forms/labelled-boolean-field.test.tsx b/src/components/molecules/forms/labelled-boolean-field.test.tsx
deleted file mode 100644
index 6916f95..0000000
--- a/src/components/molecules/forms/labelled-boolean-field.test.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { render, screen } from '../../../../tests/utils';
-import { LabelledBooleanField } from './labelled-boolean-field';
-import { label } from './labelled-boolean-field.fixture';
-
-describe('LabelledBooleanField', () => {
-  it('renders a labelled checkbox', () => {
-    render(
-      <LabelledBooleanField
-        checked={true}
-        id="jest-checkbox-field"
-        label={label}
-        name="jest-checkbox-field"
-        onChange={() => null}
-        type="checkbox"
-        value="checkbox"
-      />
-    );
-    expect(screen.getByLabelText(label)).toBeInTheDocument();
-    expect(screen.getByRole('checkbox')).toBeChecked();
-  });
-
-  it('renders a labelled radio option', () => {
-    render(
-      <LabelledBooleanField
-        checked={true}
-        id="jest-radio-field"
-        label={label}
-        name="jest-radio-field"
-        onChange={() => null}
-        type="radio"
-        value="radio"
-      />
-    );
-    expect(screen.getByLabelText(label)).toBeInTheDocument();
-    expect(screen.getByRole('radio')).toBeChecked();
-  });
-});
diff --git a/src/components/molecules/forms/labelled-boolean-field.tsx b/src/components/molecules/forms/labelled-boolean-field.tsx
deleted file mode 100644
index d110d45..0000000
--- a/src/components/molecules/forms/labelled-boolean-field.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import { FC } from 'react';
-import {
-  BooleanField,
-  type BooleanFieldProps,
-  Label,
-  type LabelProps,
-} from '../../atoms';
-import styles from './labelled-boolean-field.module.scss';
-
-export type LabelledBooleanFieldProps = Omit<
-  BooleanFieldProps,
-  'aria-labelledby' | 'className'
-> & {
-  /**
-   * Set additional classnames to the labelled field wrapper.
-   */
-  className?: string;
-  /**
-   * Set additional classnames to the field.
-   */
-  fieldClassName?: LabelledBooleanFieldProps['className'];
-  /**
-   * The field label.
-   */
-  label: LabelProps['children'];
-  /**
-   * Set additional classnames to the label.
-   */
-  labelClassName?: LabelProps['className'];
-  /**
-   * The label position. Default: left.
-   */
-  labelPosition?: 'left' | 'right';
-  /**
-   * The label size.
-   */
-  labelSize?: LabelProps['size'];
-};
-
-/**
- * LabelledBooleanField component
- *
- * Render a checkbox or radio button with a label.
- */
-export const LabelledBooleanField: FC<LabelledBooleanFieldProps> = ({
-  className = '',
-  fieldClassName,
-  hidden,
-  id,
-  label,
-  labelClassName,
-  labelPosition = 'left',
-  labelSize,
-  ...props
-}) => {
-  const labelHiddenModifier = hidden ? 'label--hidden' : 'label--visible';
-  const labelPositionModifier = `label--${labelPosition}`;
-  const labelClass = `${styles[labelPositionModifier]} ${styles[labelHiddenModifier]} ${labelClassName}`;
-
-  return labelPosition === 'left' ? (
-    <span className={`${styles.wrapper} ${className}`}>
-      <Label className={labelClass} htmlFor={id} size={labelSize}>
-        {label}
-      </Label>
-      <BooleanField
-        {...props}
-        className={fieldClassName}
-        hidden={hidden}
-        id={id}
-      />
-    </span>
-  ) : (
-    <span className={`${styles.wrapper} ${className}`}>
-      <BooleanField
-        {...props}
-        className={fieldClassName}
-        hidden={hidden}
-        id={id}
-      />
-      <Label className={labelClass} htmlFor={id} size={labelSize}>
-        {label}
-      </Label>
-    </span>
-  );
-};
diff --git a/src/components/molecules/forms/labelled-field.module.scss b/src/components/molecules/forms/labelled-field.module.scss
deleted file mode 100644
index 64ef3d0..0000000
--- a/src/components/molecules/forms/labelled-field.module.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.label {
-  &--left {
-    margin-right: var(--spacing-2xs);
-  }
-
-  &--top {
-    display: block;
-  }
-}
diff --git a/src/components/molecules/forms/labelled-field.stories.tsx b/src/components/molecules/forms/labelled-field.stories.tsx
deleted file mode 100644
index 840421b..0000000
--- a/src/components/molecules/forms/labelled-field.stories.tsx
+++ /dev/null
@@ -1,293 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { useState } from 'react';
-import { LabelledField } from './labelled-field';
-
-/**
- * LabelledField - Storybook Meta
- */
-export default {
-  title: 'Molecules/Forms/Field',
-  component: LabelledField,
-  args: {
-    disabled: false,
-    hideLabel: false,
-    labelPosition: 'top',
-    required: false,
-  },
-  argTypes: {
-    'aria-labelledby': {
-      control: {
-        type: 'text',
-      },
-      description: 'One or more ids that refers to the field name.',
-      table: {
-        category: 'Accessibility',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    className: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the field.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    disabled: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Field state: either enabled or disabled.',
-      table: {
-        category: 'Options',
-        defaultValue: { summary: false },
-      },
-      type: {
-        name: 'boolean',
-        required: false,
-      },
-    },
-    id: {
-      control: {
-        type: 'text',
-      },
-      description: 'Field id.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    hideLabel: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Visually hide the field label.',
-      table: {
-        category: 'Options',
-        defaultValue: { summary: false },
-      },
-      type: {
-        name: 'boolean',
-        required: false,
-      },
-    },
-    label: {
-      control: {
-        type: 'text',
-      },
-      description: 'Field label.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    labelPosition: {
-      control: {
-        type: 'select',
-      },
-      description: 'The label position.',
-      options: ['left', 'top'],
-      table: {
-        category: 'Options',
-        defaultValue: { summary: 'top' },
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    max: {
-      control: {
-        type: 'number',
-      },
-      description: 'Maximum value.',
-      table: {
-        category: 'Options',
-      },
-      type: {
-        name: 'number',
-        required: false,
-      },
-    },
-    min: {
-      control: {
-        type: 'number',
-      },
-      description: 'Minimum value.',
-      table: {
-        category: 'Options',
-      },
-      type: {
-        name: 'number',
-        required: false,
-      },
-    },
-    name: {
-      control: {
-        type: 'text',
-      },
-      description: 'Field name.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    placeholder: {
-      control: {
-        type: 'text',
-      },
-      description: 'A placeholder value.',
-      table: {
-        category: 'Options',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    required: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Determine if the field is required.',
-      table: {
-        category: 'Options',
-        defaultValue: { summary: false },
-      },
-      type: {
-        name: 'boolean',
-        required: false,
-      },
-    },
-    setValue: {
-      control: {
-        type: null,
-      },
-      description: 'Callback function to set field value.',
-      table: {
-        category: 'Events',
-      },
-      type: {
-        name: 'function',
-        required: true,
-      },
-    },
-    step: {
-      control: {
-        type: 'number',
-      },
-      description: 'Field incremental values that are valid.',
-      table: {
-        category: 'Options',
-      },
-      type: {
-        name: 'number',
-        required: false,
-      },
-    },
-    type: {
-      control: {
-        type: 'select',
-      },
-      description: 'Field type: input type or textarea.',
-      options: [
-        'datetime-local',
-        'email',
-        'number',
-        'search',
-        'tel',
-        'text',
-        'textarea',
-        'time',
-        'url',
-      ],
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    value: {
-      control: {
-        type: null,
-      },
-      description: 'Field value.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-  },
-} as ComponentMeta<typeof LabelledField>;
-
-const Template: ComponentStory<typeof LabelledField> = ({
-  value: _value,
-  setValue: _setValue,
-  ...args
-}) => {
-  const [value, setValue] = useState<string>('');
-
-  return <LabelledField value={value} setValue={setValue} {...args} />;
-};
-
-/**
- * Labelled Field Stories - Left
- */
-export const Left = Template.bind({});
-Left.args = {
-  id: 'labelled-field-storybook',
-  label: 'Labelled field',
-  labelPosition: 'left',
-  name: 'labelled-field-storybook',
-};
-
-/**
- * Labelled Field Stories - Top
- */
-export const Top = Template.bind({});
-Top.args = {
-  id: 'labelled-field-storybook',
-  label: 'Labelled field',
-  labelPosition: 'top',
-  name: 'labelled-field-storybook',
-};
-
-/**
- * Labelled Field Stories - Required
- */
-export const Required = Template.bind({});
-Required.args = {
-  id: 'labelled-field-storybook',
-  label: 'Labelled field',
-  name: 'labelled-field-storybook',
-  required: true,
-};
-
-/**
- * Labelled Field Stories - Hidden label
- */
-export const HiddenLabel = Template.bind({});
-HiddenLabel.args = {
-  hideLabel: true,
-  id: 'labelled-field-storybook',
-  label: 'Labelled field',
-  name: 'labelled-field-storybook',
-};
-
-/**
- * Labelled Field Stories - Disabled
- */
-export const Disabled = Template.bind({});
-Disabled.args = {
-  disabled: true,
-  id: 'labelled-field-storybook',
-  label: 'Labelled field',
-  name: 'labelled-field-storybook',
-};
diff --git a/src/components/molecules/forms/labelled-field.test.tsx b/src/components/molecules/forms/labelled-field.test.tsx
deleted file mode 100644
index e16c129..0000000
--- a/src/components/molecules/forms/labelled-field.test.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { render, screen } from '../../../../tests/utils';
-import { LabelledField } from './labelled-field';
-
-describe('LabelledField', () => {
-  it('renders a labelled field', () => {
-    render(
-      <LabelledField
-        type="text"
-        id="jest-text-field"
-        name="jest-text-field"
-        label="Jest text field"
-        value="test"
-        setValue={() => null}
-      />
-    );
-    expect(screen.getByLabelText('Jest text field')).toBeInTheDocument();
-    expect(screen.getByRole('textbox')).toHaveValue('test');
-  });
-});
diff --git a/src/components/molecules/forms/labelled-field.tsx b/src/components/molecules/forms/labelled-field.tsx
deleted file mode 100644
index fca1c54..0000000
--- a/src/components/molecules/forms/labelled-field.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { forwardRef, ForwardRefRenderFunction } from 'react';
-import { Field, type FieldProps, Label } from '../../atoms';
-import styles from './labelled-field.module.scss';
-
-export type LabelledFieldProps = FieldProps & {
-  /**
-   * Visually hide the field label. Default: false.
-   */
-  hideLabel?: boolean;
-  /**
-   * The field label.
-   */
-  label: string;
-  /**
-   * The label position. Default: top.
-   */
-  labelPosition?: 'left' | 'top';
-};
-
-const LabelledFieldWithRef: ForwardRefRenderFunction<
-  HTMLInputElement,
-  LabelledFieldProps
-> = (
-  { hideLabel = false, id, label, labelPosition = 'top', required, ...props },
-  ref
-) => {
-  const positionModifier = `label--${labelPosition}`;
-  const visibilityClass = hideLabel ? 'screen-reader-text' : '';
-
-  return (
-    <>
-      <Label
-        htmlFor={id}
-        required={required}
-        className={`${visibilityClass} ${styles[positionModifier]}`}
-      >
-        {label}
-      </Label>
-      <Field id={id} ref={ref} required={required} {...props} />
-    </>
-  );
-};
-
-/**
- * LabelledField component
- *
- * Render a field tied to a label.
- */
-export const LabelledField = forwardRef(LabelledFieldWithRef);
diff --git a/src/components/molecules/forms/labelled-field/index.ts b/src/components/molecules/forms/labelled-field/index.ts
new file mode 100644
index 0000000..b0d9889
--- /dev/null
+++ b/src/components/molecules/forms/labelled-field/index.ts
@@ -0,0 +1 @@
+export * from './labelled-field';
diff --git a/src/components/molecules/forms/labelled-field/labelled-field.module.scss b/src/components/molecules/forms/labelled-field/labelled-field.module.scss
new file mode 100644
index 0000000..bb37dc7
--- /dev/null
+++ b/src/components/molecules/forms/labelled-field/labelled-field.module.scss
@@ -0,0 +1,22 @@
+.wrapper {
+  display: flex;
+  gap: var(--spacing-2xs);
+  width: fit-content;
+
+  &--inline {
+    flex-flow: row wrap;
+    align-items: center;
+  }
+
+  &--inline#{&}--reverse {
+    flex-flow: row-reverse wrap;
+  }
+
+  &--stack {
+    flex-flow: column wrap;
+  }
+
+  &--stack#{&}--reverse {
+    flex-flow: column-reverse wrap;
+  }
+}
diff --git a/src/components/molecules/forms/labelled-field/labelled-field.stories.tsx b/src/components/molecules/forms/labelled-field/labelled-field.stories.tsx
new file mode 100644
index 0000000..1f29830
--- /dev/null
+++ b/src/components/molecules/forms/labelled-field/labelled-field.stories.tsx
@@ -0,0 +1,130 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { ChangeEvent, useState } from 'react';
+import { Input, Label } from '../../../atoms';
+import { LabelledField } from './labelled-field';
+
+/**
+ * LabelledField - Storybook Meta
+ */
+export default {
+  title: 'Molecules/Forms/Field',
+  component: LabelledField,
+  argTypes: {
+    className: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the field.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+    field: {
+      control: {
+        type: null,
+      },
+      description: 'A component: Checkbox, Input, Select, Radio or TextArea.',
+      type: {
+        name: 'function',
+        required: true,
+      },
+    },
+    label: {
+      control: {
+        type: null,
+      },
+      description: 'A Label component.',
+      type: {
+        name: 'function',
+        required: true,
+      },
+    },
+    isInline: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Should the label and the field be inlined?',
+      table: {
+        category: 'Options',
+        defaultValue: { summary: false },
+      },
+      type: {
+        name: 'boolean',
+        required: false,
+      },
+    },
+    isReversedOrder: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Should the label and the field be reversed?',
+      table: {
+        category: 'Options',
+        defaultValue: { summary: false },
+      },
+      type: {
+        name: 'boolean',
+        required: false,
+      },
+    },
+  },
+} as ComponentMeta<typeof LabelledField>;
+
+const Template: ComponentStory<typeof LabelledField> = ({ ...args }) => {
+  const id = 'sunt';
+  const [value, setValue] = useState<string>('');
+  const updateValue = (e: ChangeEvent<HTMLInputElement>) => {
+    setValue(e.target.value);
+  };
+
+  return (
+    <LabelledField
+      {...args}
+      field={
+        <Input
+          id={id}
+          name={id}
+          onChange={updateValue}
+          type="text"
+          value={value}
+        />
+      }
+      label={<Label htmlFor={id}>A label</Label>}
+    />
+  );
+};
+
+/**
+ * Labelled Field Stories - Left
+ */
+export const Left = Template.bind({});
+Left.args = {
+  isInline: true,
+};
+
+/**
+ * Labelled Field Stories - Right
+ */
+export const Right = Template.bind({});
+Right.args = {
+  isInline: true,
+  isReversedOrder: true,
+};
+
+/**
+ * Labelled Field Stories - Top
+ */
+export const Top = Template.bind({});
+Top.args = {};
+
+/**
+ * Labelled Field Stories - Bottom
+ */
+export const Bottom = Template.bind({});
+Bottom.args = {
+  isReversedOrder: true,
+};
diff --git a/src/components/molecules/forms/labelled-field/labelled-field.test.tsx b/src/components/molecules/forms/labelled-field/labelled-field.test.tsx
new file mode 100644
index 0000000..9e39e1f
--- /dev/null
+++ b/src/components/molecules/forms/labelled-field/labelled-field.test.tsx
@@ -0,0 +1,32 @@
+import { render, screen } from '../../../../../tests/utils';
+import { Input, Label } from '../../../atoms';
+import { LabelledField } from './labelled-field';
+
+const doNothing = () => {
+  // Do nothing
+};
+
+describe('LabelledField', () => {
+  it('renders a labelled field', () => {
+    const id = 'enim';
+    const label = 'eum aliquam culpa';
+    const value = 'vitae';
+
+    render(
+      <LabelledField
+        field={
+          <Input
+            id={id}
+            name="text-field"
+            onChange={doNothing}
+            type="text"
+            value={value}
+          />
+        }
+        label={<Label htmlFor={id}>{label}</Label>}
+      />
+    );
+    expect(screen.getByLabelText(label)).toBeInTheDocument();
+    expect(screen.getByRole('textbox')).toHaveValue(value);
+  });
+});
diff --git a/src/components/molecules/forms/labelled-field/labelled-field.tsx b/src/components/molecules/forms/labelled-field/labelled-field.tsx
new file mode 100644
index 0000000..af492b3
--- /dev/null
+++ b/src/components/molecules/forms/labelled-field/labelled-field.tsx
@@ -0,0 +1,63 @@
+import { FC, HTMLAttributes, ReactElement } from 'react';
+import {
+  CheckboxProps,
+  InputProps,
+  LabelProps,
+  RadioProps,
+  SelectProps,
+  TextAreaProps,
+} from '../../../atoms';
+import styles from './labelled-field.module.scss';
+
+export type LabelledFieldProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  'children'
+> & {
+  /**
+   * The field.
+   */
+  field: ReactElement<
+    CheckboxProps | InputProps | RadioProps | SelectProps | TextAreaProps
+  >;
+  /**
+   * Should the label and the field be inlined?
+   *
+   * @default false
+   */
+  isInline?: boolean;
+  /**
+   * If true, the label is displayed after the field.
+   *
+   * @default false
+   */
+  isReversedOrder?: boolean;
+  /**
+   * The field label.
+   */
+  label: ReactElement<LabelProps>;
+};
+
+/**
+ * LabelledField component
+ *
+ * Render a field tied to a label.
+ */
+export const LabelledField: FC<LabelledFieldProps> = ({
+  className = '',
+  field,
+  isInline = false,
+  isReversedOrder = false,
+  label,
+  ...props
+}) => {
+  const layoutClass = isInline ? 'wrapper--inline' : 'wrapper--stack';
+  const orderClass = isReversedOrder ? 'wrapper--reverse' : '';
+  const wrapperClass = `${styles.wrapper} ${styles[layoutClass]} ${styles[orderClass]} ${className}`;
+
+  return (
+    <div {...props} className={wrapperClass}>
+      {label}
+      {field}
+    </div>
+  );
+};
diff --git a/src/components/molecules/forms/labelled-select.module.scss b/src/components/molecules/forms/labelled-select.module.scss
deleted file mode 100644
index 64ef3d0..0000000
--- a/src/components/molecules/forms/labelled-select.module.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.label {
-  &--left {
-    margin-right: var(--spacing-2xs);
-  }
-
-  &--top {
-    display: block;
-  }
-}
diff --git a/src/components/molecules/forms/labelled-select.stories.tsx b/src/components/molecules/forms/labelled-select.stories.tsx
deleted file mode 100644
index d6029a5..0000000
--- a/src/components/molecules/forms/labelled-select.stories.tsx
+++ /dev/null
@@ -1,236 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { useState } from 'react';
-import { LabelledSelect } from './labelled-select';
-
-const selectOptions = [
-  { id: 'option1', name: 'Option 1', value: 'option1' },
-  { id: 'option2', name: 'Option 2', value: 'option2' },
-  { id: 'option3', name: 'Option 3', value: 'option3' },
-];
-
-/**
- * LabelledSelect - Storybook Meta
- */
-export default {
-  title: 'Molecules/Forms/Select',
-  component: LabelledSelect,
-  args: {
-    disabled: false,
-    labelPosition: 'top',
-    required: false,
-  },
-  argTypes: {
-    disabled: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Field state: either enabled or disabled.',
-      table: {
-        category: 'Options',
-        defaultValue: { summary: false },
-      },
-      type: {
-        name: 'boolean',
-        required: false,
-      },
-    },
-    id: {
-      control: {
-        type: 'text',
-      },
-      description: 'Field id.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    label: {
-      control: {
-        type: 'text',
-      },
-      description: 'Field label.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    labelClassName: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the label.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    labelPosition: {
-      control: {
-        type: 'select',
-      },
-      description: 'The label position.',
-      options: ['left', 'top'],
-      table: {
-        category: 'Options',
-        defaultValue: { summary: 'top' },
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    labelSize: {
-      control: {
-        type: 'select',
-      },
-      description: 'The label size.',
-      options: ['medium', 'small'],
-      table: {
-        category: 'Options',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    name: {
-      control: {
-        type: 'text',
-      },
-      description: 'Field name.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    options: {
-      control: {
-        type: null,
-      },
-      description: 'Select options.',
-      type: {
-        name: 'array',
-        required: true,
-        value: {
-          name: 'string',
-        },
-      },
-    },
-    required: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Determine if the field is required.',
-      table: {
-        category: 'Options',
-        defaultValue: { summary: false },
-      },
-      type: {
-        name: 'boolean',
-        required: false,
-      },
-    },
-    selectClassName: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the select field.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    setValue: {
-      control: {
-        type: null,
-      },
-      description: 'Callback function to set field value.',
-      table: {
-        category: 'Events',
-      },
-      type: {
-        name: 'function',
-        required: true,
-      },
-    },
-    value: {
-      control: {
-        type: null,
-      },
-      description: 'Field value.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-  },
-} as ComponentMeta<typeof LabelledSelect>;
-
-const Template: ComponentStory<typeof LabelledSelect> = ({
-  value,
-  setValue: _setValue,
-  ...args
-}) => {
-  const [selected, setSelected] = useState<string>(value);
-
-  return <LabelledSelect value={selected} setValue={setSelected} {...args} />;
-};
-
-/**
- * Labelled Select Stories - Left
- */
-export const Left = Template.bind({});
-Left.args = {
-  id: 'labelled-select-storybook',
-  label: 'Labelled select',
-  labelPosition: 'left',
-  name: 'labelled-select-storybook',
-  options: selectOptions,
-  value: 'option1',
-};
-
-/**
- * Labelled Select Stories - Top
- */
-export const Top = Template.bind({});
-Top.args = {
-  id: 'labelled-select-storybook',
-  label: 'Labelled select',
-  labelPosition: 'top',
-  name: 'labelled-select-storybook',
-  options: selectOptions,
-  value: 'option1',
-};
-
-/**
- * Labelled Select Stories - Disabled
- */
-export const Disabled = Template.bind({});
-Disabled.args = {
-  disabled: true,
-  id: 'labelled-select-storybook',
-  label: 'Labelled select',
-  name: 'labelled-select-storybook',
-  options: selectOptions,
-  value: 'option1',
-};
-
-/**
- * Labelled Select Stories - Required
- */
-export const Required = Template.bind({});
-Required.args = {
-  id: 'labelled-select-storybook',
-  label: 'Labelled select',
-  labelPosition: 'top',
-  name: 'labelled-select-storybook',
-  options: selectOptions,
-  required: true,
-  value: 'option1',
-};
diff --git a/src/components/molecules/forms/labelled-select.test.tsx b/src/components/molecules/forms/labelled-select.test.tsx
deleted file mode 100644
index 1ef4a25..0000000
--- a/src/components/molecules/forms/labelled-select.test.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { render, screen } from '../../../../tests/utils';
-import { LabelledSelect } from './labelled-select';
-
-const selectOptions = [
-  { id: 'option1', name: 'Option 1', value: 'option1' },
-  { id: 'option2', name: 'Option 2', value: 'option2' },
-  { id: 'option3', name: 'Option 3', value: 'option3' },
-];
-
-describe('LabelledSelect', () => {
-  it('renders a labelled select', () => {
-    render(
-      <LabelledSelect
-        id="jest-select-field"
-        name="jest-select-field"
-        label="Jest select field"
-        options={selectOptions}
-        value="option1"
-        setValue={() => null}
-      />
-    );
-    expect(screen.getByLabelText('Jest select field')).toBeInTheDocument();
-    expect(screen.getByRole('combobox')).toHaveValue('option1');
-  });
-});
diff --git a/src/components/molecules/forms/labelled-select.tsx b/src/components/molecules/forms/labelled-select.tsx
deleted file mode 100644
index 300ae8a..0000000
--- a/src/components/molecules/forms/labelled-select.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { FC } from 'react';
-import { Label, type LabelProps, Select, type SelectProps } from '../../atoms';
-import styles from './labelled-select.module.scss';
-
-export type LabelledSelectProps = Omit<
-  SelectProps,
-  'aria-labelledby' | 'className'
-> & {
-  /**
-   * The field label.
-   */
-  label: string;
-  /**
-   * Set additional classnames to the label.
-   */
-  labelClassName?: LabelProps['className'];
-  /**
-   * The label position. Default: top.
-   */
-  labelPosition?: 'left' | 'top';
-  /**
-   * The label size.
-   */
-  labelSize?: LabelProps['size'];
-  /**
-   * Set additional classnames to the select field.
-   */
-  selectClassName?: SelectProps['className'];
-};
-
-/**
- * LabelledSelect component
- *
- * Render a select with a label.
- */
-export const LabelledSelect: FC<LabelledSelectProps> = ({
-  id,
-  label,
-  labelClassName = '',
-  labelPosition = 'top',
-  labelSize,
-  required,
-  selectClassName = '',
-  ...props
-}) => {
-  const positionModifier = `label--${labelPosition}`;
-
-  return (
-    <>
-      <Label
-        className={`${styles[positionModifier]} ${labelClassName}`}
-        htmlFor={id}
-        required={required}
-        size={labelSize}
-      >
-        {label}
-      </Label>
-      <Select
-        {...props}
-        className={selectClassName}
-        id={id}
-        required={required}
-      />
-    </>
-  );
-};
diff --git a/src/components/molecules/forms/motion-toggle.fixture.tsx b/src/components/molecules/forms/motion-toggle.fixture.tsx
deleted file mode 100644
index f13658a..0000000
--- a/src/components/molecules/forms/motion-toggle.fixture.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export const storageKey = 'reduced-motion';
diff --git a/src/components/molecules/forms/motion-toggle.stories.tsx b/src/components/molecules/forms/motion-toggle.stories.tsx
deleted file mode 100644
index bb51e26..0000000
--- a/src/components/molecules/forms/motion-toggle.stories.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { MotionToggle } from './motion-toggle';
-import { storageKey } from './motion-toggle.fixture';
-
-/**
- * MotionToggle - Storybook Meta
- */
-export default {
-  title: 'Molecules/Forms/Toggle',
-  component: MotionToggle,
-  argTypes: {
-    bodyClassName: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the fieldset body wrapper.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    defaultValue: {
-      control: {
-        type: 'select',
-      },
-      description: 'Set the default value.',
-      options: ['on', 'off'],
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    groupClassName: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the radio group wrapper.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    legendClassName: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the legend.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    storageKey: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set local storage key.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-  },
-} as ComponentMeta<typeof MotionToggle>;
-
-const Template: ComponentStory<typeof MotionToggle> = (args) => (
-  <MotionToggle {...args} />
-);
-
-/**
- * Toggle Stories - Motion
- */
-export const Motion = Template.bind({});
-Motion.args = {
-  defaultValue: 'on',
-  storageKey,
-};
diff --git a/src/components/molecules/forms/motion-toggle.test.tsx b/src/components/molecules/forms/motion-toggle.test.tsx
deleted file mode 100644
index 93df3a0..0000000
--- a/src/components/molecules/forms/motion-toggle.test.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { render, screen } from '../../../../tests/utils';
-import { MotionToggle } from './motion-toggle';
-import { storageKey } from './motion-toggle.fixture';
-
-describe('MotionToggle', () => {
-  // toHaveValue received undefined. Maybe because of localStorage hook...
-  it('renders a toggle component', () => {
-    render(<MotionToggle storageKey={storageKey} defaultValue="on" />);
-    expect(
-      screen.getByRole('radiogroup', {
-        name: /Animations:/i,
-      })
-    ).toBeInTheDocument();
-  });
-});
diff --git a/src/components/molecules/forms/motion-toggle.tsx b/src/components/molecules/forms/motion-toggle.tsx
deleted file mode 100644
index c1a55f0..0000000
--- a/src/components/molecules/forms/motion-toggle.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import { FC } from 'react';
-import { useIntl } from 'react-intl';
-import { useAttributes, useLocalStorage } from '../../../utils/hooks';
-import {
-  RadioGroup,
-  type RadioGroupCallback,
-  type RadioGroupCallbackProps,
-  type RadioGroupOption,
-  type RadioGroupProps,
-} from './radio-group';
-
-export type MotionToggleValue = 'on' | 'off';
-
-export type MotionToggleProps = Pick<
-  RadioGroupProps,
-  'bodyClassName' | 'groupClassName' | 'legendClassName' | 'legendPosition'
-> & {
-  /**
-   * True if motion should be reduced by default.
-   */
-  defaultValue: 'on' | 'off';
-  /**
-   * The local storage key to save preference.
-   */
-  storageKey: string;
-};
-
-/**
- * MotionToggle component
- *
- * Render a Toggle component to set reduce motion.
- */
-export const MotionToggle: FC<MotionToggleProps> = ({
-  defaultValue,
-  storageKey,
-  ...props
-}) => {
-  const intl = useIntl();
-  const { value: isReduced, setValue: setIsReduced } = useLocalStorage<boolean>(
-    storageKey,
-    defaultValue === 'on' ? false : true
-  );
-  useAttributes({
-    element:
-      typeof window !== 'undefined' ? document.documentElement : undefined,
-    attribute: 'reduced-motion',
-    value: `${isReduced}`,
-  });
-
-  const reduceMotionLabel = intl.formatMessage({
-    defaultMessage: 'Animations:',
-    description: 'MotionToggle: reduce motion label',
-    id: '/q5csZ',
-  });
-  const onLabel = intl.formatMessage({
-    defaultMessage: 'On',
-    description: 'MotionToggle: activate reduce motion label',
-    id: 'va65iw',
-  });
-  const offLabel = intl.formatMessage({
-    defaultMessage: 'Off',
-    description: 'MotionToggle: deactivate reduce motion label',
-    id: 'pWKyyR',
-  });
-
-  const options: RadioGroupOption[] = [
-    {
-      id: 'reduced-motion-on',
-      label: onLabel,
-      name: 'reduced-motion',
-      value: 'on',
-    },
-    {
-      id: 'reduced-motion-off',
-      label: offLabel,
-      name: 'reduced-motion',
-      value: 'off',
-    },
-  ];
-
-  /**
-   * Update the current setting.
-   *
-   * @param {string} newValue - A boolean as string.
-   */
-  const updateSetting = (newValue: MotionToggleValue) => {
-    setIsReduced(newValue === 'on' ? false : true);
-  };
-
-  /**
-   * Handle change events.
-   *
-   * @param {RadioGroupCallbackProps} props - An object with choices.
-   */
-  const handleChange: RadioGroupCallback = ({
-    choices,
-    updateChoice,
-  }: RadioGroupCallbackProps) => {
-    if (choices.new === choices.prev) {
-      const newChoice = choices.new === 'on' ? 'off' : 'on';
-      updateChoice(newChoice);
-      updateSetting(newChoice);
-    } else {
-      updateSetting(choices.new as MotionToggleValue);
-    }
-  };
-
-  return (
-    <RadioGroup
-      {...props}
-      initialChoice={defaultValue}
-      kind="toggle"
-      legend={reduceMotionLabel}
-      onChange={handleChange}
-      options={options}
-    />
-  );
-};
diff --git a/src/components/molecules/forms/prism-theme-toggle.stories.tsx b/src/components/molecules/forms/prism-theme-toggle.stories.tsx
deleted file mode 100644
index bf0f2df..0000000
--- a/src/components/molecules/forms/prism-theme-toggle.stories.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { PrismThemeToggle } from './prism-theme-toggle';
-
-/**
- * PrismThemeToggle - Storybook Meta
- */
-export default {
-  title: 'Molecules/Forms/Toggle',
-  component: PrismThemeToggle,
-  argTypes: {
-    bodyClassName: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the fieldset body wrapper.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    groupClassName: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the radio group wrapper.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    legendClassName: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the legend.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-  },
-} as ComponentMeta<typeof PrismThemeToggle>;
-
-const Template: ComponentStory<typeof PrismThemeToggle> = (args) => (
-  <PrismThemeToggle {...args} />
-);
-
-/**
- * Toggle Stories - Prism theme
- */
-export const PrismTheme = Template.bind({});
diff --git a/src/components/molecules/forms/prism-theme-toggle.test.tsx b/src/components/molecules/forms/prism-theme-toggle.test.tsx
deleted file mode 100644
index bd63762..0000000
--- a/src/components/molecules/forms/prism-theme-toggle.test.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { render, screen } from '../../../../tests/utils';
-import { PrismThemeToggle } from './prism-theme-toggle';
-
-describe('PrismThemeToggle', () => {
-  it('renders a toggle component', () => {
-    render(<PrismThemeToggle />);
-    expect(
-      screen.getByRole('radiogroup', {
-        name: /Code blocks:/i,
-      })
-    ).toBeInTheDocument();
-  });
-});
diff --git a/src/components/molecules/forms/prism-theme-toggle.tsx b/src/components/molecules/forms/prism-theme-toggle.tsx
deleted file mode 100644
index 5427fec..0000000
--- a/src/components/molecules/forms/prism-theme-toggle.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import { FC } from 'react';
-import { useIntl } from 'react-intl';
-import {
-  type PrismTheme,
-  usePrismTheme,
-} from '../../../utils/providers/prism-theme';
-import { Moon, Sun } from '../../atoms';
-import {
-  RadioGroup,
-  type RadioGroupCallback,
-  type RadioGroupCallbackProps,
-  type RadioGroupOption,
-  type RadioGroupProps,
-} from './radio-group';
-
-export type PrismThemeToggleProps = Pick<
-  RadioGroupProps,
-  'bodyClassName' | 'groupClassName' | 'legendClassName' | 'legendPosition'
->;
-
-/**
- * PrismThemeToggle component
- *
- * Render a Toggle component to set code blocks theme.
- */
-export const PrismThemeToggle: FC<PrismThemeToggleProps> = (props) => {
-  const intl = useIntl();
-  const { theme, setTheme, resolvedTheme } = usePrismTheme();
-
-  /**
-   * Check if the resolved or chosen theme is dark theme.
-   *
-   * @returns {boolean} True if it is dark theme.
-   */
-  const isDarkTheme = (prismTheme?: PrismTheme): boolean => {
-    if (prismTheme === 'system') return resolvedTheme === 'dark';
-    return prismTheme === 'dark';
-  };
-
-  /**
-   * Update the theme.
-   *
-   * @param {string} newTheme - A theme name.
-   */
-  const updateTheme = (newTheme: string) => {
-    setTheme(newTheme === 'light' ? 'light' : 'dark');
-  };
-
-  /**
-   * Handle change events.
-   *
-   * @param {RadioGroupCallbackProps} props - An object with choices.
-   */
-  const handleChange: RadioGroupCallback = ({
-    choices,
-    updateChoice,
-  }: RadioGroupCallbackProps) => {
-    if (choices.new === choices.prev) {
-      const newTheme = choices.new === 'light' ? 'dark' : 'light';
-      updateChoice(newTheme);
-      updateTheme(newTheme);
-    } else {
-      updateTheme(choices.new);
-    }
-  };
-
-  const themeLabel = intl.formatMessage({
-    defaultMessage: 'Code blocks:',
-    description: 'PrismThemeToggle: theme label',
-    id: 'ftXN+0',
-  });
-  const lightThemeLabel = intl.formatMessage({
-    defaultMessage: 'Light theme',
-    description: 'PrismThemeToggle: light theme label',
-    id: 'tsWh8x',
-  });
-  const darkThemeLabel = intl.formatMessage({
-    defaultMessage: 'Dark theme',
-    description: 'PrismThemeToggle: dark theme label',
-    id: 'og/zWL',
-  });
-
-  const options: RadioGroupOption[] = [
-    {
-      id: 'code-blocks-light',
-      label: (
-        <>
-          <span className="screen-reader-text">{lightThemeLabel}</span>
-          <Sun />
-        </>
-      ),
-      name: 'code-blocks',
-      value: 'light',
-    },
-    {
-      id: 'code-blocks-dark',
-      label: (
-        <>
-          <span className="screen-reader-text">{darkThemeLabel}</span>
-          <Moon />
-        </>
-      ),
-      name: 'code-blocks',
-      value: 'dark',
-    },
-  ];
-
-  return (
-    <RadioGroup
-      {...props}
-      initialChoice={isDarkTheme(theme) ? 'dark' : 'light'}
-      kind="toggle"
-      legend={themeLabel}
-      onChange={handleChange}
-      options={options}
-    />
-  );
-};
diff --git a/src/components/molecules/forms/radio-group.module.scss b/src/components/molecules/forms/radio-group.module.scss
deleted file mode 100644
index cadff46..0000000
--- a/src/components/molecules/forms/radio-group.module.scss
+++ /dev/null
@@ -1,112 +0,0 @@
-@use "../../../styles/abstracts/functions" as fun;
-@use "../../../styles/abstracts/mixins" as mix;
-
-.wrapper {
-  &--inline {
-    .legend {
-      margin-right: var(--spacing-2xs);
-    }
-  }
-
-  &--regular {
-    .option {
-      &:not(:last-of-type) {
-        margin-right: var(--spacing-xs);
-      }
-    }
-  }
-}
-
-.toggle {
-  display: inline-flex;
-  flex-flow: row wrap;
-  align-items: center;
-  width: fit-content;
-  position: relative;
-  background: var(--color-shadow-light);
-  border: fun.convert-px(2) solid var(--color-primary);
-  border-radius: fun.convert-px(32);
-  box-shadow: inset 0 0 fun.convert-px(1) fun.convert-px(1)
-      var(--color-shadow-dark),
-    inset 0 0 fun.convert-px(3) fun.convert-px(2) var(--color-shadow);
-
-  .label {
-    display: flex;
-    align-items: center;
-    min-height: 5ex;
-    padding: fun.convert-px(6) var(--spacing-2xs);
-    border-top: fun.convert-px(2) solid var(--color-border);
-    border-bottom: fun.convert-px(2) solid var(--color-border);
-    transition: all 0.15s linear 0s;
-
-    @include mix.pointer("fine") {
-      min-height: 3ex;
-    }
-  }
-
-  &:focus-within {
-    outline: fun.convert-px(2) solid var(--color-primary-light);
-  }
-
-  .option:first-of-type {
-    .label {
-      border-left: fun.convert-px(2) solid var(--color-border);
-      border-top-left-radius: fun.convert-px(32);
-      border-bottom-left-radius: fun.convert-px(32);
-    }
-  }
-
-  .option:last-of-type {
-    .label {
-      border-right: fun.convert-px(2) solid var(--color-border);
-      border-top-right-radius: fun.convert-px(32);
-      border-bottom-right-radius: fun.convert-px(32);
-    }
-  }
-
-  .radio {
-    &:checked + .label {
-      background: var(--color-primary);
-      box-shadow: inset 0 0 fun.convert-px(1) fun.convert-px(2)
-          var(--color-primary-dark),
-        inset 0 0 fun.convert-px(3) fun.convert-px(2)
-          var(--color-primary-darker);
-      color: var(--color-fg-inverted);
-
-      svg {
-        fill: var(--color-fg-inverted);
-        stroke: var(--color-fg-inverted);
-      }
-    }
-
-    &:not(:checked) + .label {
-      svg {
-        fill: var(--color-primary-darker);
-      }
-    }
-
-    &:checked + .label:hover {
-      background: var(--color-primary-lighter);
-      box-shadow: inset 0 0 fun.convert-px(1) fun.convert-px(2)
-          var(--color-primary-light),
-        inset 0 0 fun.convert-px(3) fun.convert-px(2) var(--color-primary);
-    }
-
-    &:not(:checked) + .label:hover {
-      background: var(--color-shadow-light);
-      box-shadow: inset 0 0 0 fun.convert-px(1) var(--color-shadow-dark),
-        inset 0 0 fun.convert-px(3) fun.convert-px(2) var(--color-shadow);
-    }
-
-    &:not(:checked):focus + .label {
-      background: var(--color-shadow-light);
-    }
-
-    &:checked:focus + .label {
-      background: var(--color-primary-lighter);
-      box-shadow: inset 0 0 fun.convert-px(1) fun.convert-px(2)
-          var(--color-primary-light),
-        inset 0 0 fun.convert-px(3) fun.convert-px(2) var(--color-primary);
-    }
-  }
-}
diff --git a/src/components/molecules/forms/radio-group.stories.tsx b/src/components/molecules/forms/radio-group.stories.tsx
deleted file mode 100644
index b727e28..0000000
--- a/src/components/molecules/forms/radio-group.stories.tsx
+++ /dev/null
@@ -1,285 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { RadioGroup } from './radio-group';
-import { getOptions, initialChoice, legend } from './radio-group.fixture';
-
-/**
- * RadioGroup - Storybook Meta
- */
-export default {
-  title: 'Molecules/Forms/RadioGroup',
-  component: RadioGroup,
-  args: {
-    kind: 'regular',
-    labelSize: 'small',
-  },
-  argTypes: {
-    bodyClassName: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the fieldset body wrapper.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    buttonClassName: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the help button.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    className: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the fieldset.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    groupClassName: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the radio group wrapper.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    initialChoice: {
-      control: {
-        type: 'text',
-      },
-      description: 'The default selected option id.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    kind: {
-      control: {
-        type: 'select',
-      },
-      description: 'The radio group kind.',
-      options: ['regular', 'toggle'],
-      table: {
-        category: 'Options',
-        defaultValue: { summary: 'regular' },
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    labelPosition: {
-      control: {
-        type: 'select',
-      },
-      description: 'Determine the label position.',
-      options: ['left', 'right'],
-      table: {
-        category: 'Options',
-        defaultValue: { summary: 'left' },
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    labelSize: {
-      control: {
-        type: 'select',
-      },
-      description: 'The label size.',
-      options: ['medium', 'small'],
-      table: {
-        category: 'Options',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    legend: {
-      control: {
-        type: 'text',
-      },
-      description: 'The fieldset legend.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    legendClassName: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the legend.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    legendPosition: {
-      control: {
-        type: 'select',
-      },
-      description: 'Determine the legend position.',
-      options: ['inline', 'stacked'],
-      table: {
-        category: 'Options',
-        defaultValue: { summary: 'inline' },
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    onChange: {
-      control: {
-        type: null,
-      },
-      description: 'A callback function to handle selected option change.',
-      table: {
-        category: 'Events',
-      },
-      type: {
-        name: 'function',
-        required: false,
-      },
-    },
-    onClick: {
-      control: {
-        type: null,
-      },
-      description: 'A callback function to handle click on a choice.',
-      table: {
-        category: 'Events',
-      },
-      type: {
-        name: 'function',
-        required: false,
-      },
-    },
-    optionClassName: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the option wrapper.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    options: {
-      description: 'An array of radio option object.',
-      type: {
-        name: 'object',
-        required: true,
-        value: {},
-      },
-    },
-    Tooltip: {
-      control: {
-        type: null,
-      },
-      description: 'Add an optional tooltip.',
-      table: {
-        category: 'Options',
-      },
-      type: {
-        name: 'function',
-        required: false,
-      },
-    },
-  },
-} as ComponentMeta<typeof RadioGroup>;
-
-const Template: ComponentStory<typeof RadioGroup> = (args) => (
-  <RadioGroup {...args} />
-);
-
-/**
- * Radio Group Stories - Inlined legend & left label
- */
-export const InlinedLegendLeftLabel = Template.bind({});
-InlinedLegendLeftLabel.args = {
-  initialChoice: initialChoice,
-  labelPosition: 'left',
-  legend: legend,
-  legendPosition: 'inline',
-  options: getOptions('group1'),
-};
-
-/**
- * Radio Group Stories - Inlined legend & left label
- */
-export const InlinedLegendRightLabel = Template.bind({});
-InlinedLegendRightLabel.args = {
-  initialChoice: initialChoice,
-  labelPosition: 'right',
-  legend: legend,
-  legendPosition: 'inline',
-  options: getOptions('group2'),
-};
-
-/**
- * Radio Group Stories - Stacked legend & left label
- */
-export const StackedLegendLeftLabel = Template.bind({});
-StackedLegendLeftLabel.args = {
-  initialChoice: initialChoice,
-  labelPosition: 'left',
-  legend: legend,
-  legendPosition: 'stacked',
-  options: getOptions('group3'),
-};
-
-/**
- * Radio Group Stories - Stacked legend & left label
- */
-export const StackedLegendRightLabel = Template.bind({});
-StackedLegendRightLabel.args = {
-  initialChoice: initialChoice,
-  labelPosition: 'right',
-  legend: legend,
-  legendPosition: 'stacked',
-  options: getOptions('group4'),
-};
-
-/**
- * Radio Group Stories - Toggle
- */
-export const Toggle = Template.bind({});
-Toggle.args = {
-  initialChoice: initialChoice,
-  kind: 'toggle',
-  labelPosition: 'right',
-  legend: legend,
-  options: getOptions('group5'),
-};
diff --git a/src/components/molecules/forms/radio-group.test.tsx b/src/components/molecules/forms/radio-group.test.tsx
deleted file mode 100644
index c4a01e4..0000000
--- a/src/components/molecules/forms/radio-group.test.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { render, screen } from '../../../../tests/utils';
-import { RadioGroup } from './radio-group';
-import { getOptions, initialChoice, legend } from './radio-group.fixture';
-
-describe('RadioGroup', () => {
-  it('renders a legend', () => {
-    render(
-      <RadioGroup
-        initialChoice={initialChoice}
-        legend={legend}
-        options={getOptions()}
-      />
-    );
-    expect(screen.findByRole('radiogroup', { name: legend })).toBeDefined();
-  });
-
-  it('renders the correct number of radio', () => {
-    const options = getOptions();
-
-    render(
-      <RadioGroup
-        initialChoice={initialChoice}
-        legend={legend}
-        options={options}
-      />
-    );
-    const radios = screen.getAllByRole('radio');
-    expect(radios).toHaveLength(options.length);
-  });
-});
diff --git a/src/components/molecules/forms/radio-group.tsx b/src/components/molecules/forms/radio-group.tsx
deleted file mode 100644
index a747395..0000000
--- a/src/components/molecules/forms/radio-group.tsx
+++ /dev/null
@@ -1,157 +0,0 @@
-import { ChangeEvent, FC, MouseEvent, SetStateAction } from 'react';
-import { useStateChange } from '../../../utils/hooks';
-import { Fieldset, type FieldsetProps } from './fieldset';
-import {
-  LabelledBooleanField,
-  type LabelledBooleanFieldProps,
-} from './labelled-boolean-field';
-import styles from './radio-group.module.scss';
-
-export type RadioGroupCallbackProps = {
-  choices: {
-    new: string;
-    prev: string;
-  };
-  updateChoice: (value: SetStateAction<string>) => void;
-};
-
-export type RadioGroupCallback = (props: RadioGroupCallbackProps) => void;
-
-export type RadioGroupOption = Pick<
-  LabelledBooleanFieldProps,
-  'id' | 'label' | 'name' | 'value'
->;
-
-export type RadioGroupProps = Pick<
-  FieldsetProps,
-  | 'bodyClassName'
-  | 'buttonClassName'
-  | 'className'
-  | 'legend'
-  | 'legendClassName'
-  | 'Tooltip'
-> &
-  Pick<LabelledBooleanFieldProps, 'labelPosition' | 'labelSize'> & {
-    /**
-     * Set additional classnames to the radio group wrapper when kind is toggle.
-     */
-    groupClassName?: string;
-    /**
-     * The default option value.
-     */
-    initialChoice: string;
-    /**
-     * The radio group kind.
-     *
-     * @default 'regular
-     */
-    kind?: 'regular' | 'toggle';
-    /**
-     * The legend position.
-     *
-     * @default 'inline'
-     */
-    legendPosition?: FieldsetProps['legendPosition'];
-    /**
-     * A callback function to execute when choice is changed.
-     */
-    onChange?: RadioGroupCallback;
-    /**
-     * A callback function to execute when clicking on a choice.
-     */
-    onClick?: RadioGroupCallback;
-    /**
-     * Set additional classnames to the labelled field wrapper.
-     */
-    optionClassName?: string;
-    /**
-     * The options.
-     */
-    options: RadioGroupOption[];
-  };
-
-/**
- * RadioGroup component
- *
- * Render a group of labelled radio buttons.
- */
-export const RadioGroup: FC<RadioGroupProps> = ({
-  className,
-  groupClassName = '',
-  initialChoice,
-  kind = 'regular',
-  labelPosition,
-  labelSize,
-  legendClassName,
-  legendPosition = 'inline',
-  onChange,
-  optionClassName = '',
-  options,
-  ...props
-}) => {
-  const [selectedChoice, setSelectedChoice] =
-    useStateChange<string>(initialChoice);
-  const isToggle = kind === 'toggle';
-  const alignmentModifier = `wrapper--${legendPosition}`;
-  const toggleModifier = isToggle ? 'wrapper--toggle' : 'wrapper--regular';
-  const fieldsetClass = `${styles.wrapper} ${styles[alignmentModifier]} ${styles[toggleModifier]} ${className}`;
-
-  /**
-   * Update the selected choice on click or change event.
-   */
-  const updateChoice = (
-    e:
-      | ChangeEvent<HTMLInputElement>
-      | MouseEvent<HTMLInputElement, globalThis.MouseEvent>
-  ) => {
-    const input = e.target as HTMLInputElement;
-    onChange &&
-      onChange({
-        choices: { new: input.value, prev: selectedChoice },
-        updateChoice: setSelectedChoice,
-      });
-    if (e.type === 'change') setSelectedChoice(input.value);
-  };
-
-  /**
-   * Retrieve an array of radio buttons.
-   *
-   * @returns {JSX.Element[]} The radio buttons.
-   */
-  const getOptions = (): JSX.Element[] => {
-    return options.map((option) => (
-      <LabelledBooleanField
-        {...option}
-        key={option.id}
-        checked={selectedChoice === option.value}
-        className={`${styles.option} ${optionClassName}`}
-        fieldClassName={styles.radio}
-        hidden={isToggle}
-        labelClassName={styles.label}
-        labelPosition={kind === 'toggle' ? 'right' : labelPosition}
-        labelSize={labelSize}
-        onChange={updateChoice}
-        onClick={updateChoice}
-        type="radio"
-      />
-    ));
-  };
-
-  return (
-    <Fieldset
-      {...props}
-      className={fieldsetClass}
-      legendClassName={`${styles.legend} ${legendClassName}`}
-      legendPosition={legendPosition}
-      role="radiogroup"
-    >
-      {isToggle ? (
-        <span className={`${styles.toggle} ${groupClassName}`}>
-          {getOptions()}
-        </span>
-      ) : (
-        getOptions()
-      )}
-    </Fieldset>
-  );
-};
diff --git a/src/components/molecules/forms/radio-group/index.ts b/src/components/molecules/forms/radio-group/index.ts
new file mode 100644
index 0000000..ed40543
--- /dev/null
+++ b/src/components/molecules/forms/radio-group/index.ts
@@ -0,0 +1 @@
+export * from './radio-group';
diff --git a/src/components/molecules/forms/radio-group.fixture.tsx b/src/components/molecules/forms/radio-group/radio-group.fixture.tsx
index 686467c..f1cbc05 100644
--- a/src/components/molecules/forms/radio-group.fixture.tsx
+++ b/src/components/molecules/forms/radio-group/radio-group.fixture.tsx
@@ -1,4 +1,4 @@
-import { RadioGroupOption } from './radio-group';
+import { RadioGroupItem } from './radio-group';
 
 export const getOptions = (name: string = 'group1') => {
   const value1 = 'option1';
@@ -7,34 +7,29 @@ export const getOptions = (name: string = 'group1') => {
   const value4 = 'option4';
   const value5 = 'option5';
 
-  const options: RadioGroupOption[] = [
+  const options: RadioGroupItem[] = [
     {
       id: `${name}-${value1}`,
-      name: name,
       label: 'Option 1',
       value: value1,
     },
     {
       id: `${name}-${value2}`,
-      name: name,
       label: 'Option 2',
       value: value2,
     },
     {
       id: `${name}-${value3}`,
-      name: name,
       label: 'Option 3',
       value: value3,
     },
     {
       id: `${name}-${value4}`,
-      name: name,
       label: 'Option 4',
       value: value4,
     },
     {
       id: `${name}-${value5}`,
-      name: name,
       label: 'Option 5',
       value: value5,
     },
@@ -44,4 +39,3 @@ export const getOptions = (name: string = 'group1') => {
 };
 
 export const initialChoice = 'option2';
-export const legend = 'Options:';
diff --git a/src/components/molecules/forms/radio-group/radio-group.module.scss b/src/components/molecules/forms/radio-group/radio-group.module.scss
new file mode 100644
index 0000000..ad09c78
--- /dev/null
+++ b/src/components/molecules/forms/radio-group/radio-group.module.scss
@@ -0,0 +1,9 @@
+.group {
+  &--inline {
+    .option {
+      &:not(:last-of-type) {
+        margin-right: var(--spacing-xs);
+      }
+    }
+  }
+}
diff --git a/src/components/molecules/forms/radio-group/radio-group.stories.tsx b/src/components/molecules/forms/radio-group/radio-group.stories.tsx
new file mode 100644
index 0000000..8e77c6e
--- /dev/null
+++ b/src/components/molecules/forms/radio-group/radio-group.stories.tsx
@@ -0,0 +1,75 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Legend } from '../../../atoms';
+import { RadioGroup as RadioGroupComponent } from './radio-group';
+import { getOptions, initialChoice } from './radio-group.fixture';
+import { ChangeEventHandler, useCallback, useState } from 'react';
+
+/**
+ * RadioGroup - Storybook Meta
+ */
+export default {
+  title: 'Molecules/Forms',
+  component: RadioGroupComponent,
+  args: {},
+  argTypes: {
+    onChange: {
+      control: {
+        type: null,
+      },
+      description: 'A callback function to handle selected option change.',
+      table: {
+        category: 'Events',
+      },
+      type: {
+        name: 'function',
+        required: false,
+      },
+    },
+    options: {
+      description: 'An array of radio option object.',
+      type: {
+        name: 'object',
+        required: true,
+        value: {},
+      },
+    },
+    value: {
+      control: {
+        type: 'text',
+      },
+      description: 'The default selected option id.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+  },
+} as ComponentMeta<typeof RadioGroupComponent>;
+
+const Template: ComponentStory<typeof RadioGroupComponent> = ({
+  value,
+  ...args
+}) => {
+  const [selection, setSelection] = useState(value);
+
+  const handleChange: ChangeEventHandler<HTMLInputElement> = useCallback(
+    (e) => {
+      setSelection(e.target.value);
+    },
+    []
+  );
+
+  return (
+    <RadioGroupComponent {...args} onSwitch={handleChange} value={selection} />
+  );
+};
+
+/**
+ * Radio Group Story
+ */
+export const RadioGroup = Template.bind({});
+RadioGroup.args = {
+  legend: <Legend>Options:</Legend>,
+  options: getOptions('group1'),
+  value: initialChoice,
+};
diff --git a/src/components/molecules/forms/radio-group/radio-group.test.tsx b/src/components/molecules/forms/radio-group/radio-group.test.tsx
new file mode 100644
index 0000000..dba1541
--- /dev/null
+++ b/src/components/molecules/forms/radio-group/radio-group.test.tsx
@@ -0,0 +1,59 @@
+import { render, screen } from '../../../../../tests/utils';
+import { Legend } from '../../../atoms';
+import { RadioGroup } from './radio-group';
+import { getOptions, initialChoice } from './radio-group.fixture';
+
+const doNothing = () => {
+  /* Do nothing. */
+};
+
+describe('RadioGroup', () => {
+  it('renders a legend', () => {
+    const legend = 'Options:';
+
+    render(
+      <RadioGroup
+        legend={<Legend>{legend}</Legend>}
+        name="possimus"
+        onSwitch={doNothing}
+        options={getOptions()}
+        value={initialChoice}
+      />
+    );
+
+    expect(
+      screen.getByRole('radiogroup', { name: legend })
+    ).toBeInTheDocument();
+  });
+
+  it('renders the correct number of radio', () => {
+    const options = getOptions();
+
+    render(
+      <RadioGroup
+        name="eaque"
+        onSwitch={doNothing}
+        options={options}
+        value={initialChoice}
+      />
+    );
+
+    expect(screen.getAllByRole('radio')).toHaveLength(options.length);
+  });
+
+  it('can render an inlined radio group', () => {
+    const options = getOptions();
+
+    render(
+      <RadioGroup
+        isInline
+        name="architecto"
+        onSwitch={doNothing}
+        options={options}
+        value={initialChoice}
+      />
+    );
+
+    expect(screen.getByRole('radiogroup')).toHaveClass('group--inline');
+  });
+});
diff --git a/src/components/molecules/forms/radio-group/radio-group.tsx b/src/components/molecules/forms/radio-group/radio-group.tsx
new file mode 100644
index 0000000..0ca4dac
--- /dev/null
+++ b/src/components/molecules/forms/radio-group/radio-group.tsx
@@ -0,0 +1,110 @@
+import { ForwardRefRenderFunction, forwardRef } from 'react';
+import {
+  Fieldset,
+  FieldsetProps,
+  Label,
+  LabelProps,
+  Radio,
+  RadioProps,
+} from '../../../atoms';
+import { LabelledField } from '../labelled-field';
+import styles from './radio-group.module.scss';
+
+export type RadioGroupItem = {
+  /**
+   * The item id.
+   */
+  id: string;
+  /**
+   * Should the item be disabled?
+   */
+  isDisabled?: boolean;
+  /**
+   * The item label.
+   */
+  label: LabelProps['children'];
+  /**
+   * The item value.
+   */
+  value: string;
+};
+
+export type RadioGroupProps = Omit<FieldsetProps, 'children' | 'role'> & {
+  /**
+   * Should we display the radio buttons inlined?
+   *
+   * @default false
+   */
+  isInline?: boolean;
+  /**
+   * The radio group name.
+   */
+  name: string;
+  /**
+   * A function to handle selection change.
+   */
+  onSwitch?: RadioProps['onChange'];
+  /**
+   * The options.
+   */
+  options: RadioGroupItem[];
+  /**
+   * The selected value. It should match a RadioGroupItem value or be undefined.
+   */
+  value?: RadioGroupItem['value'];
+};
+
+const RadioGroupWithRef: ForwardRefRenderFunction<
+  HTMLFieldSetElement,
+  RadioGroupProps
+> = (
+  {
+    className = '',
+    isInline = false,
+    name,
+    onSwitch,
+    options,
+    value,
+    ...props
+  },
+  ref
+) => {
+  const layoutModifier = isInline ? styles['group--inline'] : '';
+  const groupClass = `${layoutModifier} ${className}`;
+
+  return (
+    <Fieldset
+      {...props}
+      className={groupClass}
+      isInline={isInline}
+      ref={ref}
+      role="radiogroup"
+    >
+      {options.map((option) => (
+        <LabelledField
+          className={styles.option}
+          field={
+            <Radio
+              id={option.id}
+              isChecked={value === option.value}
+              name={name}
+              onChange={onSwitch}
+              value={option.value}
+            />
+          }
+          isInline
+          isReversedOrder
+          key={option.id}
+          label={<Label htmlFor={option.id}>{option.label}</Label>}
+        />
+      ))}
+    </Fieldset>
+  );
+};
+
+/**
+ * RadioGroup component
+ *
+ * Render a group of labelled radio buttons.
+ */
+export const RadioGroup = forwardRef(RadioGroupWithRef);
diff --git a/src/components/molecules/forms/switch/index.ts b/src/components/molecules/forms/switch/index.ts
new file mode 100644
index 0000000..4dd2256
--- /dev/null
+++ b/src/components/molecules/forms/switch/index.ts
@@ -0,0 +1 @@
+export * from './switch';
diff --git a/src/components/molecules/forms/switch/switch.module.scss b/src/components/molecules/forms/switch/switch.module.scss
new file mode 100644
index 0000000..44244e7
--- /dev/null
+++ b/src/components/molecules/forms/switch/switch.module.scss
@@ -0,0 +1,105 @@
+@use "../../../../styles/abstracts/functions" as fun;
+@use "../../../../styles/abstracts/mixins" as mix;
+
+.fieldset {
+  position: relative;
+}
+
+.switch {
+  display: inline-flex;
+  flex-flow: row wrap;
+  align-items: center;
+  width: fit-content;
+  background: var(--color-shadow-light);
+  border: fun.convert-px(2) solid var(--color-primary);
+  border-radius: fun.convert-px(32);
+  box-shadow:
+    inset 0 0 fun.convert-px(1) fun.convert-px(1) var(--color-shadow-dark),
+    inset 0 0 fun.convert-px(3) fun.convert-px(2) var(--color-shadow);
+
+  &:focus-within {
+    outline: fun.convert-px(2) solid var(--color-primary-light);
+  }
+}
+
+.label {
+  display: flex;
+  align-items: center;
+  min-height: 5ex;
+  padding: fun.convert-px(6) var(--spacing-2xs);
+  border-top: fun.convert-px(2) solid var(--color-border);
+  border-bottom: fun.convert-px(2) solid var(--color-border);
+  transition: all 0.15s linear 0s;
+
+  @include mix.pointer("fine") {
+    min-height: 3ex;
+  }
+}
+
+.item:first-of-type {
+  .label {
+    border-left: fun.convert-px(2) solid var(--color-border);
+    border-top-left-radius: fun.convert-px(32);
+    border-bottom-left-radius: fun.convert-px(32);
+  }
+}
+
+.item:last-of-type {
+  .label {
+    border-right: fun.convert-px(2) solid var(--color-border);
+    border-top-right-radius: fun.convert-px(32);
+    border-bottom-right-radius: fun.convert-px(32);
+  }
+}
+
+.radio {
+  &:checked + .label {
+    background: var(--color-primary);
+    box-shadow:
+      inset 0 0 fun.convert-px(1) fun.convert-px(2) var(--color-primary-dark),
+      inset 0 0 fun.convert-px(3) fun.convert-px(2) var(--color-primary-darker);
+    color: var(--color-fg-inverted);
+
+    svg {
+      fill: var(--color-fg-inverted);
+      stroke: var(--color-fg-inverted);
+    }
+  }
+
+  &:not(:checked) + .label {
+    svg {
+      fill: var(--color-primary-darker);
+    }
+  }
+
+  &[disabled] + .label {
+    opacity: 0.8;
+  }
+}
+
+.radio:not([disabled]) {
+  &:checked + .label:hover {
+    background: var(--color-primary-lighter);
+    box-shadow:
+      inset 0 0 fun.convert-px(1) fun.convert-px(2) var(--color-primary-light),
+      inset 0 0 fun.convert-px(3) fun.convert-px(2) var(--color-primary);
+  }
+
+  &:not(:checked) + .label:hover {
+    background: var(--color-shadow-light);
+    box-shadow:
+      inset 0 0 0 fun.convert-px(1) var(--color-shadow-dark),
+      inset 0 0 fun.convert-px(3) fun.convert-px(2) var(--color-shadow);
+  }
+
+  &:not(:checked):focus + .label {
+    background: var(--color-shadow-light);
+  }
+
+  &:checked:focus + .label {
+    background: var(--color-primary-lighter);
+    box-shadow:
+      inset 0 0 fun.convert-px(1) fun.convert-px(2) var(--color-primary-light),
+      inset 0 0 fun.convert-px(3) fun.convert-px(2) var(--color-primary);
+  }
+}
diff --git a/src/components/molecules/forms/switch/switch.stories.tsx b/src/components/molecules/forms/switch/switch.stories.tsx
new file mode 100644
index 0000000..eb169ad
--- /dev/null
+++ b/src/components/molecules/forms/switch/switch.stories.tsx
@@ -0,0 +1,48 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Switch as SwitchComponent, SwitchOption } from './switch';
+import { ChangeEventHandler, useCallback, useState } from 'react';
+import { Legend } from '../../../atoms';
+
+/**
+ * Switch - Storybook Meta
+ */
+export default {
+  title: 'Molecules/Forms',
+  component: SwitchComponent,
+  args: {},
+  argTypes: {},
+} as ComponentMeta<typeof SwitchComponent>;
+
+const Template: ComponentStory<typeof SwitchComponent> = ({
+  value,
+  ...args
+}) => {
+  const [selection, setSelection] = useState(value);
+
+  const handleChange: ChangeEventHandler<HTMLInputElement> = useCallback(
+    (e) => {
+      setSelection(e.target.value);
+    },
+    []
+  );
+
+  return (
+    <SwitchComponent {...args} onSwitch={handleChange} value={selection} />
+  );
+};
+
+const items: [SwitchOption, SwitchOption] = [
+  { id: 'option-1', label: 'Choice 1', value: 'option-1' },
+  { id: 'option-2', label: 'Choice 2', value: 'option-2' },
+];
+
+/**
+ * Radio Group Story
+ */
+export const Switch = Template.bind({});
+Switch.args = {
+  items,
+  legend: <Legend>Choose the best option:</Legend>,
+  name: 'example',
+  value: items[0].value,
+};
diff --git a/src/components/molecules/forms/switch/switch.test.tsx b/src/components/molecules/forms/switch/switch.test.tsx
new file mode 100644
index 0000000..6ccd525
--- /dev/null
+++ b/src/components/molecules/forms/switch/switch.test.tsx
@@ -0,0 +1,49 @@
+import { render, screen } from '../../../../../tests/utils';
+import { Legend } from '../../../atoms';
+import { Switch, SwitchOption } from './switch';
+
+const doNothing = () => {
+  /* Do nothing. */
+};
+
+const items: [SwitchOption, SwitchOption] = [
+  { id: 'item-1', label: 'Option 1', value: 'option-1' },
+  { id: 'item-2', label: 'Option 2', value: 'option-2' },
+];
+
+describe('Switch', () => {
+  it('renders a radio group with two choices', () => {
+    const legend = 'Options:';
+
+    render(
+      <Switch
+        items={items}
+        legend={<Legend>{legend}</Legend>}
+        name="possimus"
+        onSwitch={doNothing}
+        value={items[0].value}
+      />
+    );
+
+    expect(
+      screen.getByRole('radiogroup', { name: legend })
+    ).toBeInTheDocument();
+    expect(screen.getAllByRole('radio')).toHaveLength(items.length);
+  });
+
+  it('can render a disabled switch', () => {
+    render(
+      <Switch
+        isDisabled
+        items={items}
+        name="architecto"
+        onSwitch={doNothing}
+        value={items[1].value}
+      />
+    );
+
+    const radios = screen.getAllByRole<HTMLInputElement>('radio');
+    expect(radios.every((radio) => radio.disabled)).toBe(true);
+    expect(screen.getByRole('radiogroup')).toBeDisabled();
+  });
+});
diff --git a/src/components/molecules/forms/switch/switch.tsx b/src/components/molecules/forms/switch/switch.tsx
new file mode 100644
index 0000000..d340a0c
--- /dev/null
+++ b/src/components/molecules/forms/switch/switch.tsx
@@ -0,0 +1,132 @@
+import type { FC, ChangeEventHandler, ReactNode, ReactElement } from 'react';
+import {
+  Fieldset,
+  type FieldsetProps,
+  LabelProps,
+  RadioProps,
+  Label,
+  Radio,
+} from '../../../atoms';
+import styles from './switch.module.scss';
+import { TooltipProps } from '../../tooltip';
+
+type SwitchItemProps = Omit<LabelProps, 'children' | 'htmlFor' | 'isRequired'> &
+  Pick<RadioProps, 'isDisabled' | 'name'> & {
+    /**
+     * The item id.
+     */
+    id: string;
+    /**
+     * Is the item selected?
+     */
+    isSelected?: boolean;
+    /**
+     * The label used to describe the switch item.
+     */
+    label: ReactNode;
+    /**
+     * The event handler on value change.
+     */
+    onSwitch: ChangeEventHandler<HTMLInputElement>;
+    /**
+     * The item value.
+     */
+    value: string;
+  };
+
+/**
+ * SwitchItem component.
+ */
+const SwitchItem: FC<SwitchItemProps> = ({
+  className = '',
+  id,
+  isDisabled = false,
+  isSelected = false,
+  label,
+  name,
+  onSwitch,
+  value,
+  ...props
+}) => {
+  const selectedItemClass = isSelected ? styles['item--selected'] : '';
+  const disabledItemClass = isDisabled ? styles['item--disabled'] : '';
+  const itemClass = `${styles.item} ${selectedItemClass} ${disabledItemClass} ${className}`;
+
+  return (
+    <Label {...props} className={itemClass} htmlFor={id}>
+      <Radio
+        className={styles.radio}
+        id={id}
+        isChecked={isSelected}
+        isDisabled={isDisabled}
+        isHidden
+        name={name}
+        onChange={onSwitch}
+        value={value}
+      />
+      <span className={styles.label}>{label}</span>
+    </Label>
+  );
+};
+
+export type SwitchOption = Pick<SwitchItemProps, 'id' | 'label' | 'value'>;
+
+export type SwitchProps = Omit<FieldsetProps, 'children'> & {
+  /**
+   * The switch items.
+   */
+  items: [SwitchOption, SwitchOption];
+  /**
+   * The switch group name.
+   */
+  name: string;
+  /**
+   * A function to handle selection change.
+   */
+  onSwitch: ChangeEventHandler<HTMLInputElement>;
+  /**
+   * A tooltip to display before switch options.
+   */
+  tooltip?: ReactElement<TooltipProps>;
+  /**
+   * The selected item value.
+   */
+  value: SwitchOption['value'];
+};
+
+/**
+ * Switch component.
+ */
+export const Switch: FC<SwitchProps> = ({
+  className = '',
+  isDisabled = false,
+  items,
+  name,
+  onSwitch,
+  tooltip,
+  value,
+  ...props
+}) => {
+  return (
+    <Fieldset
+      {...props}
+      className={`${styles.fieldset} ${className}`}
+      isDisabled={isDisabled}
+      role="radiogroup"
+    >
+      {tooltip}
+      <div className={styles.switch}>
+        {items.map((item) => (
+          <SwitchItem
+            {...item}
+            isDisabled={isDisabled}
+            isSelected={value === item.value}
+            key={item.id}
+            name={name}
+            onSwitch={onSwitch}
+          />
+        ))}
+      </div>
+    </Fieldset>
+  );
+};
diff --git a/src/components/molecules/forms/theme-toggle.stories.tsx b/src/components/molecules/forms/theme-toggle.stories.tsx
deleted file mode 100644
index 40f4d8c..0000000
--- a/src/components/molecules/forms/theme-toggle.stories.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { ThemeToggle } from './theme-toggle';
-
-/**
- * ThemeToggle - Storybook Meta
- */
-export default {
-  title: 'Molecules/Forms/Toggle',
-  component: ThemeToggle,
-  argTypes: {
-    bodyClassName: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the fieldset body wrapper.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    groupClassName: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the radio group wrapper.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    legendClassName: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the legend.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-  },
-} as ComponentMeta<typeof ThemeToggle>;
-
-const Template: ComponentStory<typeof ThemeToggle> = (args) => (
-  <ThemeToggle {...args} />
-);
-
-/**
- * Toggle Stories - Theme
- */
-export const Theme = Template.bind({});
diff --git a/src/components/molecules/forms/theme-toggle.test.tsx b/src/components/molecules/forms/theme-toggle.test.tsx
deleted file mode 100644
index aae627a..0000000
--- a/src/components/molecules/forms/theme-toggle.test.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { render, screen } from '../../../../tests/utils';
-import { ThemeToggle } from './theme-toggle';
-
-describe('ThemeToggle', () => {
-  it('renders a toggle component', () => {
-    render(<ThemeToggle />);
-    expect(
-      screen.getByRole('radiogroup', {
-        name: /Theme:/i,
-      })
-    ).toBeInTheDocument();
-  });
-});
diff --git a/src/components/molecules/forms/theme-toggle.tsx b/src/components/molecules/forms/theme-toggle.tsx
deleted file mode 100644
index 25e2a39..0000000
--- a/src/components/molecules/forms/theme-toggle.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import { useTheme } from 'next-themes';
-import { FC } from 'react';
-import { useIntl } from 'react-intl';
-import { Moon, Sun } from '../../atoms';
-import {
-  RadioGroup,
-  type RadioGroupCallback,
-  type RadioGroupCallbackProps,
-  type RadioGroupOption,
-  type RadioGroupProps,
-} from './radio-group';
-
-export type ThemeToggleProps = Pick<
-  RadioGroupProps,
-  'bodyClassName' | 'groupClassName' | 'legendClassName' | 'legendPosition'
->;
-
-/**
- * ThemeToggle component
- *
- * Render a Toggle component to set theme.
- */
-export const ThemeToggle: FC<ThemeToggleProps> = (props) => {
-  const intl = useIntl();
-  const { resolvedTheme, setTheme } = useTheme();
-  const isDarkTheme = resolvedTheme === 'dark';
-
-  /**
-   * Update the theme.
-   *
-   * @param {string} theme - A theme name.
-   */
-  const updateTheme = (theme: string) => {
-    setTheme(theme === 'light' ? 'light' : 'dark');
-  };
-
-  /**
-   * Handle change events.
-   *
-   * @param {RadioGroupCallbackProps} props - An object with choices.
-   */
-  const handleChange: RadioGroupCallback = ({
-    choices,
-    updateChoice,
-  }: RadioGroupCallbackProps) => {
-    if (choices.new === choices.prev) {
-      const newTheme = choices.new === 'light' ? 'dark' : 'light';
-      updateChoice(newTheme);
-      updateTheme(newTheme);
-    } else {
-      updateTheme(choices.new);
-    }
-  };
-
-  const themeLabel = intl.formatMessage({
-    defaultMessage: 'Theme:',
-    description: 'ThemeToggle: theme label',
-    id: 'suXOBu',
-  });
-  const lightThemeLabel = intl.formatMessage({
-    defaultMessage: 'Light theme',
-    description: 'ThemeToggle: light theme label',
-    id: 'Ygea7s',
-  });
-  const darkThemeLabel = intl.formatMessage({
-    defaultMessage: 'Dark theme',
-    description: 'ThemeToggle: dark theme label',
-    id: '2QwvtS',
-  });
-
-  const options: RadioGroupOption[] = [
-    {
-      id: 'theme-light',
-      label: (
-        <>
-          <span className="screen-reader-text">{lightThemeLabel}</span>
-          <Sun />
-        </>
-      ),
-      name: 'theme',
-      value: 'light',
-    },
-    {
-      id: 'theme-dark',
-      label: (
-        <>
-          <span className="screen-reader-text">{darkThemeLabel}</span>
-          <Moon />
-        </>
-      ),
-      name: 'theme',
-      value: 'dark',
-    },
-  ];
-
-  return (
-    <RadioGroup
-      {...props}
-      initialChoice={isDarkTheme ? 'dark' : 'light'}
-      kind="toggle"
-      legend={themeLabel}
-      onChange={handleChange}
-      options={options}
-    />
-  );
-};