diff --git a/.changeset/timepicker-add-clearable-option.md b/.changeset/timepicker-add-clearable-option.md
new file mode 100644
index 000000000..12ff3830c
--- /dev/null
+++ b/.changeset/timepicker-add-clearable-option.md
@@ -0,0 +1,5 @@
+---
+'react-magma-dom': patch
+---
+
+feat(TimePicker): Added opportunity to clear Timepicker
diff --git a/packages/react-magma-dom/src/components/TimePicker/TimePicker.stories.tsx b/packages/react-magma-dom/src/components/TimePicker/TimePicker.stories.tsx
index 4ceef62ad..3cf14b807 100644
--- a/packages/react-magma-dom/src/components/TimePicker/TimePicker.stories.tsx
+++ b/packages/react-magma-dom/src/components/TimePicker/TimePicker.stories.tsx
@@ -3,6 +3,7 @@ import { TimePicker, TimePickerProps } from '.';
 import { Card, CardBody } from '../Card';
 import { Story, Meta } from '@storybook/react/types-6-0';
 import { LabelPosition } from '../Label';
+import { Button } from '../Button';
 
 const Template: Story<TimePickerProps> = args => (
   <TimePicker {...args} labelText="Time Due" />
@@ -57,3 +58,19 @@ Inverse.decorators = [
     </Card>
   ),
 ];
+
+export const Clearable = () => {
+  const [timeValue, setTimeValue] = React.useState<string | undefined>('');
+
+  function handleOnChange(value) {
+    setTimeValue(value);
+  }
+
+  return (
+    <>
+      <TimePicker labelText="Time Due" onChange={handleOnChange} value={timeValue} />
+      <br />
+      <Button onClick={() => handleOnChange(undefined)}>Clear Time</Button>
+    </>
+  );
+};
\ No newline at end of file
diff --git a/packages/react-magma-dom/src/components/TimePicker/TimePicker.test.js b/packages/react-magma-dom/src/components/TimePicker/TimePicker.test.js
index ef8f4a6ed..11ca14b53 100644
--- a/packages/react-magma-dom/src/components/TimePicker/TimePicker.test.js
+++ b/packages/react-magma-dom/src/components/TimePicker/TimePicker.test.js
@@ -372,6 +372,17 @@ describe('TimePicker', () => {
       expect(getByTestId('amPmTimeButton')).toHaveTextContent('AM');
     });
 
+    it('should allow for the undefined value', () => {
+      const value = undefined;
+      const { getByTestId } = render(
+        <TimePicker label="label" value={value} />
+      );
+
+      expect(getByTestId('hoursTimeInput').value).toEqual('');
+      expect(getByTestId('minutesTimeInput').value).toEqual('');
+      expect(getByTestId('amPmTimeButton')).toHaveTextContent('AM');
+    });
+
     it('should call the onChange when the passed in value is valid', () => {
       const onChange = jest.fn();
       const value = '12:30 PM';
diff --git a/packages/react-magma-dom/src/components/TimePicker/useTimePicker.ts b/packages/react-magma-dom/src/components/TimePicker/useTimePicker.ts
index 2dca2a08e..62403c147 100644
--- a/packages/react-magma-dom/src/components/TimePicker/useTimePicker.ts
+++ b/packages/react-magma-dom/src/components/TimePicker/useTimePicker.ts
@@ -21,9 +21,9 @@ export interface UseTimePickerProps
    */
   minutesStep?: number;
   /**
-   * Full time value passed in and converted to use in hour, minute, and AM/PM fields
+   * Full time value passed in and converted to use in hour, minute, and AM/PM fields. To clear the TimePicker - send the undefined value.
    */
-  value?: string;
+  value?: string | undefined;
   /**
    * Function called when the component is changed to a new time
    */
@@ -48,7 +48,12 @@ export function useTimePicker(props: UseTimePickerProps) {
   const id = useGenerateId(props.id);
 
   React.useEffect(() => {
-    if (validTime(props.value)) {
+    if(typeof props.value === 'undefined') {
+      setHour('');
+      setMinute('');
+      setAmPm(am);
+      updateTime('');
+    } else if (validTime(props.value)) {
       convertPassedInTime(props.value);
     }
   }, [props.value]);
diff --git a/website/react-magma-docs/src/pages/api/time-picker.mdx b/website/react-magma-docs/src/pages/api/time-picker.mdx
index 69668342a..a1fec11a3 100644
--- a/website/react-magma-docs/src/pages/api/time-picker.mdx
+++ b/website/react-magma-docs/src/pages/api/time-picker.mdx
@@ -125,6 +125,31 @@ export function Example() {
 }
 ```
 
+## Clear value
+
+The `value` and `onChange` props can be used for clear value.
+
+```tsx
+import React from 'react';
+import { Button, TimePicker } from 'react-magma-dom';
+
+export function Example() {
+  const [timeValue, setTimeValue] = React.useState<string | undefined>('');
+
+  function handleOnChange(value) {
+    setTimeValue(value);
+  }
+
+  return (
+    <>
+      <TimePicker labelText="Time Due" onChange={handleOnChange} value={timeValue} />
+      <br />
+      <Button onClick={() => handleOnChange(undefined)}>Clear Time</Button>
+    </>
+  );
+}
+```
+
 ## Custom Styles
 
 The `containerStyle`, `inputStyle`, `labelStyle` and `messageStyle` props can be used for custom styling.