# TimePicker

Source: https://lumeo.nativ.sh/components/time-picker

# TimePicker

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

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## 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

Preview Code

Basic TimePicker

14:30

Selected: 14:30

Preview Code

12-Hour Format

09:00 AM

Preview Code

With Seconds

Select time

Preview Code

Minute Step

Select in 15-min intervals

Preview Code

Wheel Variant (Mobile)

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](/components/date-picker) — Date selection when you also need a calendar
-   [DateTimePicker](/components/date-time-picker) — Combined date and time picker in a single control
-   [Input](/components/input) — Basic text input for manual time entry