Quaff

QTime

Time pickers combine a clock dial with numeric entry. Dialog and popup layouts support both 12- and 24-hour clocks.

info QTime API Source
interface QTimeProps extends Pick<Omit<HTMLInputAttributes, "value" | "disabled">, "aria-describedby" | "aria-label" | "id" | "tabindex">
autoApply
?: boolean = false
Commits and closes after minute selection is completed.
cancelLabel
?: string = undefined
Cancellation action label.
class
?: HTMLAttributes<HTMLDivElement>["class"] = undefined
Classes applied to the field wrapper.
confirmLabel
?: string = undefined
Confirmation action label.
defaultMode
?: QTimeDisplayMode = "dial"
Preferred opening mode. The dial falls back to input when it cannot fit.
dense
?: boolean = false
Makes the input component more compact.
disabled
?: boolean = false
Puts the component into a disabled state, which prevents user interaction.
error
?: boolean = false
Indicates an error state for the input.
errorMessage
?: string = undefined
Message to display when the input is in an error state. Overrides the hint prop when the input is in an error state.
filled
?: boolean = false
Applies a filled background style to the input.
format24h
?: boolean = undefined
Uses a 24-hour clock. By default, the hour cycle is derived from the locale.
hint
?: string = undefined
Helper text displayed below the input. When the input is in an error state, the helper text will be overwritten by the error message.
inputTitle
?: string = undefined
Supporting title above the modal text-input picker.
label
?: string = undefined
The text to be displayed in the component. When applicable, will overwrite the children snippet content.
labels
?: Partial<QTimeLabels> = undefined
Overrides the shared translations for accessible labels and validation messages.
locale
?: string = undefined
BCP 47 locale for time formatting and the hour cycle. Defaults to Quaff.init() locale.
open
?: boolean = $bindable(false)
Whether the picker overlay is open. This property is bindable.
outlined
?: boolean = false
Applies an outlined style to the input.
readonly
?: boolean = false
Prevents the picker from opening.
rounded
?: boolean = false
Makes the sides of the input round.
showModeToggle
?: boolean = true
Shows the modal dial/text-input toggle when the dial fits.
style
?: HTMLAttributes<HTMLDivElement>["style"] = undefined
Styles applied to the field wrapper.
title
?: string = undefined
Supporting title above the modal picker.
validationMessage
?: string = $bindable("")
Validation message for the bound value. This property is bindable.
value
?: QTimeValue = $bindable(undefined)
The bound value of the component.
variant
?: QTimeVariant = "modal"
Picker presentation. Adaptive uses docked at the shared sm breakpoint and a modal below it.

Usage

Variants

Docked
Use variant="docked" inside QInput's append snippet for an anchored dial. QInput remains the editable field and owns its label and mask.
HH:mm
Adaptive
Adaptive uses the shared Quaff sm breakpoint: it is docked at sm and wider, and modal below it. Use it when one editable input must work across screen sizes.
Resize the viewport to change the picker presentation

Behavior and Customization

Clock Format and Locale

locale controls localized display and the default 12- or 24-hour cycle. Use format24h to override the locale. The bound model is always canonical HH:mm, from 00:00 through 23:59.

Localization
Switch languages to see translated picker labels, buttons, and validation messages. The displayed time and default hour cycle follow the selected language's locale. See all available locales for more languages and setup instructions.
Drafts and Validation

Without autoApply, selections stay as a draft until OK is pressed. Cancel and Escape discard that draft. With autoApply, completing minute selection commits and closes the picker.

In a composed picker, bind QTime's validationMessage to QInput's error and errorMessage, as above. QInput's mask controls the editable shape; QTime validates the canonical model and the hour and minute ranges.

Programmatic Control and Labels

Bind open or call show() and hide() for programmatic control. Both disabled and readonly prevent opening.

Customize title, inputTitle, confirm and cancel labels, or use labels to override accessible text and validation messages.

Keyboard and Accessibility
QTime follows the Material time-picker dialog pattern. Arrow keys move between dial values and AM/PM options, Enter or Space selects, and Tab follows the dialog's focus order. In text-input mode, Enter moves from hours to minutes and then validates the draft. Escape closes without applying it, and focus returns to the trigger. Picker labels, selected states, errors, and time changes are exposed to assistive technology.
Privacy Policy