BankaiInput
A raw native <input> with a typed size, native disabled/readonly, and a string v-model. It ships no CSS of its own — the theme styles the bankai-input class and its reflected state. This is the single-line text primitive that behavior-rich and wrapper components build on.
Example
Model: (empty)
Types
The named types (-like) are plain text with an on-screen-keyboard hint. Behavior-rich types get their own components so their extra UI and parsing live there, not behind a bare attribute: reach for BankaiInputNumber instead of type="number", and BankaiInputPassword instead of type="password" (planned).
Label, help & validation
BankaiInput is only the control. A label, description, and error message — plus required/invalid handling that avoids the browser's native validation bubble — will be composed by a future BankaiField wrapper, so those concerns are intentionally not on the raw input.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | 'text' | 'email' | 'search' | 'tel' | 'url' | (string) | 'text' | Native input type. A named text step (text/email/search/tel/url) is what this component is for; any other string still passes through. Behavior-rich types have dedicated components (BankaiInputNumber, BankaiInputPassword). |
size | 'sm' | 'md' | 'lg' | (string) | 'md' | Size scale. A named step (sm/md/lg) is themed; any other string reflects verbatim as data-bankai-size as an escape hatch for a custom consumer-styled size. |
disabled | boolean | false | Disable the input via the native disabled attribute. |
readonly | boolean | false | Make the input read-only via the native readonly attribute — the value shows and can be selected/copied but not edited (and, unlike disabled, it still submits with a form). |
model-value | string | — | The input's value, bound with v-model — string | undefined (see BankaiInputModelValue): a string once set, undefined while unset. An unset model is never coerced to '', which preserves the "never entered" vs "entered then cleared" distinction a future field/validation layer relies on. |
Emits
| Event | Type | Description |
|---|---|---|
@update:model-value | [value: string | undefined] |
Slots
This component has no slots.
Exposes
| Name | Type | Description |
|---|---|---|
el | HTMLInputElement | null | The underlying native <input> element, or null before mount / after unmount. |
focus | (options?: FocusOptions | undefined) => void | Focus the input (delegates to the native HTMLInputElement.focus). |
blur | () => void | Remove focus from the input (delegates to the native HTMLInputElement.blur). |
select | () => void | Select all editable text in the input (delegates to the native HTMLInputElement.select). |
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-fg | var(--bankai-color-fg) | Text color of the value. |
--bankai-input-bg | var(--bankai-color-bg) | Background fill of the field. |
--bankai-input-placeholder-color | var(--bankai-color-fg-subtle) | Color of the placeholder text. |
--bankai-input-border-width | 1px | Border width. |
--bankai-input-border-style | solid | Border style. |
--bankai-input-border-color | var(--bankai-color-border) | Resting border color. |
--bankai-input-radius | var(--bankai-radius) | Corner radius. |
--bankai-input-inline-size | 100% | Width of the field (100% fills its container by default). |
--bankai-input-font | inherit | Font shorthand (inherits the surrounding text by default). |
--bankai-input-transition | color 150ms ease, background-color 150ms ease, border-color 150ms ease | Transition applied to color changes. |
--bankai-input-focus-ring | var(--bankai-focus-ring) | Color of the focus-visible outline. |
--bankai-input-focus-border-color | var(--bankai-color-accent) | Border color while focused. |
--bankai-input-focus-outline-width | 2px | Width of the focus-visible outline. |
--bankai-input-focus-outline-offset | 2px | Offset of the focus-visible outline. |
--bankai-input-readonly-bg | var(--bankai-color-surface) | Background fill while read-only. |
--bankai-input-disabled-opacity | 0.5 | Opacity while disabled. |
--bankai-input-disabled-cursor | not-allowed | Cursor while disabled. |
--bankai-input-sm-padding-y | var(--bankai-space-1) | Vertical padding of the small size. |
--bankai-input-sm-padding-x | var(--bankai-space-4) | Horizontal padding of the small size. |
--bankai-input-sm-font-size | var(--bankai-text-size-sm) | Font size of the small size. |
--bankai-input-md-padding-y | var(--bankai-space-3) | Vertical padding of the medium size. |
--bankai-input-md-padding-x | var(--bankai-space-6) | Horizontal padding of the medium size. |
--bankai-input-md-font-size | var(--bankai-text-size-md) | Font size of the medium size. |
--bankai-input-lg-padding-y | var(--bankai-space-4) | Vertical padding of the large size. |
--bankai-input-lg-padding-x | var(--bankai-space-8) | Horizontal padding of the large size. |
--bankai-input-lg-font-size | var(--bankai-text-size-lg) | Font size of the large size. |