Import
import { InputEmailModule } from '@backbase/ui-ang/input-email'
Usage
Use the bb-input-email-ui component to provide an email input field in your forms.
<!-- Basic input email usage -->
<bb-input-email-ui label="Email address"></bb-input-email-ui>
Inputs
|
Input |
Format |
Default |
|---|---|---|
|
autocomplete |
'email' | 'off' | 'on' |
'email' |
|
autofocus |
boolean |
false |
|
disabled |
boolean |
false |
|
inputClassName |
string |
undefined |
|
label |
string |
'' |
|
maxLength |
number |
undefined |
|
minLength |
number |
undefined |
|
pattern |
string | RegExp |
undefined |
|
placeholder |
string |
'' |
|
readonly |
boolean |
false |
|
required |
boolean |
false |
|
size |
number | string |
20 |
Global configuration token
The INPUT_EMAIL_CONFIG_TOKEN enables you to globally set default values for the following properties for all instances of the input email component in your project:
- autocomplete
- maxLength
- minLength
- placeholder
- size
- pattern
These can be overridden per instance by setting the corresponding input.
import { INPUT_EMAIL_CONFIG_TOKEN } from '@backbase/ui-ang/input-email';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
const inputEmailConfig = {
autocomplete: 'email',
maxLength: 64,
minLength: 5,
placeholder: 'Enter your email',
size: 30,
pattern: /[A-Z0-9a-z._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,64}/
};
platformBrowserDynamic().bootstrapModule(AppModule, {
providers: [{ provide: INPUT_EMAIL_CONFIG_TOKEN, useValue: inputEmailConfig }]
});
autocomplete
The autocomplete input sets the browser's autocomplete attribute for the email input. Defaults to 'email'.
<!-- Input email with autocomplete set to off -->
<bb-input-email-ui
autocomplete="off"
label="Email address">
</bb-input-email-ui>
autofocus
The autofocus input determines whether the input should be automatically focused when the component is rendered. Defaults to false.
<!-- Input email with autofocus enabled -->
<bb-input-email-ui
[autofocus]="true"
label="Email address">
</bb-input-email-ui>
disabled
The disabled input disables the email input when set to true. Defaults to false.
<!-- Disabled input email -->
<bb-input-email-ui
[disabled]="true"
label="Email address">
</bb-input-email-ui>
inputClassName
The inputClassName input adds custom class names to the input element. Defaults to undefined.
<!-- Input email with a custom class -->
<bb-input-email-ui
inputClassName="my-custom-class"
label="Email address">
</bb-input-email-ui>
label
The label input sets the label for the input. Defaults to an empty string.
<!-- Input email with a label -->
<bb-input-email-ui label="Work email"></bb-input-email-ui>
maxLength
The maxLength input sets the maximum number of characters allowed in the email input. Defaults to undefined.
<!-- Input email with a maximum length of 50 -->
<bb-input-email-ui
[maxLength]="50"
label="Email address">
</bb-input-email-ui>
minLength
The minLength input sets the minimum number of characters required in the email input. Defaults to undefined.
<!-- Input email with a minimum length of 5 -->
<bb-input-email-ui
[minLength]="5"
label="Email address">
</bb-input-email-ui>
pattern
The pattern input sets a custom validation pattern for the email input. If not set, the built-in Angular email validator is used. Defaults to undefined.
<!-- Input email with a custom validation pattern -->
<bb-input-email-ui
[pattern]="'^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$'"
label="Email address">
</bb-input-email-ui>
placeholder
The placeholder input sets the placeholder text for the input. Defaults to an empty string.
<!-- Input email with a placeholder -->
<bb-input-email-ui
placeholder="Enter your email"
label="Email address">
</bb-input-email-ui>
readonly
The readonly input makes the input read-only. Defaults to false.
<!-- Read-only input email -->
<bb-input-email-ui
[readonly]="true"
label="Email address">
</bb-input-email-ui>
required
The required input marks the input as required. Defaults to false.
<!-- Required input email -->
<bb-input-email-ui
[required]="true"
label="Email address">
</bb-input-email-ui>
size
The size input configures the minimum width to fit the specified number of characters. Defaults to 20.
<!-- Input email with a custom size -->
<bb-input-email-ui
[size]="40"
label="Email address">
</bb-input-email-ui>
Outputs
|
Event |
Type |
Description |
|---|---|---|
|
blur |
EventEmitter<FocusEvent> |
Emitted when the input loses focus |
|
focus |
EventEmitter<FocusEvent> |
Emitted when the input gains focus |
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 |