Time pickers allow users to input a specific time.

Component Status

Design Kit: RELEASED

Bobwai component: bobwai--timepicker RELEASED

Content Overview

Usage
Anatomy
Appearance
Behavior
Editorial
Related Components

Usage

Use when asking the user to input a specific time or schedule a task.

Anatomy

- Label
- Time input - used to manually enter the time.
- Clock icon - opens the time picker component.
- Hour spinner - selects hours.
- Minute spinner - selects minutes.
- AM/PM spinner (optional) - selects the AM/PM value.

Appearance

Default

Most of the use cases.

Condensed

Used if we need to display long forms, e.g. Scaler.

Placeholder

Used as empty state.

Behavior

States

Focused

Used as focused state.

Disabled

Used as disabled state.

Error

Error validation is displayed on hover over an exclamation mark.

Interactions

Manual

Users can use the input to manually type the time.

Spinners

Users can use the clock icon to open the time input spinners and use them to set the time.

Keyboard Input

By clicking inside, users can select hours/minutes/AM or PM information, after that users can navigate and manage settings using arrow keys.

Time Format

Time picker’s format should be customized (e.g. depending on the location or language).
E.g. US English uses 12-hour notation almost exclusively (12:49 PM or 4:59 AM).
For more information see the Content section.

Editorial

The labels should be clear and descriptive.
Labels uses sentence case.

Related Components

Date Picker - Calendar - Use a calendar picker when the user needs to know a date’s relationship to other days. It allows the user to view and pick dates from a calendar widget.

Typography

Token	Type	Used In
font-heading150	Heading 1 Alt (H1)	heading
font-body	Body	body

Color

Token	Type	Used In
white	background-color	background-color
basic	text color	heading, body text
	border

Sizing

Token	Type	Used In
`width-00px`
`width-00px`
`width-00px`

Spacing

Token	PX	Type	Used In
spacing-xx-small	2
spacing-x-small	4
spacing-small	8
spacing-medium	12
spacing-large	16
spacing-x-large	24

Accessibility

Add ARIA role role=”” to

Inspire Design System : Time Picker