<h2>What&#39;s new in v3</h2>
<ul>
<li><strong>Design tokens:</strong> Provide a unified set of values for key properties, ensuring consistency across components and enabling easier customization. Learn more on the <a href="/getting-started/tokens">tokens page</a> and view the component’s token values in its <a href="?tab=Tokens">tokens tab</a>.</li>
</ul>
<h2>When to use</h2>
<p>Time picker and date picker are two different components used for different purposes. Choosing the right use case will make the experience clear for all users, particularly for those with cognitive and learning disabilities and for those using screen readers.</p>
<table>
<thead>
<tr>
<th>Component</th>
<th>Use case</th>
</tr>
</thead>
<tbody><tr>
<td>Time picker</td>
<td>Used to select or schedule a specific time or a range of times.</td>
</tr>
<tr>
<td><a href="/components/date-picker/">Date picker</a></td>
<td>Used to select or schedule a specific date.</td>
</tr>
</tbody></table>
<h2>Anatomy</h2>
<p>The time picker component includes an input and a dropdown list.
This component supports the use of slots. For more details about how to use slots, see the <a href="/components/time-picker?tab=Design#design-layout">layout</a> section. </p>
<details data-name='image-block' data-images='[{"alt":"anatomy of the time picker input","caption":"The time picker input is made of the following three elements:\n\n1. Label: describes the options the user will see.\n2. Input: includes an input mask to correctly format the time.\n3. Helper text: message to help or guide the user.\n4. Chevron: visual indication that the list can open or close.","url":"https://dds.dell.com/site/v3/components/time-picker/time-picker-anatomy-prompt.png"},{"alt":"anatomy of the time picker dropdown.","caption":"When the time picker dropdown list is expanded:\n\n1. Menu option list: shows a user their options.\n2. Scrollbar: used only when the quantity of items in the menu option list exceeds the height of the viewport.\n3. h visual representation of the selected option.","url":"https://dds.dell.com/site/v3/components/time-picker/time-picker-anatomy-list.png"}]' data-numberofcolumns='2' data-hideWidget='false'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

## Usage

Time picker is used to select a single time from a dropdown list or to manually input a specific time for the purpose of scheduling or reporting. 

Inputs should include placeholder and conditional formatting to maintain expected time formatting. Input masks can help users avoid entering errors and improve the input’s readability.

Time picker is commonly used in forms that require users to select a time or range of times. To learn more about forms, see the [form pattern](/patterns/form/).

### Scheduling

Time pickers are commonly used for scheduling, selecting a specific time or set a range of availability.

<details data-name='image-block' data-images='[{"alt":"example using the time picker&#39;s dropdown to set a schedule of 9:00 a.m. to 11:00 a.m. for automatic scans.","caption":"","url":"https://dds.dell.com/site/v3/components/time-picker/time-picker-usage-scheduling.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

#### Input field

Users can opt to choose a time from the dropdown menu or type their choice in the input. Typing into the input will cause the component to highlight the option in the list that best matches the input text. 

If the component follows a 12-hour format and the user types in a time using the 24-hour format, the input will automatically convert to the corresponding time in a 12-hour format.

You can enable the input to allow the user to enter a time freely, which can include options that are not provided in the dropdown menu. For example, if your use case allows flexibility in start times for meetings, “10:05 a.m.” may not appear in the list, but is still a correctly formatted and valid time.

Only enable free choice inputs when there are no restrictions on the available times, like meetings or similar cases where someone is proposing a time that a recipient can accept or decline.

<details data-name='image-block' data-images='[{"alt":"example using the time picker&#39;s input to type in 11:00 a.m. as the end time for automatic scans.","caption":"","url":"https://dds.dell.com/site/v3/components/time-picker/time-picker-usage-input-field.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Kinds

### Options

The time picker component includes a 12-hour format and a 24-hour format. Which format you use depends on the region in which your product is available. For example, the United States uses a 12-hour format. Format content for your region, and work with your globalization team members when content may need to be translated.

<details data-name='image-block' data-images='[{"alt":"time picker with 12-hour format.","caption":"12-hour format: includes a.m. and p.m. abbreviations in the list.","url":"https://dds.dell.com/site/v3/components/time-picker/time-picker-kinds-12h.png"},{"alt":"time picker with 24-hour format","caption":"24-hour format: for regions that use the 24-hour format, such as Brazil.","url":"https://dds.dell.com/site/v3/components/time-picker/time-picker-kinds-24h.png"}]' data-numberofcolumns='2' data-hideWidget='false'></details>

## Sizes

Time pickers come in two sizes: large (default) and small. Time pickers should match in size and match the relative width of the experience.

* **Large**: used with larger grid sizes, layouts that require more space for content, or for users who many need a larger input field
* **Small**: used with smaller screen sizes or when a compact layout better accommodates the content.

