BankaiInputNumber
The behavior-rich type="number" sibling of <input>: a v-model typed as a number, native min/max/step, and a mobile keyboard that adapts to the step. It's a bare <input> by default — set buttons to add stepper controls that drive the platform's own stepUp()/stepDown(). The native input stays the accessible spinbutton; core ships no CSS, so the theme styles the bankai-input field and controls.
Example
Model: 3
Stepper buttons
By default there are no visible controls — just the field (the arrow keys still step). Set buttons to add them, in one of two layouts: "stacked" (a vertical pair on the trailing edge) or "split" (−/+ flanking the field). The browser's own spin buttons are always hidden — they can't be styled consistently across engines (Firefox offers no hook at all), so the component ships its own.
Stepping & bounds
The controls, arrow keys, and step all move the value by the same increment; min/max clamp it and disable the matching control at the bound. An empty field is undefined — never coerced to 0 — so a wrapping field/validation layer can tell "no number yet" from a real value.
Mobile keyboard
On touch devices the inputmode attribute chooses the on-screen keyboard. It defaults from step — "numeric" for an integer step, "decimal" for a fractional one — and an explicit inputmode prop overrides it.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
min | number | — | Minimum value, set as the native min attribute — the platform clamps stepping and flags out-of-range values. Also disables the decrement control once the value reaches it. |
max | number | — | Maximum value, set as the native max attribute — the platform clamps stepping and flags out-of-range values. Also disables the increment control once the value reaches it. |
step | number | 1 | Step granularity, set as the native step attribute — the amount each stepper control and each arrow-key press changes the value by, and the allowed value increments. Also drives the default inputmode (integer → 'numeric', fractional → 'decimal'). |
size | 'sm' | 'md' | 'lg' | (string) | 'md' | Size scale, forwarded to the field and reflected as data-bankai-size. A named step (sm/md/lg) is themed; any other string reflects verbatim as an escape hatch. |
disabled | boolean | false | Disable the control via the native disabled attribute (also disables both stepper controls). |
readonly | boolean | false | Make the control read-only via the native readonly attribute — the value shows and can be selected/copied but not edited, and both stepper controls are disabled. Unlike disabled, it still submits with a form. |
buttons | boolean | 'stacked' | 'split' | (string) | false | The stepper controls. false (default) renders just the bare <input> — no wrapper, no controls (keyboard/arrow-key stepping still works). true renders the controls in the default 'stacked' layout; a BankaiInputNumberButtons string ('stacked'/'split' or a custom value) picks the layout explicitly. Any truthy value wraps the field in a <div class="bankai-input-number"> and reflects the resolved layout as data-bankai-buttons. |
inputmode | 'numeric' | 'decimal' | (string) | — | Mobile keyboard hint, set as the native inputmode attribute. Defaults smartly from step ('numeric' for an integer step, 'decimal' otherwise); set explicitly to override. |
model-value | number | — | The numeric value, bound with v-model — number | undefined (see BankaiInputNumberModelValue): undefined while unset and whenever the field is empty or holds an incomplete/invalid entry. Never coerced to 0, so a wrapping field/validation layer can tell "no number yet" from an entered value. |
Emits
| Event | Type | Description |
|---|---|---|
@update:model-value | [value: number | undefined] |
Slots
| Slot | Description |
|---|---|
#decrement | Content of the decrement control (defaults to a minus glyph). Swap in an icon (e.g. BankaiIcon). Only rendered when buttons is truthy; the control is aria-hidden, so slot content is not announced. |
#increment | Content of the increment control (defaults to a plus glyph). Swap in an icon (e.g. BankaiIcon). Only rendered when buttons is truthy; the control is aria-hidden, so slot content is not announced. |
Exposes
| Name | Type | Description |
|---|---|---|
el | HTMLInputElement | null | The underlying native <input type="number"> element, or null before mount / after unmount. |
focus | (options?: FocusOptions | undefined) => void | Focus the input. |
blur | () => void | Remove focus from the input. |
select | () => void | Select the input's text. |
stepUp | (count?: number | undefined) => void | Increment the value by count steps (delegates to the native HTMLInputElement.stepUp, so it honors min/max/step). No-op while disabled/readonly. |
stepDown | (count?: number | undefined) => void | Decrement the value by count steps (delegates to the native HTMLInputElement.stepDown). No-op while disabled/readonly. |
Theming
Every token is a :root custom property applied through zero-specificity :where() rules, so a single plain declaration overrides one — no selector, no !important. Set it globally on :root or locally on any ancestor.
| Token | Default | Purpose |
|---|---|---|
--bankai-input-number-radius | var(--bankai-input-radius, var(--bankai-radius)) | Outer corner radius of the segmented group. |
--bankai-input-number-control-inline-size | 2.25rem | Inline size of each stepper control. |
--bankai-input-number-control-bg | var(--bankai-color-surface) | Background fill of the stepper controls. |
--bankai-input-number-control-fg | var(--bankai-color-fg) | Text/glyph color of the stepper controls. |
--bankai-input-number-control-border-width | var(--bankai-input-border-width, 1px) | Border width of the stepper controls. |
--bankai-input-number-control-border-color | var( --bankai-input-border-color, var(--bankai-color-border) ) | Border color of the stepper controls. |
--bankai-input-number-control-font-size | var(--bankai-text-size-md) | Font size of the stepper control glyphs. |
--bankai-input-number-control-hover-bg | var(--bankai-color-bg) | Background fill of a stepper control on hover. |
--bankai-input-number-control-disabled-opacity | 0.5 | Opacity of a stepper control while disabled. |
--bankai-input-number-control-disabled-cursor | not-allowed | Cursor over a stepper control while disabled. |
--bankai-input-number-control-transition | color 150ms ease, background-color 150ms ease | Transition applied to the stepper controls' color changes. |