TimePicker New Alpha

Usage

Time Picker pairs the browser's native time field with a dropdown of quick options. People can type a time directly — the native field handles locale-aware display and validation — or pick a common time from the list, which is generated at a configurable interval between start and end.

The value is held in ISO HH:mm format, regardless of how the field is displayed for the user's locale.

The time picker renders its built-in label, hint and error on its own. Wrapped in a Field, the Field takes over with a Field Label, Field Description and Field Error, and the built-in versions step aside automatically.

import "@nordhealth/components/lib/TimePicker"
import "@nordhealth/components/lib/Field"
import "@nordhealth/components/lib/FieldLabel"
import "@nordhealth/components/lib/FieldDescription"
import "@nordhealth/components/lib/FieldError"

Standalone or inside a Field

Use the control on its own with its built-in label, hint and error, or wrap it in a Field — the Field then provides the labelling. Both render the same control:

Examples

Interval

Use start, end and interval to control the generated options. The default is every 30 minutes between 09:00 and 17:00.

Sizes

Use the size attribute to match the surrounding form.

Error

Show validation with a Field Error and mark the Field invalid.

Disabled

Accessibility

• The field is the browser's native time input, so typing, keyboard editing of the hour/minute segments, and validation work as users expect.
• The dropdown is an additional shortcut; the time can always be entered without it.
• Always wrap the picker in a Field with a Field Label so its purpose is announced to assistive technology. When used without a Field, set an aria-label on the picker.