diff --git a/ui/components/datepickers/base/_index.scss b/ui/components/datepickers/base/_index.scss
index d402fb19bf..2cd874c6ba 100644
--- a/ui/components/datepickers/base/_index.scss
+++ b/ui/components/datepickers/base/_index.scss
@@ -119,6 +119,11 @@
   }
 }
 
+.slds-has-error .slds-datepicker__filter .slds-select {
+  border: $border-width-thin solid $color-border-input;
+  box-shadow: none;
+}
+
 /**
  * @summary Indicates days that are in previous/next months
  *
diff --git a/ui/components/datepickers/base/example.jsx b/ui/components/datepickers/base/example.jsx
index 9a88a42241..cf4e1c38e9 100644
--- a/ui/components/datepickers/base/example.jsx
+++ b/ui/components/datepickers/base/example.jsx
@@ -428,5 +428,26 @@ export let states = [
         />
       </FormElement>
     )
+  },
+  {
+    id: 'datepicker-with-error',
+    label: 'Date Picker has Error',
+    element: (
+      <FormElement
+        className="slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open slds-has-error"
+        label="Date"
+        inputId={dateInputId}
+        inputIcon="right"
+        dropdown={<DatePicker todayActive />}
+      >
+        <Input id={dateInputId} placeholder=" " />
+        <ButtonIcon
+          className="slds-input__icon slds-input__icon_right"
+          symbol="event"
+          assistiveText="Select a date"
+          title="Select a date"
+        />
+      </FormElement>
+    )
   }
 ];