BankaiInputPassword
The reveal-toggle sibling of <input>: a masked single-line <input> whose password type flips to text when revealed. The value is a string v-model; the reveal state is v-model:revealed, so it drives the type whether or not the built-in button renders. Core ships no CSS — the theme styles the bankai-input field and the reveal button.
Example
Model: hunter2 · revealed: false
The reveal toggle
By default a reveal button sits on the field's trailing edge; it flips the value between masked and visible and syncs v-model:revealed. Bind that model to drive the reveal from your own control, or drop the built-in button entirely with :toggle="false". Swap the button's icon/label through the #toggle slot (it receives the current revealed state).
Custom icon via the toggle slot
No reveal button
Accessibility
The reveal button is a real, focusable, tab-order control. Its accessible name swaps between inputPassword.show while masked and inputPassword.hide while revealed — announcing both the action and the current state — and is overridable per instance via showLabel / hideLabel.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
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 the reveal button). |
readonly | boolean | false | Make the control read-only via the native readonly attribute — the value shows and can be selected/copied but not edited (the reveal button still works). Unlike disabled, it still submits with a form. |
toggle | boolean | true | Render the built-in reveal toggle. true (default) wraps the field in a <div class="bankai-input-password"> and adds a reveal <button data-part="toggle">. false renders just the bare <input> with no wrapper or button — revealing then requires driving v-model:revealed from a consumer control (the reveal still flips the input type). The reveal state itself is v-model:revealed, independent of this prop. |
show-label | string | — | The reveal button's accessible name (and its visible label, when the toggle slot is not used) while the password is masked — activating it reveals the value. Overrides the resolved inputPassword.show message for this instance; unset, it resolves through the global i18n config (BankaiI18nConfig ), defaulting to the English 'Show password'. |
hide-label | string | — | The reveal button's accessible name (and its visible label, when the toggle slot is not used) while the value is revealed — activating it masks the value again. Overrides the resolved inputPassword.hide message for this instance; unset, it resolves through the global i18n config (BankaiI18nConfig ), defaulting to the English 'Hide password'. |
model-value | string | — | The password value, bound with the default v-model — string | undefined (see BankaiInputPasswordModelValue): a string once set, undefined while unset. |
revealed | boolean | false | Whether the value is revealed, bound with v-model:revealed (default false). Drives the input type (text when revealed, password when masked) and the reveal button's label/state — independent of the toggle prop, so a consumer can drive it from their own control even with the built-in button off. |
Emits
| Event | Type | Description |
|---|---|---|
@update:model-value | [value: string | undefined] | |
@update:revealed | [value: boolean] |
Slots
| Slot | Description |
|---|---|
#toggle | Content of the reveal button (defaults to the current showLabel / hideLabel text). Receives the current revealed state so a consumer can swap the icon/label (e.g. an eye ↔ eye-off BankaiIcon). The button keeps its accessible name from the labels regardless of what this slot renders. Only rendered when toggle is true. |
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-password-radius | var(--bankai-input-radius, var(--bankai-radius)) | Outer corner radius of the field + reveal-button group. |
--bankai-input-password-toggle-padding-inline | var(--bankai-space-4) | Horizontal padding inside the reveal button. |
--bankai-input-password-toggle-bg | var(--bankai-color-surface) | Background fill of the reveal button. |
--bankai-input-password-toggle-fg | var(--bankai-color-fg) | Text/glyph color of the reveal button. |
--bankai-input-password-toggle-border-width | var(--bankai-input-border-width, 1px) | Border width of the reveal button. |
--bankai-input-password-toggle-border-color | var( --bankai-input-border-color, var(--bankai-color-border) ) | Border color of the reveal button. |
--bankai-input-password-toggle-font-size | var(--bankai-text-size-sm) | Font size of the reveal button's label. |
--bankai-input-password-toggle-hover-bg | var(--bankai-color-bg) | Background fill of the reveal button on hover. |
--bankai-input-password-toggle-disabled-opacity | 0.5 | Opacity of the reveal button while disabled. |
--bankai-input-password-toggle-disabled-cursor | not-allowed | Cursor over the reveal button while disabled. |
--bankai-input-password-toggle-transition | color 150ms ease, background-color 150ms ease | Transition applied to the reveal button's color changes. |