Time Picker

A time picker helps users select a specific time.

Default

Component Preview

Appointment time

Select a time from the dropdown. Type into the input to filter options.

Component Code


<div class="usa-form-group">
  <label class="usa-label" id="appointment-time-label" for="appointment-time">Appointment time</label>
  <div class="usa-hint" id="appointment-time-hint">
    Select a time from the dropdown. Type into the input to filter options.
  </div>
  <div class="usa-time-picker">
    <input
      class="usa-input"
      id="appointment-time"
      name="appointment-time"
      aria-describedby="appointment-time-label appointment-time-hint"
    />
  </div>
</div>

Guidance

When to use the time picker component

Scheduling.: Use the time picker to schedule a time from common, consistent increments, such as planning a meeting time in 30-minute blocks.

When to consider something else

Exact time.: Plain text input is more appropriate for historical exact times, like time of birth.

Usability guidance

Use option strings familiar to users.: The combo box filters by matching strings. Include option text that includes familiar strings or spellings.
Make sure to test.: Test select menus thoroughly with members of your target audience. Several usability experts suggest they should be the "UI of last resort." Many users find them confusing and difficult to use.
Avoid dependent options.: Avoid making options in one select menu change based on the input to another. Users often don't understand how choosing an item in one impacts another.
Use a good default.: When most users will (or should) pick a particular option, make it the default.
Avoid auto-submission.: Don't use JavaScript to automatically submit the form (or do anything else) when an option is selected. Offer a "submit" button at the end of the form instead.

Accessibility guidance

Customize form controls accessibly.: If you customize this component, ensure that it continues to meet the accessibility requirements that apply to all form controls.
Always use a label.: Make sure your select element has a label. Don't replace it with the default menu option.
Avoid auto-submission.: Don't use JavaScript to automatically submit the form when an option is selected. Auto-submission disrupts screen readers because they select each option as they read them.

USWDS Documentation

For more guidance, view the USWDS Time Picker Component Documentation.

Settings

This component has no settings.

Initialization Properties

Property	Element	Description
`data-min-time`	`.usa-time-picker`	The start time used in the time picker in `hh:mm` 24-hour format. The default is `00:00`.
`data-max-time`	`.usa-time-picker`	The end time used for the time picker in `hh:mm` 24-hour format. The default is `23:59`.
`data-step`	`.usa-time-picker`	The number of minutes between options. The minimum is `1` minute and the default is `30` minutes.
`value`	`.usa-input`	The default value shown in the time picker.

Variants

This component has no variants.