Lumeo

TimePicker

A time selection input with hour, minute, and optional second columns.

Installation

dotnet add package Lumeo

One-time app setup (AddLumeo(), CSS & JS) is covered in the installation guide.

Usage

@using Lumeo

<TimePicker />

When to Use

  • Standalone time selection for scheduling or alarm settings
  • Forms where only time input is needed without a date
  • Configuring time-based intervals like business hours or reminders
  • Time-of-day inputs with customizable step intervals

Selected: 14:30

00
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
00
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

API Reference

TimePicker

Property Type Default Description
Value TimeSpan? — The selected time value.
Use24Hour bool true Use 24-hour format. Set false for 12-hour with AM/PM.
ShowSeconds bool false Show seconds column.
MinuteStep int 1 Step interval for minutes.
Placeholder string? "Select time" Placeholder text when no value selected.
Disabled bool false Disable the picker.
SecondStep int 1 Step interval for seconds.
ValueChanged EventCallback<TimeSpan?> — Callback for two-way binding when the selected time changes.
Required bool false Marks the field as required. Syncs with a parent FormField.
Invalid bool false Applies error styling. Syncs with a parent FormField.
ErrorText string? null Error message displayed below the field when Invalid is true.
HelperText string? null Helper text shown below the field when not invalid.
Label string? null Label rendered above the field (standalone, without FormField).
Name string? null HTML name attribute for form submission.
FormField FormField.FormFieldContext? null Cascaded context from a parent FormField; wires label, validation, and required state automatically.
Variant TimePickerVariant List Calendar (default) or Wheel for iOS-style drum scrolling.
Culture System.Globalization.CultureInfo? null Overrides CurrentCulture for 24h/12h detection and AM/PM designators.

Related Components

  • DatePicker — Date selection when you also need a calendar
  • DateTimePicker — Combined date and time picker in a single control
  • Input — Basic text input for manual time entry