# Time Picker
Use `ui-time-picker` when you need the time selection primitive directly, outside of the shared field wrapper. It works well in drawers, scheduling panels, compact operational rows, and custom overlays where a full `ui-time` field would add unnecessary chrome.
## Import
```ts
import { TimePickerComponent } from 'ui';
```
## Basic wheel selection
```ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { TimePickerComponent } from 'ui';
@Component({
selector: 'app-time-picker-basic-demo',
standalone: true,
imports: [FormsModule, TimePickerComponent],
template: `
Selected value:
{{
selectedTime || 'Not set'
}}
Wheel interactions emit normalized HH:mm strings.
`,
})
export class TimePickerBasicDemoComponent {
protected selectedTime = '09:30';
}
```
## Minute step and 12h or 24h format
```ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { TimePickerComponent } from 'ui';
@Component({
selector: 'app-time-picker-format-step-demo',
standalone: true,
imports: [FormsModule, TimePickerComponent],
template: `
24h storage stays normalized:
16:30
In 12h mode the same value is presented as
4:30 PM
`,
})
export class TimePickerFormatStepDemoComponent {
protected quarterHourValue = '09:15';
protected halfHourValue = '13:30';
protected twelveHourValue = '16:30';
}
```
## Size and inline layout
```ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { TimePickerComponent } from 'ui';
@Component({
selector: 'app-time-picker-size-layout-demo',
standalone: true,
imports: [FormsModule, TimePickerComponent],
template: `
Inline without label
Inline with visible label
`,
})
export class TimePickerSizeLayoutDemoComponent {
protected smallValue = '08:30';
protected mediumValue = '11:00';
protected largeValue = '15:30';
protected inlineValue = '10:00';
protected inlineLabelValue = '14:30';
}
```
## Disabled and preset states
```ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ButtonComponent, TimePickerComponent } from 'ui';
@Component({
selector: 'app-time-picker-states-demo',
standalone: true,
imports: [FormsModule, ButtonComponent, TimePickerComponent],
template: `
{{ disabledTwelveHour ? 'Enable' : 'Disable' }} 12h picker
Reset
Active value:
{{ activeValue }}
`,
})
export class TimePickerStatesDemoComponent {
protected activeValue = '13:15';
protected amPmValue = '16:30';
protected disabledTwelveHour = true;
protected toggleDisabled12h(): void {
this.disabledTwelveHour = !this.disabledTwelveHour;
}
protected reset(): void {
this.activeValue = '13:15';
this.amPmValue = '16:30';
this.disabledTwelveHour = true;
}
}
```
## Inline schedule row
```ts
import { Component } from '@angular/core';
import { ButtonComponent, CardComponent, TimePickerComponent } from 'ui';
@Component({
selector: 'app-time-picker-inline-schedule-demo',
standalone: true,
imports: [ButtonComponent, CardComponent, TimePickerComponent],
template: `
Support handoff
Inline time pickers work well in compact operational rows where users tweak one slot fast.
Current span:
{{ startValue }} - {{ endValue }}
Reset
`,
})
export class TimePickerInlineScheduleDemoComponent {
protected startValue = '09:00';
protected endValue = '17:00';
protected reset(): void {
this.startValue = '09:00';
this.endValue = '17:00';
}
}
```
## Scheduling panel composition
```ts
import { Component } from '@angular/core';
import { ButtonComponent, CardComponent, MessageBarComponent, TimePickerComponent } from 'ui';
@Component({
selector: 'app-time-picker-scheduling-panel-demo',
standalone: true,
imports: [ButtonComponent, CardComponent, MessageBarComponent, TimePickerComponent],
template: `
Candidate review session
Choose a focused slot for the panel and keep timezone-sensitive handoff details nearby.
Candidate review:
{{ reviewTime }}
Debrief:
{{ debriefTime }}
Confirm slot
Reset
`,
})
export class TimePickerSchedulingPanelDemoComponent {
protected reviewTime = '14:00';
protected debriefTime = '16:30';
protected reset(): void {
this.reviewTime = '14:00';
this.debriefTime = '16:30';
}
}
```
## Accessibility
### Wheel and option semantics
`ui-time-picker` renders separate hour and minute listboxes with option buttons, plus an AM or PM radio group in 12 hour mode.
| Part | Semantics |
| --- | --- |
| hour wheel | `role="listbox"` with option buttons |
| minute wheel | `role="listbox"` with option buttons |
| 12 hour selector | radio button group for `AM` or `PM` |
| disabled state | wheels and meridiem controls become non-interactive |
### Keyboard
Keyboard support follows the wheel interaction model.
| Key | Action |
| --- | --- |
| `Tab` / `Shift+Tab` | moves between hour wheel, minute wheel, and AM or PM group when present |
| `ArrowUp` / `ArrowDown` | moves by one option in the focused wheel |
| `PageUp` / `PageDown` | jumps by larger increments in the focused wheel |
| click or button activation | selects a visible option from the wheel |
### Labels and context
Because this component is often embedded directly into custom panels, give it surrounding context. Use `showLabel` and `label` when the picker stands on its own, or place it near explicit section text so screen reader users understand whether the slot controls a start time, end time, handoff, or deadline.