Default (24-hour)

Start time

24-hour format, any minute precision

<InputTimePicker Label="Start time"
                 @bind-SelectedTime="defaultTime"
                 Hint="24-hour format, any minute precision" />

@code {
    private TimeOnly? defaultTime;
}

12-hour format with AM/PM

Appointment time

Selected: 02:30 PM

<InputTimePicker Label="Appointment time"
                 Format="12h"
                 @bind-SelectedTime="twelveHourTime" />

Minute step variants

Step 5

Step 10

Step 15

Step 30

<InputTimePicker Label="Step 5"  MinuteStep="5"  @bind-SelectedTime="step5Time" />
<InputTimePicker Label="Step 10" MinuteStep="10" @bind-SelectedTime="step10Time" />
<InputTimePicker Label="Step 15" MinuteStep="15" @bind-SelectedTime="step15Time" />
<InputTimePicker Label="Step 30" MinuteStep="30" @bind-SelectedTime="step30Time" />

Required

Shift start*

Time is required

<InputTimePicker Label="Shift start"
                 Required="true"
                 HasError="true"
                 ErrorMessage="Time is required"
                 @bind-SelectedTime="requiredTime" />

Range validation (business hours 09:00–17:00)

Meeting time

Pick a time during business hours

Selected: 10:30

<InputTimePicker Label="Meeting time"
                 MinTime="@(new TimeOnly(9, 0))"
                 MaxTime="@(new TimeOnly(17, 0))"
                 @bind-SelectedTime="rangeTime"
                 Hint="Pick a time during business hours" />

External error message

Departure

Pick a time after your arrival

<InputTimePicker Label="Departure"
                 ErrorMessage="Pick a time after your arrival"
                 @bind-SelectedTime="customErrorTime" />

With label, hint, and help

Reminder*

Defaults to your local timezone

<InputTimePicker Label="Reminder"
                 Required="true"
                 ShowHelp="true"
                 HelpText="We'll send a notification at this time"
                 Hint="Defaults to your local timezone"
                 @bind-SelectedTime="fullChromeTime" />

Disabled

Locked time

<InputTimePicker Label="Locked time"
                 Disabled="true"
                 SelectedTime="@(new TimeOnly(14, 30))" />

Paired with InputDatePicker

Date

Time

Selected: May 17, 2026 at 09:00 AM

<div style="display: grid; grid-template-columns: 2fr 1fr; gap: 1rem;">
    <InputDatePicker Label="Date" @bind-SelectedDate="pairedDate" />
    <InputTimePicker Label="Time" Format="12h" MinuteStep="15" @bind-SelectedTime="pairedTime" />
</div>

Input Time Picker