# Time picker
Time pickers let people choose an hour and minute on a clock dial, or type them into fields.
**Example: An inline time picker set to 7:00**
```html
```
## Usage guidelines
* **Dial or input.** The dial is quick for picking an approximate time, and typing is faster for an exact one. People can [switch](#input-mode) between them unless you hide the toggle.
* **Inline or modal.** Show the picker [inline](#inline-and-modal) in a form, or as a [modal](#inline-and-modal) when it opens from a field or button.
* **Match the locale.** The picker follows the 12 or 24 hour clock of its `locale`. Set [`hour-cycle`](#hour-cycle) to force one.
## Anatomy
A time picker has a headline, the hour and minute selectors, an AM or PM toggle in 12 hour mode, a dial, and the actions.
**Example: A time picker with its headline, selectors, dial and actions**
```html
```
## Examples
### Inline and modal
Add `modal` to show the picker in a dialog with a scrim. Open it with `show()`. It fires `change` when a time is confirmed and `cancel` when it is dismissed.
**Example: A modal time picker opened from a Set alarm button**
*HTML*
```html
Set alarm
```
*JavaScript*
```js
const alarm = document.querySelector('#alarm');
document.querySelector('#set-alarm').addEventListener('click', () => {
alarm.show();
});
alarm.addEventListener('change', (event) => {
document.querySelector('#time').textContent = event.target.value;
});
```
### Input mode
Set `mode="input"` to start with hour and minute fields instead of the dial. Add `hide-mode-toggle` to remove the switch between the two.
**Example: A time picker with hour and minute fields**
```html
```
### Hour cycle
Set `hour-cycle` to `12` or `24`. The `value` is always a 24 hour `HH:MM` string.
**Example: A 24 hour time picker set to 20:00**
```html
```
### Orientation
The dial sits below the time selectors (`vertical`), except in short landscape windows, where it moves beside them (`horizontal`). Set `orientation` to choose one.
**Example: A time picker with a horizontal layout**
```html
```
### Density
Set `density` from 0 (default) to -3 to make the picker more compact.
**Example: A time picker with a density of -3**
```html
```
## Accessibility
* Input mode is an alternative to the dial, and every control has a label. Localize the labels with attributes such as `select-hour-label`, `hour-label`, `cancel-label` and `confirm-label`.
* A modal picker is a `