Specialized inputs

AppTimePicker

A time-of-day field with a scrollable listbox — the one way to capture a time.

<app-time-picker label="Schedule time" name="scheduleTime" />

A time picker captures a time of day (hours and minutes) through a scrollable listbox — a meeting time, a schedule slot, a booking time. <app-time-picker> is the one way to capture a time; never fall back to a raw <input type="time">, whose look and behaviour change with every browser and operating system.

It renders the shared <wui-timepicker> control and takes its look entirely from @webority/theme, so the Razor <app-time-picker> and the React <AppTimePicker> render an identical listbox on every Webority surface.

Playground

Every attribute, live. Each change re-renders the real tag helper on the server, so the markup underneath is the exact call that produced the field above it.

<app-time-picker label="Meeting time" name="meetingTime" value="14:30" />
Menu open motion product-wide via data-wui-menu-motion — pick one, then open the menus below

Value and onChange

The field is form-associated — value seeds the initial time string (HH:mm in 24-hour format) and it posts the chosen time under name. The element also dispatches a native change event you can listen for. Store and compare the HH:mm string, never a localized label.

A labelled time field
The value is always a 24-hour HH:mm string — store and compare that, never a localized label.
Show code 
<app-time-picker label="Schedule time" name="scheduleTime" />
Never a raw native time inputA bare <input type="time"> renders a different widget in every browser and OS, and can't match the portal's chrome. <app-time-picker> gives one listbox everywhere, styled from the shared theme.

Min and max

Constrain the selectable window with min and max — the listbox skips everything outside it, so an invalid time is impossible to pick.

Restrict to a valid window
Both bounds are HH:mm strings. Prefer this over accepting any time and rejecting it afterwards.

Business hours only (09:00–17:00) — times outside the window can't be picked.

Show code 
<app-time-picker label="Meeting time" name="meetingTime" value="14:30" min="09:00" max="17:00" />

Step

step sets the granularity (in minutes) — how many minutes between options in the listbox. Default is 30 minutes.

Different step values
30 minutes (default) suits most schedules; 15 minutes for fine-grained bookings.
Show code 
<app-time-picker label="30-minute step" name="step30" />
<app-time-picker label="15-minute step" name="step15" step="15" />

Display format

format sets how times are displayed: '24' (default) shows 14:30, '12' shows 2:30 PM. The wire value is always 24-hour HH:mm.

Display formats
format is display-only — the value always stores and posts as 24-hour HH:mm.
Show code 
<app-time-picker label="24-hour" name="fmt24" format="24" />
<app-time-picker label="12-hour" name="fmt12" format="12" />

Placeholder

placeholder sets the empty-state hint inside the field. It supplements a label — it never replaces one.

Custom empty-state text
The default is "Select time"; override it to fit the field.
Show code 
<app-time-picker label="Booking time" name="bookingTime" placeholder="Pick a meeting time" />

Width

The field defaults to a fixed, compact width — a time is a single short value. Resize it with a time-w-* class (time-w-sm, time-w-md, time-w-lg, time-w-full), or set the --wui-timepicker-width variable to any value.

Sizing the field
time-w-full restores the full-column width that aligns with other form fields.
Show code 
<app-time-picker label="Small" class="time-w-sm" />
<app-time-picker label="Large" class="time-w-lg" />
<app-time-picker label="Full" class="time-w-full" />

Sizes

size sets the control height — sm, md (default), lg — reusing AppInput's tiers so a time field lines up with the inputs beside it.

Three heights
The value and clock icon scale with the trigger.
Show code 
<app-time-picker label="Small" size="sm" />
<app-time-picker label="Medium" />
<app-time-picker label="Large" size="lg" />

When to use

Use it when

  • Capturing a time of day — a meeting time, a schedule slot, a booking time.
  • You need one consistent time picker across every browser and both surfaces.
  • Restricting selection to a valid window with min / max.
  • Controlling step granularity (15, 30, or 60 minutes).

Reach for something else when

  • You need both a date and a time. → AppDatePicker + AppTimePicker
  • The value is free text, not a time. → AppInput
  • You are picking from a fixed list of labels. → AppSelect

Every option

The whole surface of the component, one cell per value — every format, size, and combined state.

format — 24 vs 12-hour display

format="24"
format="12"

size — every height tier

(default) md
size="sm"
size="lg"

min / max — restricted windows

min="09:00" max="17:00"
min="00:00" max="12:00" (morning only)

step — granularity in minutes

step="15"
step="30"
step="60"

state — empty, disabled, error, required

(empty, no value)
disabled
error
A time is required
required + error
A time is required
hint
24-hour format
bare (no label/hint/error)

Attributes

AttributeTypeDefaultDescription
labelstring—Field label above the control.
namestring—Form field name — the key the value posts under.
valuestring—Selected time as a HH:mm string (24-hour format).
minstring—Earliest selectable time (HH:mm). Times before it are disabled.
maxstring—Latest selectable time (HH:mm). Times after it are disabled.
stepnumber30Step granularity in minutes — how many minutes between options in the listbox.
format12 | 2424Display format: 12-hour or 24-hour. Wire format is always 24-hour HH:mm.
placeholderstringSelect timeEmpty-state text inside the field.
requiredboolfalseRenders the required asterisk on the label.
hintstring—Helper text below the control (hidden when error is present).
errorstring—Validation message; replaces the hint and marks the field invalid.
sizestring—Control height tier: sm / lg. Omit for the default (md).
disabledboolfalseDisables the field.
input-classstring—Extra classes on the control itself (the wui-timepicker) — the React className counterpart. The plain class attribute merges onto the .field wrapper instead.