Static WebAssembly demo on GitHub Pages. Everything runs in your browser; server-only features use labeled stand-ins. Run locally for the full Blazor Server experience.

ComponentsPickers and uploads

Time picker

A text field that opens a clock face. Choose it for a time of day, such as an appointment or a shift; for durations, use a numeric field instead.

Basic usage

Bind a nullable TimeSpan with @bind-Time. The value is a time of day, not a date.

Telescope slot
Slots last 30 minutes

Your slot starts at 21:30.

12-hour and 24-hour clocks

AmPm switches to a 12-hour clock with AM and PM. TimeFormat controls the text in the field independently.

Departure (24-hour)
Default clock
Departure (12-hour)
AmPm with its default format
Departure (custom text)
TimeFormat="h:mm tt"

Static clocks

A clock that is always open, in portrait or landscape and in any theme color.

Portrait, 24-hour

13

14

15

16

17

18

19

20

21

22

23

00

01

02

03

04

05

06

07

08

09

10

11

12

00

05

10

15

20

25

30

35

40

45

50

55

Landscape, 12-hour, secondary color

1

2

3

4

5

6

7

8

9

10

11

12

00

05

10

15

20

25

30

35

40

45

50

55

Minute steps and edit modes

MinuteSelectionStep snaps minutes to a grid. OpenTo starts on minutes, and TimeEditMode restricts editing to hours or to minutes.

Meeting (15-minute steps)
Minutes snap to :00, :15, :30 and :45
Reminder (opens on minutes)
Starts on the minute dial, 5-minute steps
Change the hour only
Change the minutes only

Every variant and adornment

The closed field shares its Variant and adornment placement with every other picker.

MudTimePicker: Variant × Adornment
Variant ↓ · Adornment →NoneStartEnd
Text
Filled
Outlined
Pickup
Pickup
Pickup

Typing and validating a time

Editable fields accept typed times. A validation function keeps the value inside opening hours.

Flour delivery
The bakery receives deliveries from 05:00 to 11:00

Bound value: 06:30:00

Action buttons

PickerActions adds a shortcut for the current time and explicit Cancel and OK buttons.

Meter reading taken at

Committed: 09:00

Playground

Change the parameters; the markup below lists only what differs from the defaults.

Doors open
Label
Variant
Picker variant
Color
Orientation
Time edit mode
Minute step
<MudTimePicker @bind-Time="_time" Label="Doors open" Variant="Variant.Outlined" />

Starting .NET in your browser…