Date and time inputs

Date and time inputs allow a user to enter a specific date, time, or date and time.

Variations

Date input

The date input component allows a user to enter a specific date via the text field. The text field automatically ensures the date follows the set format. This component is also capable of opening a calendar for the user to select a date without typing it in.

Example

Date input

Usage

There are a variety of date and time inputs designed to support any of the date and time inputs your application may need. All components are designed to be flexible within whatever locale they are used in.

For best practices on building forms with inputs in the design system, visit the Forms page under Patterns.

Time input

The time input provides a text field where users may enter the time following the specified format. By default, the user is expected to enter hours and minutes, but can also be required to enter seconds.

The en-US locale also provides the user with a dropdown to select AM or PM.

This component may open a time picker with predefined intervals to select a time without typing it in.

Example

Time input

Time picker

The time picker component can be used when a user may want to quickly select the time from predefined options. By default, the options interval is set to 30 minutes, but this may be changed.

This component supports locale to control 12/24h clock format.

Example