BbTimePickerInput

On mobile the time columns open inside a bottom off-canvas sheet instead of a floating popover. When unset, falls back to the global config.adaptive.

Set it per instance only to disagree with the app-wide config.adaptive, or to false for viewport-independent tests.

12-hour display with an AM/PM segment. Purely a field-composition concern: the model stays 24-hour. Type A/P (or ArrowUp/Down) to set the meridiem.

Display only: the model still holds 24-hour text, so a form submits the same value whichever way the field shows it.

Name of the icon to be added at the end of the input.

Guides the browser as to the type of information expected in the field.

Focuses the field when it mounts (a dialog already open included), unless the user is typing in another field.

Displays a clear button when the input has a value and is being interacted with.

Compact density: the field uses the -compact twins of --bb-input-h, --bb-input-py and --bb-label-spacing-y, so a --bb-input-h set on the component is ignored while it is on. Size a compact field with --bb-input-h-compact (and --bb-input-py-compact).

Descriptive text displayed below the label and above the input. Always visible and linked to the input via aria-describedby (after any errors / warnings, before the hint).

Disables the component.

Disables typing into the input. Use 'mobile' / 'desktop' to disable typing on one platform only.

Reach for "mobile" when touch users should pick from the columns while desktop users keep typing.

Error messages under the field, a string or string array. They render in an aria-live="polite" region and are referenced first from the segment inputs' aria-describedby, so they are re-read when a segment regains focus.

Keep this control out of the enclosing BbForm entirely: not submitted, not dirty, not reset, not validated. For a control that is not form data (a filter, a "show advanced" switch).

Define if the component should be in an error state. It usually attaches a CSS class for styling purposes.

Define if the component should be in a warning state. Same chrome as errors with --bb-warn; errors take priority.

Visually hides the label of the input while maintaining accessibility.

Text box to be displayed near the input, usually to indicate instructions.

The id of the native control; the label's for and the description and message ids derive from it. Generated when omitted.

Vertical position of the control in a side-by-side row; not inputPosition, the horizontal one. Omitted, the control's first line meets the label's.

Text content of the label of the element.

Vertical position of the label block in a side-by-side row; not labelPosition, the horizontal one. Omitted, the label's first line meets the control's.

Label rendering mode.

Sets the text alignment of the label.

How label and input sit together: 'vertical', 'horizontal' (50/50), 'auto', 'label-fill', 'input-fill', a ratio like 'xx xxxxx', or a per-breakpoint map ({ default: 'vertical', md: 'xx xxxxx' }).

Sets the component in a loading state, usually triggering some visual styles.

Maximum selectable time, HH:mm (other shapes throw at setup). The columns disable the entries no in-range time can use; a typed value (or an hour beside an out-of-range minute) is clamped with a disabled_time error.

Later times are disabled in the columns. A typed value past the bound is clamped on commit and reported through error, so turn that payload into a message of your own.

Minimum selectable time, HH:mm (other shapes throw at setup). The columns disable the entries no in-range time can use; a typed value (or an hour beside an out-of-range minute) is clamped with a disabled_time error.

Earlier times are disabled in the columns. A typed value before the bound is clamped on commit and reported through error, so turn that payload into a message of your own.

v-model value: null for empty, a 24-hour HH:mm (or HH:mm:ss with seconds) string, or a two-element array when range is true.

Defines the name of the input.

label does not supply the native name. Set it whenever the value is submitted with a plain form; inside a BbForm it is the field key.

Props for the phone sheet (the BbOffCanvas that adaptive renders on mobile), spread over its defaults. A pt inside it styles only the sheet (passthrough guide § Inside the sheet). The sheet hides its ✕; { hideClose: false } brings it back.

Keeps the hint displayed.

Text shown while the field is empty.

Name of the icon to be added at the start of the input.

Passthrough, object form: the same keys as the pt:* attributes without the prefix. See the pt:<part> row.

Passthrough, attribute form: one attribute per part, pt:<part>, and per part and state, pt:<part>:<state>. Parts: activator, box, cellColumnHeader, clear, description, header, hint, icon, input, item, label, message, panel, prefix, root, sheet, spinner, suffix. States: disabled, errors, ghost, hasValue, loading, open, outline, readonly, secondary, selected, warnings.

Range selection: v-model expects a two-element array [start, end]. An inverted pair swaps on finalize with an end_before_start error.

Keep the model an array: seed and clear it with []. A reversed pair is swapped, so the field cannot hold a window across midnight: use BbTimePicker for a night shift.

Sets the input in a readonly state.

Sets the input as required.

Reverses the layout: the order of the label and the input is swapped.

vee-validate rules for this field. Only inside a BbForm.

Adds the seconds segment. Without it an incoming value carrying seconds displays truncated and zeroes out on the next user commit.

Minute granularity for the popover minute column. Constrains what the columns produce, never what typing accepts; ArrowUp/Down on a segment always step by 1.

Transition duration, in milliseconds, for the popover appearance.

The field's name in validation messages ({field}): "Email is not valid". Defaults to the label (or legend), then "This field"; never the name. Set it when the label is hidden or reads badly in a sentence (icon-only, a question). BbForm only.

When the field validates: aggressive (each change), balanced (on leave, then live while in error), lazy (on leave), submit-only, submit-live. Unset: the BbForm's validation-mode, then formControls.validationMode ('balanced'). BbForm only.

The field box's look, with BbButton's names and tokens. Colours only, so a form never reflows; 'ghost' has no border in any state, 'none' no look at all (you own hover, focus and the states). Register more with the plugin's inputVariants.

Warning messages under the field, a string or array: amber, in their own aria-live region and in the control's aria-describedby after the errors. Non-empty turns on the warning state; errors win when both are set.

A wall-clock string with no date or timezone. Never parse it with new Date('09:00'); attach the relevant date first.

Emitted when the composite control receives focus.

Emitted on every normalization (clamped time, swapped range).

Fires when a commit was corrected: code is disabled_time (a typed time clamped to a bound) or end_before_start (range swapped), with the original and normalized values. Map it to errors and clear them on active.

Emitted when a native text field inside the control gains focus.

Emitted once the time panel has finished closing.

Emitted as soon as the time panel starts to close.

Emitted when focus/click moves outside the composite control.

Emitted as soon as the time panel (the popover, or the sheet on a phone) starts to open.

Emitted once the time panel is open and its open transition has finished.

Emitted whenever the selected time changes. null for cleared values, a HH:mm(:ss) string, or an array in range mode.

Content rendered after the time fields (before the clock button).

Content rendered after the entire control, outside the input chrome.

Replaces the description text. Provided alone (no description prop) it still renders the description region and wires it into aria-describedby.

Replaces the default label text rendered above the input.

Inline content at the start of the field area.

Content rendered before the time fields, at the start of the field box.

Content rendered before the entire control, outside the input chrome.

Inline content at the end of the field area.