diff --git a/src/components/forms/ComboBox/ComboBox.tsx b/src/components/forms/ComboBox/ComboBox.tsx
index 8757c01df5..14ebf5e193 100644
--- a/src/components/forms/ComboBox/ComboBox.tsx
+++ b/src/components/forms/ComboBox/ComboBox.tsx
@@ -79,6 +79,7 @@ export const ComboBox = ({
   noResults,
   selectProps,
   inputProps,
+  ...customProps
 }: ComboBoxProps): React.ReactElement => {
   const isDisabled = !!disabled
 
@@ -270,7 +271,8 @@ export const ComboBox = ({
       data-testid="combo-box"
       className={containerClasses}
       id={id}
-      ref={containerRef}>
+      ref={containerRef}
+      {...customProps}>
       <select
         className="usa-select usa-sr-only usa-combo-box__select"
         name={name}
diff --git a/src/components/forms/TimePicker/TimePicker.stories.tsx b/src/components/forms/TimePicker/TimePicker.stories.tsx
new file mode 100644
index 0000000000..efc4a472dd
--- /dev/null
+++ b/src/components/forms/TimePicker/TimePicker.stories.tsx
@@ -0,0 +1,73 @@
+import React from 'react'
+
+import { Form } from '../Form/Form'
+import { TimePicker } from './TimePicker'
+
+export default {
+  title: 'Components/Form controls/Time picker',
+  component: TimePicker,
+  argTypes: {
+    onsubmit: { action: 'submitted' },
+    disabled: { control: { type: 'boolean' } },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+### USWDS 2.0 TimePicker component
+
+https://designsystem.digital.gov/components/time-picker/
+`,
+      },
+    },
+  },
+}
+
+const noop = (): void => {
+  return
+}
+
+export const completeTimePicker = (argTypes): React.ReactElement => (
+  <Form onSubmit={argTypes.onSubmit}>
+    <TimePicker
+      id="appointment-time"
+      name="appointment-time"
+      label="Appointment Time"
+      hint="hh:mm"
+      onChange={noop}
+    />
+  </Form>
+)
+
+export const defaultTimePicker = (argTypes): React.ReactElement => (
+  <Form onSubmit={argTypes.onSubmit}>
+    <TimePicker id="appointment-time" name="appointment-time" onChange={noop} />
+  </Form>
+)
+
+export const withMinAndMaxTimes = (argTypes): React.ReactElement => (
+  <Form onSubmit={argTypes.onSubmit}>
+    <TimePicker
+      id="appointment-time"
+      name="appointment-time"
+      label="Appointment Time"
+      hint="hh:mm (9:00am - 5:00pm)"
+      minTime="9:00"
+      maxTime="17:00"
+      onChange={noop}
+    />
+  </Form>
+)
+
+export const withDefaultValue = (argTypes): React.ReactElement => (
+  <Form onSubmit={argTypes.onSubmit}>
+    <TimePicker
+      id="appointment-time"
+      name="appointment-time"
+      label="Appointment Time"
+      hint="hh:mm"
+      defaultValue="12:00"
+      onChange={noop}
+    />
+  </Form>
+)
diff --git a/src/components/forms/TimePicker/TimePicker.test.tsx b/src/components/forms/TimePicker/TimePicker.test.tsx
new file mode 100644
index 0000000000..8d77f9e934
--- /dev/null
+++ b/src/components/forms/TimePicker/TimePicker.test.tsx
@@ -0,0 +1,78 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+
+import { TimePicker } from './TimePicker'
+import userEvent from '@testing-library/user-event'
+
+describe('TimePicker Component', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  const testProps = {
+    id: 'appointment-time',
+    name: 'appointment-time',
+    onChange: jest.fn(),
+  }
+
+  it('renders without errors', () => {
+    const { getByTestId } = render(<TimePicker {...testProps} />)
+
+    const timePickerComboBox = getByTestId('combo-box')
+
+    expect(timePickerComboBox).toBeInTheDocument()
+    expect(timePickerComboBox).toHaveClass('usa-combo-box usa-time-picker')
+  })
+
+  it('allows the user to select a time', () => {
+    const { getByTestId } = render(<TimePicker {...testProps} />)
+
+    const comboBoxTextInput = getByTestId('combo-box-input')
+    const comboBoxDropdownList = getByTestId('combo-box-option-list')
+    const elementToSelect = getByTestId('combo-box-option-00:00')
+    const comboBoxClearButton = getByTestId('combo-box-clear-button')
+
+    expect(comboBoxTextInput).toHaveAttribute('aria-expanded', 'false')
+    expect(comboBoxDropdownList).not.toBeVisible()
+    expect(comboBoxClearButton).not.toBeVisible()
+
+    // Click on the TimePicker input
+    userEvent.click(comboBoxTextInput)
+    expect(comboBoxTextInput).toHaveAttribute('aria-expanded', 'true')
+    expect(comboBoxDropdownList).toBeVisible()
+
+    // Select a time
+    jest.clearAllMocks()
+
+    userEvent.hover(elementToSelect)
+    expect(elementToSelect).toHaveClass('usa-combo-box__list-option--focused')
+
+    userEvent.click(elementToSelect)
+    expect(testProps.onChange).toHaveBeenCalledTimes(1)
+    expect(elementToSelect).toHaveClass('usa-combo-box__list-option--selected')
+    expect(comboBoxTextInput).toHaveAttribute('aria-expanded', 'false')
+    expect(comboBoxDropdownList).not.toBeVisible()
+    expect(comboBoxTextInput).toHaveValue(elementToSelect.textContent)
+    expect(comboBoxClearButton).toBeVisible()
+  })
+
+  it('allows the user to clear the input', () => {
+    const { getByTestId } = render(
+      <TimePicker {...testProps} defaultValue="00:00" />
+    )
+
+    const comboBoxTextInput = getByTestId('combo-box-input')
+    const comboBoxClearButton = getByTestId('combo-box-clear-button')
+
+    expect(comboBoxClearButton).toBeVisible()
+    expect(comboBoxTextInput).toHaveValue('12:00am')
+
+    //Clear the input
+    jest.clearAllMocks()
+
+    userEvent.click(comboBoxClearButton)
+    expect(testProps.onChange).toHaveBeenCalledTimes(1)
+    expect(comboBoxClearButton).not.toBeVisible()
+    expect(comboBoxTextInput).not.toHaveValue()
+  })
+})
diff --git a/src/components/forms/TimePicker/TimePicker.tsx b/src/components/forms/TimePicker/TimePicker.tsx
new file mode 100644
index 0000000000..a0538a8118
--- /dev/null
+++ b/src/components/forms/TimePicker/TimePicker.tsx
@@ -0,0 +1,86 @@
+import React, { useMemo } from 'react'
+import classnames from 'classnames'
+import { FormGroup } from '../FormGroup/FormGroup'
+import { Label } from '../Label/Label'
+import { ComboBox } from '../ComboBox/ComboBox'
+import { getTimeOptions, parseTimeString } from './utils'
+import {
+  DEFAULT_MAX_TIME,
+  DEFAULT_MAX_TIME_MINUTES,
+  DEFAULT_MIN_TIME,
+  DEFAULT_MIN_TIME_MINUTES,
+  DEFAULT_STEP,
+  FILTER_DATASET,
+  MIN_STEP,
+} from './constants'
+
+interface BaseTimePickerProps {
+  id: string
+  name: string
+  onChange: (val?: string) => void
+  label?: string
+  defaultValue?: string
+  disabled?: boolean
+  minTime?: string
+  maxTime?: string
+  step?: number
+  hint?: string
+  className?: string
+}
+
+type TimePickerProps = BaseTimePickerProps &
+  Omit<JSX.IntrinsicElements['input'], 'onChange'>
+
+export const TimePicker = ({
+  id,
+  name,
+  onChange,
+  label,
+  defaultValue,
+  disabled,
+  minTime = DEFAULT_MIN_TIME,
+  maxTime = DEFAULT_MAX_TIME,
+  step = DEFAULT_STEP,
+  hint,
+  className,
+}: TimePickerProps): React.ReactElement => {
+  const classes = classnames('usa-time-picker', className)
+
+  const parsedMinTime = parseTimeString(minTime) || DEFAULT_MIN_TIME_MINUTES
+  const parsedMaxTime = parseTimeString(maxTime) || DEFAULT_MAX_TIME_MINUTES
+  const validStep = step < MIN_STEP ? MIN_STEP : step
+  const timeOptions = useMemo(
+    () => getTimeOptions(parsedMinTime, parsedMaxTime, validStep),
+    [minTime, maxTime, step]
+  )
+
+  const labelId = `${name}-label`
+  const hintId = `${name}-hint`
+
+  return (
+    <FormGroup>
+      <Label className="usa-label" id={labelId} htmlFor={id}>
+        {label}
+      </Label>
+      {hint && (
+        <div className="usa-hint" id={hintId}>
+          {hint}
+        </div>
+      )}
+      <ComboBox
+        id={id}
+        name={name}
+        className={classes}
+        onChange={onChange}
+        defaultValue={defaultValue}
+        options={timeOptions}
+        disabled={disabled}
+        data-filter={FILTER_DATASET.filter}
+        data-ap-query-filter={FILTER_DATASET.apQueryFilter}
+        data-hour-query-filter={FILTER_DATASET.hourQueryFilter}
+        data-minute-query-filter={FILTER_DATASET.minuteQueryFilter}
+        data-disable-filtering="true"
+      />
+    </FormGroup>
+  )
+}
diff --git a/src/components/forms/TimePicker/constants.ts b/src/components/forms/TimePicker/constants.ts
new file mode 100644
index 0000000000..11ec37c635
--- /dev/null
+++ b/src/components/forms/TimePicker/constants.ts
@@ -0,0 +1,14 @@
+export const DEFAULT_MAX_TIME = '23:59'
+export const DEFAULT_MAX_TIME_MINUTES = 24 * 60 - 1
+export const DEFAULT_MIN_TIME = '00:00'
+export const DEFAULT_MIN_TIME_MINUTES = 0
+export const DEFAULT_STEP = 30
+export const MIN_STEP = 1
+
+export const FILTER_DATASET = {
+  filter:
+    '0?{{ hourQueryFilter }}:{{minuteQueryFilter}}.*{{ apQueryFilter }}m?',
+  apQueryFilter: '([ap])',
+  hourQueryFilter: '([1-9][0-2]?)',
+  minuteQueryFilter: '[\\d]+:([0-9]{0,2})',
+}
diff --git a/src/components/forms/TimePicker/utils.test.ts b/src/components/forms/TimePicker/utils.test.ts
new file mode 100644
index 0000000000..fbb0cd83c2
--- /dev/null
+++ b/src/components/forms/TimePicker/utils.test.ts
@@ -0,0 +1,320 @@
+import {
+  DEFAULT_MAX_TIME_MINUTES,
+  DEFAULT_MIN_TIME_MINUTES,
+  DEFAULT_STEP,
+} from './constants'
+import { getTimeOptions, parseTimeString } from './utils'
+
+describe('getTimeOptions', () => {
+  it('returns the expected list of default times options', () => {
+    const timeOptions = getTimeOptions(
+      DEFAULT_MIN_TIME_MINUTES,
+      DEFAULT_MAX_TIME_MINUTES,
+      DEFAULT_STEP
+    )
+
+    expect(timeOptions).toEqual([
+      {
+        value: '00:00',
+        label: '12:00am',
+      },
+      {
+        value: '00:30',
+        label: '12:30am',
+      },
+      {
+        value: '01:00',
+        label: '1:00am',
+      },
+      {
+        value: '01:30',
+        label: '1:30am',
+      },
+      {
+        value: '02:00',
+        label: '2:00am',
+      },
+      {
+        value: '02:30',
+        label: '2:30am',
+      },
+      {
+        value: '03:00',
+        label: '3:00am',
+      },
+      {
+        value: '03:30',
+        label: '3:30am',
+      },
+      {
+        value: '04:00',
+        label: '4:00am',
+      },
+      {
+        value: '04:30',
+        label: '4:30am',
+      },
+      {
+        value: '05:00',
+        label: '5:00am',
+      },
+      {
+        value: '05:30',
+        label: '5:30am',
+      },
+      {
+        value: '06:00',
+        label: '6:00am',
+      },
+      {
+        value: '06:30',
+        label: '6:30am',
+      },
+      {
+        value: '07:00',
+        label: '7:00am',
+      },
+      {
+        value: '07:30',
+        label: '7:30am',
+      },
+      {
+        value: '08:00',
+        label: '8:00am',
+      },
+      {
+        value: '08:30',
+        label: '8:30am',
+      },
+      {
+        value: '09:00',
+        label: '9:00am',
+      },
+      {
+        value: '09:30',
+        label: '9:30am',
+      },
+      {
+        value: '10:00',
+        label: '10:00am',
+      },
+      {
+        value: '10:30',
+        label: '10:30am',
+      },
+      {
+        value: '11:00',
+        label: '11:00am',
+      },
+      {
+        value: '11:30',
+        label: '11:30am',
+      },
+      {
+        value: '12:00',
+        label: '12:00pm',
+      },
+      {
+        value: '12:30',
+        label: '12:30pm',
+      },
+      {
+        value: '13:00',
+        label: '1:00pm',
+      },
+      {
+        value: '13:30',
+        label: '1:30pm',
+      },
+      {
+        value: '14:00',
+        label: '2:00pm',
+      },
+      {
+        value: '14:30',
+        label: '2:30pm',
+      },
+      {
+        value: '15:00',
+        label: '3:00pm',
+      },
+      {
+        value: '15:30',
+        label: '3:30pm',
+      },
+      {
+        value: '16:00',
+        label: '4:00pm',
+      },
+      {
+        value: '16:30',
+        label: '4:30pm',
+      },
+      {
+        value: '17:00',
+        label: '5:00pm',
+      },
+      {
+        value: '17:30',
+        label: '5:30pm',
+      },
+      {
+        value: '18:00',
+        label: '6:00pm',
+      },
+      {
+        value: '18:30',
+        label: '6:30pm',
+      },
+      {
+        value: '19:00',
+        label: '7:00pm',
+      },
+      {
+        value: '19:30',
+        label: '7:30pm',
+      },
+      {
+        value: '20:00',
+        label: '8:00pm',
+      },
+      {
+        value: '20:30',
+        label: '8:30pm',
+      },
+      {
+        value: '21:00',
+        label: '9:00pm',
+      },
+      {
+        value: '21:30',
+        label: '9:30pm',
+      },
+      {
+        value: '22:00',
+        label: '10:00pm',
+      },
+      {
+        value: '22:30',
+        label: '10:30pm',
+      },
+      {
+        value: '23:00',
+        label: '11:00pm',
+      },
+      {
+        value: '23:30',
+        label: '11:30pm',
+      },
+    ])
+  })
+
+  it('returns the expected list of times options with a custom step size', () => {
+    const fourHoursInMinutes = 4 * 60
+    const timeOptions = getTimeOptions(
+      DEFAULT_MIN_TIME_MINUTES,
+      DEFAULT_MAX_TIME_MINUTES,
+      fourHoursInMinutes
+    )
+
+    expect(timeOptions).toEqual([
+      {
+        value: '00:00',
+        label: '12:00am',
+      },
+      {
+        value: '04:00',
+        label: '4:00am',
+      },
+      {
+        value: '08:00',
+        label: '8:00am',
+      },
+      {
+        value: '12:00',
+        label: '12:00pm',
+      },
+      {
+        value: '16:00',
+        label: '4:00pm',
+      },
+      {
+        value: '20:00',
+        label: '8:00pm',
+      },
+    ])
+  })
+
+  it('returns the expected list of times options with custom min and max times', () => {
+    const nineAM = parseTimeString('09:00') as number
+    const fivePM = parseTimeString('17:00') as number
+    const oneHourInMinutes = 60
+    const timeOptions = getTimeOptions(nineAM, fivePM, oneHourInMinutes)
+
+    expect(timeOptions).toEqual([
+      {
+        value: '09:00',
+        label: '9:00am',
+      },
+      {
+        value: '10:00',
+        label: '10:00am',
+      },
+      {
+        value: '11:00',
+        label: '11:00am',
+      },
+      {
+        value: '12:00',
+        label: '12:00pm',
+      },
+      {
+        value: '13:00',
+        label: '1:00pm',
+      },
+      {
+        value: '14:00',
+        label: '2:00pm',
+      },
+      {
+        value: '15:00',
+        label: '3:00pm',
+      },
+      {
+        value: '16:00',
+        label: '4:00pm',
+      },
+      {
+        value: '17:00',
+        label: '5:00pm',
+      },
+    ])
+  })
+})
+
+describe('parseTimeString', () => {
+  it('successfully parses valid values', () => {
+    const midnight = '00:00'
+    const sixThirtyAM = '06:30'
+    const noon = '12:00'
+    const fiveThirtyPM = '17:30'
+
+    const midnightParsed = parseTimeString(midnight)
+    const sixThirtyAMParsed = parseTimeString(sixThirtyAM)
+    const noonParsed = parseTimeString(noon)
+    const fiveThirtyPMParsed = parseTimeString(fiveThirtyPM)
+
+    expect(midnightParsed).toEqual(0)
+    expect(sixThirtyAMParsed).toEqual(6.5 * 60)
+    expect(noonParsed).toEqual(12 * 60)
+    expect(fiveThirtyPMParsed).toEqual(17.5 * 60)
+  })
+
+  it('successfully returns undefined for invalid values', () => {
+    const badFormat = 'abc:123'
+
+    const badFormatParsed = parseTimeString(badFormat)
+
+    expect(badFormatParsed).toBeUndefined()
+  })
+})
diff --git a/src/components/forms/TimePicker/utils.ts b/src/components/forms/TimePicker/utils.ts
new file mode 100644
index 0000000000..643b3ed09b
--- /dev/null
+++ b/src/components/forms/TimePicker/utils.ts
@@ -0,0 +1,74 @@
+import { ComboBoxOption } from '../ComboBox/ComboBox'
+
+/**
+ * Parse a string of hh:mm into minutes
+ *
+ * @param {string} timeStr the time string to parse
+ * @returns {number} the number of minutes
+ */
+export const parseTimeString = (timeStr: string): number | undefined => {
+  let minutes
+
+  if (timeStr) {
+    const [hours, mins] = timeStr.split(':').map((str) => {
+      let value: number | undefined
+      const parsed = parseInt(str, 10)
+      if (!Number.isNaN(parsed)) value = parsed
+      return value
+    })
+
+    if (hours != null && mins != null) {
+      minutes = hours * 60 + mins
+    }
+  }
+
+  return minutes
+}
+
+interface TimeContext {
+  minute: number
+  hour12: number
+  hour24: number
+  ampm: 'am' | 'pm'
+}
+
+const getTimeContext = (minutes: number): TimeContext => {
+  const minute = minutes % 60
+  const hour24 = Math.floor(minutes / 60)
+  const hour12 = hour24 % 12 || 12
+  const ampm = hour24 < 12 ? 'am' : 'pm'
+
+  return {
+    minute,
+    hour24,
+    hour12,
+    ampm,
+  }
+}
+
+const padZeros = (value: number, length: number): string => {
+  return `0000${value}`.slice(-length)
+}
+
+export const getTimeOptions = (
+  minTimeMinutes: number,
+  maxTimeMinutes: number,
+  step: number
+): ComboBoxOption[] => {
+  const timeOptions: ComboBoxOption[] = []
+
+  for (
+    let minutes = minTimeMinutes;
+    minutes <= maxTimeMinutes;
+    minutes += step
+  ) {
+    const { minute, hour24, hour12, ampm } = getTimeContext(minutes)
+
+    timeOptions.push({
+      value: `${padZeros(hour24, 2)}:${padZeros(minute, 2)}`,
+      label: `${hour12}:${padZeros(minute, 2)}${ampm}`,
+    })
+  }
+
+  return timeOptions
+}
diff --git a/src/index.ts b/src/index.ts
index e505f97476..1c0e579f40 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -36,6 +36,7 @@ export { Radio } from './components/forms/Radio/Radio'
 export { RangeInput } from './components/forms/RangeInput/RangeInput'
 export { Textarea } from './components/forms/Textarea/Textarea'
 export { TextInput } from './components/forms/TextInput/TextInput'
+export { TimePicker } from './components/forms/TimePicker/TimePicker'
 export { ValidationChecklist } from './components/forms/Validation/ValidationChecklist'
 export { ValidationItem } from './components/forms/Validation/ValidationItem'