Time Picker

Name: Boreal UI
Author: Davin Chiupka

The TimePicker component provides a styled time input with labels, helper text, and native picker access.

Usage & Examples

Reminder time

Uses 24-hour time.

reminder-time.tsx

<TimePicker
    label="Reminder time"
    defaultValue="09:30"
    helperText="Uses 24-hour time."
  />

Time Picker props API
				Default	Description
`autoComplete`	`React.HTMLInputAutoCompleteAttribute`	No	props	`"off"`	Optional autocomplete value.
`buttonClassName`	`string`	No	props	`—`	Additional class name for the picker trigger button.
`className`	`string`	No	styling	`—`	Additional class name for the component root.
`containerClassName`	`string`	No	props	`—`	Additional class name for the outer label/component container.
`data-testid`	`string`	No	testing	`—`	Backward-compatible alias for test ID attributes.
`defaultValue`	`string`	No	props	`—`	Initial time value in HH:mm or HH:mm:ss format for uncontrolled usage.
`disabled`	`boolean`	No	props	`false`	Whether the component is disabled.
`errorClassName`	`string`	No	props	`—`	Additional class name for error text.
`errorMessage`	`ReactNode`	No	props	`—`	Error text connected with aria-errormessage and announced as an alert.
`fullWidth`	`boolean`	No	props	`false`	Whether the picker should stretch to the full available width.
`helperText`	`ReactNode`	No	props	`—`	Helper text connected with aria-describedby.
`helperTextClassName`	`string`	No	props	`—`	Additional class name for description text. Additional class name for helper text.