Time Picker

The Base UI (Angular) time picker stores an HH:mm string and opens an overlay clock. Use 12-hour or 24-hour display. Copy it in with the CLI; pair with Pro datepicker showTime when the same field needs a calendar and a time.

When to use

Reminders, business hours, and duration starts that are time-only.
Forms that already store times as HH:mm strings.

When not to use

A full datetime in one control — use datepicker with showTime (Pro).
Relative times (“in 5 minutes”) — that is application logic, not this picker.

Install with npx base-ui-cli add time-picker.

freenew

Playground

Hour cycle

Disabled

HTML

<base-time-picker
  [(ngModel)]="time"
  hourCycle="24"
  [disabled]="false">
</base-time-picker>

24-hour

Start

Value: 09:30

HTML

12-hour

Appointment

HTML

Keyboard & accessibility

Role: The trigger is a combobox. The panel is a dialog-like list of hours and minutes.
Focus: Focus moves into the overlay when it opens and returns to the trigger on close.

Shortcuts

EnterOpen or confirm the overlay
ArrowUpIncrement the focused unit
ArrowDownDecrement the focused unit
EscClose without applying

Site-wide VPAT-style notes live on the accessibility report.

Installation

Run the following command to add this component to your project:

bash

npx base-ui-cli add time-picker

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.

bash

npx -y base-ui-mcp

Base UI provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx base-ui-cli add time-picker
// Paths are relative to aliases.components (default: src/app/components)
import { TimePickerComponent } from './time-picker/time-picker.component';

@Component({
  selector: 'app-your-component',
  imports: [
    TimePickerComponent
  ],
  template: `...`
})
export class YourComponent {}

API for time-picker — generated from JSDoc in the library source.

API reference for time-picker
API	Member	Type	Default	Description
`base-time-picker`	`class`	`string`	`''`	Additional host classes.
`base-time-picker`	`label`	`string`	`''`	Visible label above the field.
`base-time-picker`	`placeholder`	`unknown`	`'Select time'`	Placeholder when no time is selected.
`base-time-picker`	`hourCycle`	`TimePickerHourCycle`	`'24'`	12-hour or 24-hour clock.
`base-time-picker`	`minuteStep`	`number`	`5`	Minute increment (1, 5, or 15).
`base-time-picker`	`inline`	`boolean`	`false`	Inline panel instead of an overlay (used inside datepicker datetime mode).
`base-time-picker`	`disabled`	`boolean`	`false`	Disables the field. Also set by Angular Forms via `setDisabledState`.
`base-time-picker`	`(timeChange)`	`string`	—	Emits `HH:mm` when the time changes.