Import
import { InputPasswordModule } from '@backbase/ui-ang/input-password'
Usage
Use the bb-input-password-ui component to capture passwords with an optional visibility toggle.
<!-- Basic input password usage -->
<bb-input-password-ui
label="Password"
placeholder="Enter your password">
</bb-input-password-ui>
Inputs
|
Input |
Format |
Default |
|---|---|---|
|
autocomplete |
'new-password' | 'current-password' | 'on' | 'off' | 'one-time-code' |
undefined |
|
autofocus |
boolean |
false |
|
disabled |
boolean |
false |
|
inputClassName |
string |
undefined |
|
inputMode |
string |
'text' |
|
label |
string |
'' |
|
maxLength |
number |
undefined |
|
minLength |
number |
undefined |
|
placeholder |
string |
'' |
|
readonly |
boolean |
false |
|
required |
boolean |
false |
|
showPassword |
boolean |
false |
|
showVisibilityControl |
boolean |
false |
|
visibilityControlLabel |
string |
'Show/Hide password' |
autocomplete
The autocomplete input configures browser autocomplete for password fields.
<!-- Password input with autocomplete set to new-password -->
<bb-input-password-ui
autocomplete="new-password"
label="Password">
</bb-input-password-ui>
autofocus
The autofocus input determines whether the input should be automatically focused when rendered. Defaults to false.
<!-- Password input with autofocus enabled -->
<bb-input-password-ui
[autofocus]="true"
label="Password">
</bb-input-password-ui>
disabled
The disabled input disables the password input when set to true. Defaults to false.
<!-- Disabled password input -->
<bb-input-password-ui
[disabled]="true"
label="Password">
</bb-input-password-ui>
inputClassName
The inputClassName input adds custom class names to the input element. Defaults to undefined.
<!-- Password input with a custom class -->
<bb-input-password-ui
inputClassName="my-custom-class"
label="Password">
</bb-input-password-ui>
inputMode
The inputMode input sets the virtual keyboard mode. Defaults to 'text'.
<!-- Password input with numeric input mode (example) -->
<bb-input-password-ui
inputMode="text"
label="Password">
</bb-input-password-ui>
label
The label input sets the label for the input. Defaults to an empty string.
<!-- Password input with a label -->
<bb-input-password-ui label="Password"></bb-input-password-ui>
maxLength
The maxLength input sets the maximum number of characters allowed. Defaults to undefined.
<!-- Password input with max length -->
<bb-input-password-ui
[maxLength]="32"
label="Password">
</bb-input-password-ui>
minLength
The minLength input sets the minimum number of characters required. Defaults to undefined.
<!-- Password input with minimum length -->
<bb-input-password-ui
[minLength]="8"
label="Password">
</bb-input-password-ui>
placeholder
The placeholder input sets the placeholder text for the input. Defaults to an empty string.
<!-- Password input with a placeholder -->
<bb-input-password-ui
placeholder="Enter your password"
label="Password">
</bb-input-password-ui>
readonly
The readonly input makes the input read-only. Defaults to false.
<!-- Read-only password input -->
<bb-input-password-ui
[readonly]="true"
label="Password">
</bb-input-password-ui>
required
The required input marks the input as required. Defaults to false.
<!-- Required password input -->
<bb-input-password-ui
[required]="true"
label="Password">
</bb-input-password-ui>
showPassword
The showPassword input controls whether the current value is visible in plain text. Defaults to false.
<!-- Password input showing value as plain text -->
<bb-input-password-ui
[showPassword]="true"
label="Password">
</bb-input-password-ui>
showVisibilityControl
The showVisibilityControl input displays a button that toggles between showing and hiding the password. Defaults to false.
<!-- Password input with visibility toggle button -->
<bb-input-password-ui
[showVisibilityControl]="true"
label="Password">
</bb-input-password-ui>
visibilityControlLabel
The visibilityControlLabel input sets the accessible label for the visibility toggle button. Defaults to 'Show/Hide password'.
<!-- Password input with a custom visibility toggle label -->
<bb-input-password-ui
[showVisibilityControl]="true"
visibilityControlLabel="Show or hide password"
label="Password">
</bb-input-password-ui>
Outputs
|
Event |
Type |
Description |
|---|---|---|
|
blur |
EventEmitter<FocusEvent> |
Emitted when the input loses focus |
|
focus |
EventEmitter<FocusEvent> |
Emitted when the input gains focus |
|
toggleVisibility |
EventEmitter<boolean> |
Emitted with the new visibility state after toggling |
Accessibility
This component is built with accessibility in mind. See the information below for supported behaviors and configuration options to ensure a fully accessible experience for all users.
ARIA
These inputs support WAI-ARIA compliance and are intended to improve accessibility for users relying on assistive technologies. Use them to provide meaningful semantic information for the component when additional context is needed to convey its purpose, state, or behavior.
|
Input |
Description |
Type |
|---|---|---|
|
ariaActivedescendant |
Identifies the currently active element when focus is on a composite widget |
string |
|
ariaControls |
Indicates which element(s) the widget controls |
string |
|
ariaDescribedby |
References the element that describes the widget |
string |
|
ariaExpanded |
Indicates if the control is expanded or collapsed |
string |
|
ariaInvalid |
Indicates the entered value is not in the expected format |
string |
|
ariaLabel |
Sets an accessible label when the label tag is not rendered |
string |
|
ariaLabelledby |
References elements that provide an accessible name |
string |
|
ariaOwns |
Identifies elements as part of a parent-child relationship |
string |
|
role |
Sets the ARIA role for the input |
string |