BbNumberInput

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

The append position is contested, by priority: clear button → spinner (loading) → error icon (hasErrors) → this. On a clearable or validatable field your icon is the first thing displaced, so prefer prepend:icon for decoration.

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.

Emits null, not 0 or ''. Suppressed on disabled and readonly fields, and it takes the append position from append:icon.

Sets the component in a compact state.

The only density knob — this family has no size scale. Set it per view rather than per field, so a form does not mix two control heights.

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

For what the user needs before typing. Anything about the acceptable range reads better in hint, next to the field they are about to get wrong.

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

Ignored — silently — unless the resolved label mode is outside. floating and inside embed the label in the field and force the vertical layout, including when the mode comes from defaultInputLabelMode rather than from the call site.

Disables the component.

Blocks everything, arrow-key stepping included. For a number that is derived or detected rather than forbidden, readonly keeps it legible and copyable.

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 control's aria-describedby, so the reason the field is invalid is re-read whenever the control regains focus.

Where a business rule lives, since min and max can only express a range and do it without a message. Non-empty is enough — hasErrors is only for when the message itself is elsewhere. Inside a validated form these merge with the rule messages rather than replacing them.

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

Forces the error chrome without a message of its own. Reach for it when the text lives in a summary alert above the form.

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

The amber counterpart of hasErrors, and equally a force-the-chrome flag. It never sets aria-invalid: a warning says "unusual", not "wrong".

Visually hides the label of the input while maintaining accessibility.

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

The natural home for the range or the unit, because min and max correct a value in silence. Pair with persistentHint when the range matters before focus, not just during it.

The identifier of the component.

Text content of the label of the element.

Names the field for display and for assistive technology only. It does not set name, and it is not the field name in a validated form either — that one is a slug of this text.

Label rendering mode.

Unset, it falls back to the project-wide defaultInputLabelMode, so a product can go all-floating from the plugin config without touching call sites. Do not pair floating with a placeholder — the resting label already occupies that spot.

Sets the text alignment of the label.

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

Visual only. The field stays editable underneath the spinner, so if an async check has to settle before the value is usable, guard that yourself.

Maximum value cap.

Clamps the emitted value with no message and no event, so a user who types past it sees their number change under them. Say the ceiling in hint before they reach it.

Maximum precision of the number.

0 pins the field to whole numbers and 2 to currency. It caps decimals as they are typed rather than rounding on blur.

Minimum value cap.

Clamps the emitted value in silence, the same way max does. It also makes a min_value rule redundant in a validated form: the value can never get low enough to fail it.

Used by v-model.

Accepts number | string | null and emits number | null. A cleared field emits null, never '' and never NaN, and an in-progress string (-, ., 12.) emits nothing until it parses.

Defines the name of the input.

Not derived from label. Leave it unset and the rendered <input> carries no name at all, so a native form post or a FormData read silently drops the value.

Keeps the hint displayed.

String displayed when there's no data.

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

The uncontested position: nothing in the component competes for it. Put decorative iconography here and keep append:icon for fields that are neither clearable nor validatable.

Passthrough, object form: { box: '…', 'box:errors': '…' } — the same keys as the pt:* attributes without the prefix. See the pt:<part> row.

Sets the input in a readonly state.

The right state for a number that is computed or detected rather than entered — a total, a weight read off a scale. Unlike disabled it stays legible and copyable, and it disables stepping just the same.

Sets the input as required.

Forwards to the native input and validates nothing on its own. In a validated form it is also one of the two things that raise the required asterisk, the other being a literal required rule.

Reverses the layout. Applicable in every direction the order of the label and the input is swapped.

Incremental unit used by ArrowUp / ArrowDown and by the increase and decrease functions the slots receive. It is NOT applied to manual input as a step of 5 would prevent the user from inserting a value like 115 because of rounding down.

Drives ArrowUp/ArrowDown and the increase/decrease slot functions, and never constrains typed input. If multiples are a real rule, enforce them through errors on blur or on submit.

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.

For a number that is valid and still worth a second look. Errors win when both are set and the warnings are suppressed, so the field is never amber and red at once.

Seed it with null for an empty field rather than 0 — 0 is a number someone chose, and on a floating label it also stops the label from resting inside the field.

Fires with the **new**, already clamped number, alongside update:modelValue. It is for reacting to a step, not for reading the value — v-model already has that.

Emits number | null. Do not add a watcher that re-parses or re-clamps what arrives here: the component has already done both.

Content rendered after the number input, at the end of the inner container. Typically used to place increment/decrement buttons next to the input.

Same { increase, decrease } scope as prepend, and the same accessible-name obligation.

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

The uncontested place for an action beside the field, since nothing inside the component competes for it.

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 number input.

Receives { text, hasErrors, hasWarnings }. Replacing it removes anything the control drew beside the label, the required asterisk included, so put BbAsterisk back by hand.

Inline content rendered at the start of the input field area, before the typed number.

Decoration only, inside the field. A currency symbol belongs here and never in the model.

Content rendered before the number input, at the start of the inner container.

Receives { increase, decrease }, which is how a minus button is built with no state on your side. It is icon-only, so give it an aria-label.

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

Outside the field chrome entirely. Reach for it when a stepper button should not sit inside the border — or when the append position is already taken by a clear button or a spinner.

Inline content rendered at the end of the input field area, after the typed number.

The unit — kg, °C, %. Like prefix it is inert, so anything interactive goes in prepend/append or the outer pair.