diff --git a/docs/src/pages/components/TimePicker.svx b/docs/src/pages/components/TimePicker.svx
index a70b4ca5..822abd82 100644
--- a/docs/src/pages/components/TimePicker.svx
+++ b/docs/src/pages/components/TimePicker.svx
@@ -59,7 +59,21 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
   </TimePickerSelect>
 </TimePicker>
 
-### Disabled
+### Invalid state
+
+<TimePicker invalid invalidText="A valid value is required" labelText="Cron job" placeholder="hh:mm">
+  <TimePickerSelect value="PM">
+    <SelectItem value="am" text="AM" />
+    <SelectItem value="pm" text="PM" />
+  </TimePickerSelect>
+  <TimePickerSelect value="PDT">
+    <SelectItem value="pdt" text="PDT" />
+    <SelectItem value="gmt" text="GMT" />
+  </TimePickerSelect>
+</TimePicker>
+
+
+### Disabled state
 
 <TimePicker labelText="Cron job" placeholder="hh:mm" disabled>
   <TimePickerSelect value="PM" disabled>
diff --git a/src/TimePicker/TimePicker.svelte b/src/TimePicker/TimePicker.svelte
index bdac8fae..00da512d 100644
--- a/src/TimePicker/TimePicker.svelte
+++ b/src/TimePicker/TimePicker.svelte
@@ -67,6 +67,7 @@
   <div
     class:bx--time-picker="{true}"
     class:bx--time-picker--light="{light}"
+    class:bx--time-picker--invalid="{invalid}"
     class:bx--time-picker--sm="{size === 'sm'}"
     class:bx--time-picker--xl="{size === 'xl'}"
     class:bx--select--light="{light}"