TimePicker Component

This component is considered alpha. We're still finalising the API, so it may include a breaking change at any time — use it at your own risk.

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:

Inline

With Field

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

Read-only

Add readonly to show the committed value with a normal field appearance — unlike disabled it isn't dimmed, but the value can't be changed.

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.

API reference

TimePicker

Time Picker pairs the browser's native time field with a dropdown of quick options, generated at a configurable interval between start and end. The native field handles typing, locale-aware display and validation; the dropdown is a shortcut for common times. The value is held in ISO HH:mm format. Like a native input, Time Picker is a control only — it has no built-in label, hint or error. Compose it inside a Field (with a Field Label, Field Description and Field Error) to label it and add help or error text.

<nord-accordion></nord-accordion>

Props

Property	Attribute	Description	Type	Default
`value`	`value`	The selected time, in ISO `HH:mm` format.	`string \| undefined`	—
`name`	`name`	Name submitted with the form.	`string \| undefined`	—
`start`	`start`	Earliest time offered in the dropdown, ISO `HH:mm`.	`string`	`'09:00'`
`end`	`end`	Latest time offered in the dropdown, ISO `HH:mm`.	`string`	`'17:00'`
`interval`	`interval`	Minutes between each option in the dropdown.	`number`	`30`
`roundToInterval`	`round-to-interval`	When set, a typed time is rounded to the nearest interval option; otherwise any time is accepted.	`boolean`	`false`
`hourFormat`	`hour-format`	Display dropdown times in 12-hour (AM/PM) or 24-hour format; omit to use the locale default.	`'12h' \| '24h' \| undefined`	—
`min`	`min`	Earliest time the field will accept, ISO `HH:mm`.	`string \| undefined`	—
`max`	`max`	Latest time the field will accept, ISO `HH:mm`.	`string \| undefined`	—
`size`	`size`	Size of the field.	`'s' \| 'm' \| 'l'`	`'m'`
`expand`	`expand`	Whether the field expands to fill its container.	`boolean`	`false`
`disabled`	`disabled`	Whether the field is disabled.	`boolean`	`false`
`readonly`	`readonly`	Whether the field is read-only.	`boolean`	`false`
`required`	`required`	Whether a value is required when submitting a form.	`boolean`	`false`
`label`	`label`	Label for the control. Rendered by the inner input when used standalone; ignored when wrapped in a `<nord-field>` (the Field provides the label).	`string \| undefined`	—
`hint`	`hint`	Optional hint text. Ignored inside a `<nord-field>`.	`string \| undefined`	—
`error`	`error`	Optional error text. Ignored inside a `<nord-field>`.	`string \| undefined`	—
`hideLabel`	`hide-label`	Visually hide the label, but keep it for assistive technology.	`boolean`	`false`
`hintBelow`	`hint-below`	Render the hint below the control instead of below the label.	`boolean`	`false`
`hideRequired`	`hide-required`	Visually hide the required indicator, but keep the required state for AT.	`boolean`	`false`

Methods

Method name	Parameters	Description
`focus() => void`	N/A	Move focus to the field, so a Field Label's click-to-focus works.

Event	Detail Type	Description
`change`	`NordEvent`	Fired when the selected time changes.

Dependencies

This component is internally dependent on the following components:

TimePicker New Alpha