Import
import { InputTextModule } from '@backbase/ui-ang/input-text'
Usage
Use the bb-input-text-ui component to render a input text and access its API.
<bb-input-text-ui
[label]="Input Text"
[placeholder]="Please enter some text"
></bb-input-text-ui>
Inputs
|
Input |
Format |
Default |
|---|---|---|
|
autocomplete |
"on" | "off" | string |
”off” |
|
autofocus |
boolean |
false |
|
disabled |
boolean |
false |
|
id |
string |
— |
|
inputClassName |
string |
— |
|
inputMode |
string |
“text“ |
|
label |
string |
— |
|
mask |
string |
— |
|
maskValidator |
boolean |
true |
|
maxLength |
number |
— |
|
minLength |
number |
— |
|
placeholder |
string |
— |
|
readonly |
boolean |
false |
|
required |
boolean |
false |
|
showCharCounter |
boolean |
false |
|
size |
string | number |
— |
autocomplete
The autocomplete input controls whether the browser should attempt to autocomplete the input field. You can use values such as “on“, “off“, or any valid HTML autocomplete attribute value (e.g., ”email”, “name”, etc.)
<!-- Input field will not autocomplete -->
<bb-input-text-ui autocomplete="off" placeholder="Transaction ID">
<!-- Input will autocomplete names -->
<bb-input-text-ui autocomplete="name" placeholder="Full Name">
<!-- Input will to autocomplete emails -->
<bb-input-text-ui autocomplete="email" placeholder="Email Address">
autofocus
The autofocus input sets whether the text input should be auto-focused when shown.
<!-- Input that auto-focuses on load -->
<bb-input-text-ui [autofocus]="true"></bb-input-text-ui>
disabled
The disabled input sets whether the component is mutable or clickable.
<!-- Disabled input field -->
<bb-input-text-ui
[label]="Disabled input"
[disabled]="true"
></bb-input-text-ui>
id
The id input sets the unique identifier for the input element.
<!-- Input with custom ID -->
<bb-input-text-ui id="custom-input-id"></bb-input-text-ui>
inputClassName
The inputClassName input sets additional CSS class names for the input form control.
<!-- Input with custom CSS class -->
<bb-input-text-ui inputClassName="custom-input-class"></bb-input-text-ui>
inputMode
The inputMode input sets the HTML inputmode attribute, which controls the type of virtual keyboard shown on mobile devices (e.g., "text", "numeric", "decimal", "email", "tel", "url").
<!-- Input optimized for numeric entry -->
<bb-input-text-ui inputMode="numeric"></bb-input-text-ui>
label
The label input sets the label text for the input field.
<!-- Input with label -->
<bb-input-text-ui [label]="A custom label"></bb-input-text-ui>
mask
The mask input applies ngx-mask related formatting; default value implies no mask is used. It sets a mask to control the format of user input, ensuring that data is entered in a specific structure (e.g., phone numbers, dates, or credit card numbers). If it is set, it automatically inserts placeholders or restricts input to valid characters.
Examples
- A phone number mask: (999) 999-9999
- A date mask: MM/DD/YYYY
<!-- A masked input field -->
<bb-input-text-ui
[mask]="0{5}"
[label]="Masked Input Text"
[placeholder]="Enter a 5-digit number"
(valueChange)="onValueChange($event)"
(blur)="onBlur($event)"
(focus)="onFocus($event)"
></bb-input-text-ui>
maskValidator
The maskValidator input is ngx-mask related. You can use this property to disable the default mask pattern validation.
<!-- Input with mask validation disabled -->
<bb-input-text-ui mask="0{5}" [maskValidator]="false"></bb-input-text-ui>
maxLength
The maxLength input sets the maximum number of characters allowed in the input.
<!-- Input with maximum length of 50 characters -->
<bb-input-text-ui [maxLength]="50"></bb-input-text-ui>
minLength
The minLength input sets the minimum number of characters required for validation.
<!-- Input requiring at least 8 characters -->
<bb-input-text-ui [minLength]="8"></bb-input-text-ui>
placeholder
The placeholder input sets the placeholder text for the text input.
<!-- Input with placeholder text -->
<bb-input-text-ui
[label]="Input Text"
[placeholder]="This is a custom placeholder"
></bb-input-text-ui>
readonly
The readonly input sets whether the text input is readonly. If true, the input cannot be edited.
<!-- Read-only input field -->
<bb-input-text-ui
[label]="Readonly Input Text"
[value]="An actual value"
[readonly]="true"
></bb-input-text-ui>
required
The required input sets whether the input is required for form validation.
<!-- Required input field -->
<bb-input-text-ui [required]="true"></bb-input-text-ui>
showCharCounter
The showCharCounter input shows character counter based on maxLength.
<!-- Input with character counter -->
<bb-input-text-ui [maxLength]="100" [showCharCounter]="true"></bb-input-text-ui>
size
The size input configures the minimum width to fit the specified number of characters.
<!-- Input with character counter -->
<bb-input-text-ui [maxLength]="100" [showCharCounter]="true"></bb-input-text-ui>
CSS classes
The following CSS classes can be used to further style your input based on its state or user interaction. Some classes may be applied automatically by Angular or the component and can be leveraged to provide custom visual feedback.
Error
The .ng-invalid class is applied when the input field fails validation. This typically results in red outlines or other visual indicators to signal an error state.
<!-- Input field with validation error styling -->
<bb-input-text-ui
label="With Error"
placeholder="Enter text"
class="ng-touched ng-invalid">
</bb-input-text-ui>
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.
|
Prop |
Description |
|---|---|
|
aria-activedescendant |
Identifies the currently active element when focus is on a composite widget, combobox, textbox, group, or application |
|
aria-autocomplete |
Indicates whether inputting text could trigger display of predictions for a combobox, searchbox, or textbox |
|
aria-controls |
Indicates which element or elements the user interface widget controls |
|
aria-describedby |
References an element that contains a detailed description of the widget |
|
aria-expanded |
Indicates if a control is expanded or collapsed, and whether its child elements are displayed or hidden |
|
aria-invalid |
Indicates the entered value is not in a format expected by the application |
|
aria-label |
Accessible label when control does not need to render a label tag |
|
aria-labelledby |
References other elements on the page to define an accessible name |
|
aria-owns |
Defines a visual, functional, or contextual relationship when the DOM hierarchy cannot represent the relationship |
|
role |
Customizes the ARIA role for the HTML input element to improve accessibility |