diff --git a/packages/react/src/components/Forms/LabelledBox/index.scss b/packages/react/src/components/Forms/LabelledBox/index.scss
new file mode 100644
index 0000000..4d94d19
--- /dev/null
+++ b/packages/react/src/components/Forms/LabelledBox/index.scss
@@ -0,0 +1,31 @@
+.labelled-box {
+  height: 100%;
+  width: 100%;
+  position: relative;
+  box-sizing: border-box;
+
+  %text-style {
+    font-size: var(--c--components--forms-input--font-size);
+    font-weight: var(--c--components--forms-input--font-weight);
+  }
+
+  label {
+    position: absolute;
+    font-size: var(--c--theme--font--sizes--s);
+    left: 0;
+    top: 0.5rem;
+    transition: all var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out);
+    color: var(--c--theme--colors--greyscale-900);
+    opacity: 0.8;
+
+    &.placeholder {
+      @extend %text-style;
+      top: 16px;
+    }
+  }
+
+  &__children {
+    padding: 1.5rem 0 0 0;
+    display: flex;
+  }
+}
diff --git a/packages/react/src/components/Forms/LabelledBox/index.stories.tsx b/packages/react/src/components/Forms/LabelledBox/index.stories.tsx
new file mode 100644
index 0000000..bf07006
--- /dev/null
+++ b/packages/react/src/components/Forms/LabelledBox/index.stories.tsx
@@ -0,0 +1,20 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import React from "react";
+import { LabelledBox } from ":/components/Forms/LabelledBox/index";
+
+export default {
+  title: "Components/Forms/LabelledBox",
+  component: LabelledBox,
+} as ComponentMeta<typeof LabelledBox>;
+
+const Template: ComponentStory<typeof LabelledBox> = (args) => (
+  <div style={{ height: "3.5rem" }}>
+    <LabelledBox {...args} />
+  </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  label: "Your label here",
+  children: <span className="clr-greyscale-800">Hello world</span>,
+};
diff --git a/packages/react/src/components/Forms/LabelledBox/index.tsx b/packages/react/src/components/Forms/LabelledBox/index.tsx
new file mode 100644
index 0000000..5079ee9
--- /dev/null
+++ b/packages/react/src/components/Forms/LabelledBox/index.tsx
@@ -0,0 +1,31 @@
+import React, { PropsWithChildren } from "react";
+
+export interface Props extends PropsWithChildren {
+  label?: string;
+  labelAsPlaceholder?: boolean;
+  htmlFor?: string;
+  labelId?: string;
+}
+
+export const LabelledBox = ({
+  children,
+  label,
+  labelAsPlaceholder,
+  htmlFor,
+  labelId,
+}: Props) => {
+  return (
+    <div className="labelled-box">
+      {label && (
+        <label
+          className={labelAsPlaceholder ? "placeholder" : ""}
+          htmlFor={htmlFor}
+          id={labelId}
+        >
+          {label}
+        </label>
+      )}
+      <div className="labelled-box__children">{children}</div>
+    </div>
+  );
+};
diff --git a/packages/react/src/index.scss b/packages/react/src/index.scss
index e58fc1e..154b440 100644
--- a/packages/react/src/index.scss
+++ b/packages/react/src/index.scss
@@ -7,6 +7,7 @@
 @import './components/Forms/Field';
 @import './components/Forms/Radio';
 @import './components/Forms/Input';
+@import './components/Forms/LabelledBox';
 @import './components/Loader';
 @import './components/Pagination';