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.

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.

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.

Sets autofocus on page load.

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

Sets the component in a compact state.

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).

Direction of the layout of the component. Can either be a predefined value or a pattern separated by a space like xx xxxxx.

Disables the component.

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

Can be a string or an array of string containing the messages to display. They render in an aria-live="polite" region (announced when they appear) and, while the list is non-empty, are referenced FIRST from the segment inputs' aria-describedby, so the reason the field is invalid is re-read whenever a segment regains focus.

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 identifier of the component.

Text content of the label of the element.

Label rendering mode.

Sets the text alignment of the label.

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

Maximum selectable time in HH:mm format. Values outside the pattern throw during setup to surface configuration mistakes.

Minimum selectable time in HH:mm format. Values outside the pattern throw during setup to surface configuration mistakes.

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.

Props for the phone sheet. A pt inside it, object or colon keys, styles only that sheet. Extra props forwarded to the BbOffCanvas sheet when adaptive is active on mobile (e.g. title, size, persistent). Spread over the defaults: the sheet is draggable (the time wheels never drag it) and hides its ✕ (picking, backdrop, Escape and drag close it); pass { hideClose: false } to bring the ✕ back. A pt inside it styles ONLY the sheet, in BbOffCanvas's part words (root, header, title, description, content, footer, close; state open), object ({ pt: { header: '…' } }) or colon keys ({ 'pt:header': '…' }) alike. It merges after what this component forwards to its sheet, so it wins a conflict and drops nothing — see the passthrough guide § Inside the sheet. For this component it is the only way to style the sheet's header, title and ✕: none of its own parts reach inside the sheet.

Keeps the hint displayed.

String displayed when there's no data.

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.

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

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.

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 minute column and its arrow stepping. Constrains what the columns produce, never what typing accepts.

Transition duration, in milliseconds, for the popover appearance.

Visual variant of the field box — the same names and tokens as the BbButton variants. Colours only: height, padding and border width are identical across variants, so a form never reflows when one changes. 'ghost' has no border in any state (errors and warnings show through the icon and the messages); every variant keeps the focus ring. Register extra names with the plugin's inputVariants option.

Warning messages to display beneath the field, in their own aria-live region and amber (--bb-text-warn). A string or array; a non-empty list implies the warning state. Errors suppress warnings when both are set. While displayed they are also referenced from the control's aria-describedby, after any errors and before the description/hint.

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.