<details data-name='image-block' data-images='[{"alt":"large time picker.","caption":"Large time picker","url":"https://dds.dell.com/site/v3/components/time-picker/time-picker-size-large.png"},{"alt":"small time picker.","caption":"Small time picker","url":"https://dds.dell.com/site/v3/components/time-picker/time-picker-size-small.png"}]' data-numberofcolumns='2' data-hideWidget='false'></details>

## Layout

Labels and helper text should be left-aligned. 

Inputs should always appear on the left in the input field and visual indicators on the right.

### Building block

A slot is available in this component to support flexible composition. It allows users to place additional elements such as images, text blocks, or other components while preserving the component’s layout, padding, and visual consistency.

<details data-name='image-block' data-images='[{"alt":"","caption":"","url":"https://dds.dell.com/site/v3/components/time-picker/time-picker-slot.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### Specifications

Specifications for the time picker component are measured in pixels and reflect the default layout as described in the form pattern. Any changes regarding density should follow [form pattern layout](/patterns/form/#layout) guidance.

<details data-name='image-block' data-images='[{"alt":"Two large time pickers stacked.","caption":"Large time pickers are stacked with 24-pixels of padding.","url":"https://dds.dell.com/site/v3/components/time-picker/time-picker-specifications-vertical.png"},{"alt":"Two large time pickers aligned horizontally.","caption":"Large time pickers have 16-pixels of padding between them when aligned horizontally.","url":"https://dds.dell.com/site/v3/components/time-picker/time-picker-specifications-horizontal-.png"}]' data-numberofcolumns='2' data-hideWidget='false'></details>

## Interaction

### States

Time pickers are impacted by user interaction and show visual changes depending on the status of the interaction. It can communicate five states: rest, hover, press, inactive, and focus, where the state is reflected in its color and opacity.

<details data-name='image-block' data-images='[{"alt":"6 states of the time picker.","caption":"","url":"https://dds.dell.com/site/v3/components/time-picker/time-picker-behaviors-states.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

| State    | Behavior                                                                                                                                                     |
| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Rest     | When a user has not interacted with the time picker, it will appear in its default, rest state.                                                              |
| Hover    | When a user hovers their cursor over the time picker’s active area, the component changes color, indicating that it is able to be pressed.                   |
| Focus    | A blue outline appears around the component when a user tabs or uses keyboard controls to navigate. Focus states do not appear on inactive buttons.          |
| Inactive | Inactive buttons are displayed with 40% opacity, indicating the option exists but is not available to the user.                                              |
| Error    | A validation error appears in red text (Red 700) and displays an error icon within the field. Additionally, red error messaging appears under the component. |
| Pressed  | When a user presses the time picker, the component changes color and the dropdown list expands.                                                              |

## Standards

### Accessibility

#### Ensure time picker is operable by keyboard

The time picker requires keyboard navigation for those who rely on technology other than a mouse to navigate. Users should be able to select the component by pressing the tab key and enter to expand or contract the dropdown list.

WCAG 2.2: [2.1.1 Keyboard (Level A)](https://www.w3.org/WAI/WCAG22/Understanding/keyboard.html), [2.1.2 No Keyboard Trap](https://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation-trapping.html)

#### [](https://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation-trapping.html)Clearly state expectations on required formatting

If a field requires a restricted input, such as a date or time format, communicate the requirement in the label or instructions.

#### Avoid using placeholder text

Avoid using placeholder text to convey important information. Placeholder text disappears as the user starts typing, and instructions must be visible at all times.

WCAG 2.2: [3.3.2 Labels or Instructions](https://www.w3.org/WAI/WCAG22/Understanding/labels-or-instructions)

#### [](https://www.w3.org/WAI/WCAG22/Understanding/labels-or-instructions)Use meaningful copy for error text

Use clear and actionable error text to help users fix errors. Don’t provide unclear error text such as “Enter a valid date.” Instead, make it clear how a user’s entry should be correct to show a valid date format.

WCAG 2.2: [3.3.2 Labels or Instructions](https://www.w3.org/WAI/WCAG22/Understanding/labels-or-instructions)

#### [](https://www.w3.org/WAI/WCAG22/Understanding/labels-or-instructions)Require confirmation through an additional action

Selections using the time picker should not auto-submit entries. Users should be allowed to review their selections and confirm them using an additional action, such as a submit button on a form.

### Content

#### Labels

Labels should be a single word or concise phrase.

**Do:** Appointment time

**Don’t:** Choose a time for your appointment

#### Sentence case

Use sentence case for labels without punctuation.

**Do:** Delivery window

**Don’t:** Delivery Window

#### Abbreviations

When using the 12-hour format, include the the a.m. or p.m. abbreviations to specify morning or afternoon. Abbreviations are lowercase and include periods.

**Do:** 9:00 a.m.

**Don’t:** 9:00am or 9:00 AM

Design

## Tokens

Component tokens define the visual decisions used by this component. Use these tokens to adjust the component while preserving consistency and accessibility across the system.

The table below lists all tokens consumed by the component, explaining what each token controls, where it applies, and how it can be customized.

For more details about tokens and how they work across the system, see the [tokens documentation](/getting-started/tokens).

| Name                              | Collection | CSS var                                      | Preview  |
| --------------------------------- | ---------- | -------------------------------------------- | -------- |
| spacing/xs                        | Semantic   | `var(--dds-spacing-xs)`                      | —        |
| input/padding-horizontal/sm       | Component  | `var(--dds-input-padding-horizontal-sm)`     | —        |
| size/32                           | Global     | `var(--dds-size-32)`                         | —        |
| border/radius/xs                  | Semantic   | `var(--dds-border-radius-xs)`                | —        |
| border/width/xs                   | \-         | `var(--dds-border-width-xs)`                 | —        |
| layout/size/2xl                   | \-         | `var(--dds-layout-size-2xl)`                 | —        |
| color/background/SURFACE/neutral  | Semantic   | `var(--dds-color-background-surface-neutral)`| \#FFFFFF |
| color/border/NEUTRAL/pale         | Semantic   | `var(--dds-color-border-neutral-pale)`       | \#C5D4E3 |
| color/text/tertiary               | Semantic   | `var(--dds-color-text-tertiary)`             | \#5C6E7E |
| icon/size/xs                      | Component  | `var(--dds-icon-size-xs)`                    | —        |
| color/text/NEUTRAL/rest           | Semantic   | `var(--dds-color-text-neutral-rest)`         | \#1D2C3B |
| input/gap/sm                      | Component  | `var(--dds-input-gap-sm)`                    | —        |
| color/border/ERROR/base           | Semantic   | `var(--dds-color-border-error-base)`         | \#8C161F |
| color/text/primary                | Semantic   | `var(--dds-color-text-primary)`              | \#1D2C3B |
| helper-text/gap                   | Component  | `var(--dds-helper-text-gap)`                 | —        |
| helper-text/icon/height           | Internal   | `var(--dds-helper-text-icon-height)`         | —        |
| color/text/ERROR/rest             | Semantic   | `var(--dds-color-text-error-rest)`           | \#BB2A33 |
| input/gap/lg                      | Component  | `var(--dds-input-gap-lg)`                    | —        |
| input/padding-horizontal/lg       | \-         | `var(--dds-input-padding-horizontal-lg)`     | —        |
| size/48                           | Global     | `var(--dds-size-48)`                         | —        |
| layout/size/4xl                   | \-         | `var(--dds-layout-size-4xl)`                 | —        |
| icon/size/sm                      | Component  | `var(--dds-icon-size-sm)`                    | —        |
| input/padding-horizontal/lg       | Component  | `var(--dds-input-padding-horizontal-lg)`     | —        |
| color/border/BRAND/base           | Semantic   | `var(--dds-color-border-brand-base)`         | \#00468B |
| color/text/inactive               | \-         | `var(--dds-color-text-inactive)`             | \#B6B6B6 |
| color/background/SURFACE/inactive | Semantic   | `var(--dds-color-background-surface-inactive)`| \#E1E1E1 |
| color/border/INACTIVE/base        | Semantic   | `var(--dds-color-border-inactive-base)`      | \#7E7E7E |
| color/text/inactive               | Semantic   | `var(--dds-color-text-inactive)`             | \#B6B6B6 |
| border/width/xs                   | Semantic   | `var(--dds-border-width-xs)`                 | —        |
| menu/gap                          | Component  | `var(--dds-menu-gap)`                        | —        |
| menu/padding                      | Component  | `var(--dds-menu-padding)`                    | —        |
| size/4                            | Global     | `var(--dds-size-4)`                          | —        |
| size/16                           | Global     | `var(--dds-size-16)`                         | —        |
| color/purple/10                   | Global     | `var(--dds-color-purple-10)`                 | \#FBEBFF |
| color/purple/80                   | Global     | `var(--dds-color-purple-80)`                 | \#66278F |

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla.delldesignsystem.com/?path=/docs/components-time-picker--docs)
<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?args=&id=components-time-picker--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

Code

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://angular.delldesignsystem.com/?path=/docs/components-time-picker--docs)
<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?args=&id=components-time-picker--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://react.delldesignsystem.com/?path=/docs/components-time-picker--docs)
<details data-name='iframe-doc' data-link='https://react.delldesignsystem.com/iframe.html?args=&id=components-time-picker--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

Time Picker