diff --git a/packages/react/src/components/Forms/DatePicker/DateField.tsx b/packages/react/src/components/Forms/DatePicker/DateField.tsx
index 26e890e..f6681ab 100644
--- a/packages/react/src/components/Forms/DatePicker/DateField.tsx
+++ b/packages/react/src/components/Forms/DatePicker/DateField.tsx
@@ -12,8 +12,7 @@ import {
 } from "@react-stately/datepicker";
 import { createCalendar, DateValue } from "@internationalized/date";
 import classNames from "classnames";
-import { Button } from ":/components/Button";
-import { useCunningham } from ":/components/Provider";
+import { LabelledBox, Props } from ":/components/Forms/LabelledBox";
 
 interface DateSegmentProps {
   currentSegment: DateSegment;
@@ -21,7 +20,7 @@ interface DateSegmentProps {
   state: DateFieldState;
 }
 
-export const DateSegmentInput = ({
+const DateSegmentInput = ({
   currentSegment,
   previousSegment,
   state,
@@ -43,7 +42,7 @@ export const DateSegmentInput = ({
   );
 };
 
-export const DateField = (props: AriaDatePickerProps<DateValue>) => {
+const DateField = (props: AriaDatePickerProps<DateValue>) => {
   const { locale } = useLocale();
   const state = useDateFieldState({
     ...props,
@@ -66,3 +65,21 @@ export const DateField = (props: AriaDatePickerProps<DateValue>) => {
     </div>
   );
 };
+
+interface DateFieldBoxProps
+  extends Props,
+    Omit<AriaDatePickerProps<DateValue>, "label"> {}
+
+const DateFieldBox = ({ ...props }: DateFieldBoxProps) => (
+  <LabelledBox {...props}>
+    <div
+      className={classNames("c__date-picker__inner", {
+        "c__date-picker__inner--collapsed": props.labelAsPlaceholder,
+      })}
+    >
+      <DateField {...props} />
+    </div>
+  </LabelledBox>
+);
+
+export default DateFieldBox;
diff --git a/packages/react/src/components/Forms/DatePicker/index.scss b/packages/react/src/components/Forms/DatePicker/index.scss
index 4cee72a..e22b5da 100644
--- a/packages/react/src/components/Forms/DatePicker/index.scss
+++ b/packages/react/src/components/Forms/DatePicker/index.scss
@@ -39,6 +39,17 @@
     user-select: none;
     min-width: 0;
 
+    &--collapsed {
+      clip: rect(1px, 1px, 1px, 1px);
+      clip-path: inset(50%);
+      height: 1px;
+      width: 1px;
+      margin: -1px;
+      overflow: hidden;
+      padding: 0;
+      position: absolute
+    }
+
     &--clickable {
       cursor: pointer;
     }