Input field

Note: To adapt latest style changes according to the DDS, use bci-form-field-notification component for form field validation states, to add background colors based on message-type attribute with values (info, warning, success, error) as input.

Input

Dynamic Width Input

Width in units (ex: 10vh,10rem,10px,10% etc)

Dynamic Width Default min-width 160px
Examples with appearance="fill" attribute instead of floatLabel="never"
Enter a text First name Password Search Password
Disabled Input
Company
Readonly Input
Company Amount $ .00
Input with hint
First name Should contain only alphabets [a-zA-Z]

Textareas

(*) Mandatory field
Simple textarea
Textarea
Textarea with hint
Textarea with hint Hint appears instantly! Hint appears instantly! Hint appears instantly!
Textarea with overflowing content
Textarea with overflowing content
Disabled Textarea
Disabled Textarea
Textarea autosize with hint
Textarea autosize with hint Hint appears instantly! Type your text here.

Error messages

(*) Mandatory field
Validation states with mat-hint and mat-error
Email Enter an Email Email OK Email should not be empty Enter a valid email address
Input with required example with multiple error messages
Email Enter an Email Type email here. Email should not be empty Enter a valid email address
Dropdown with required example
None Coca-Cola Pepsi Pick a drink! Select a drink.
textarea with required example
Textarea with error message Type your text here
Example with all validation state messages
Email Type something here Email too short Email OK (*) Mandatory field Enter a valid email address

Multiple Input Fields

Example to show multiple input fields together with validated and non validated fields.
Per default input fields have a gap to the bottom of 16px. If you use a bci-form-field-notification the space for the form field notification won't be reserved. It will be added dynamically. The default gap of 16px will remain anyway.

Email Email too short Email OK Type your email here Enter a valid email address Surname Surname Something Enter something Favorite Food Snack Age Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor Favorite Food Favorite Drink

Suffix

Hint: If the prefix/suffix content is purely text-based, it is recommended to use the matTextPrefix or matTextSuffix directives which ensure that the text is aligned with the form control..

Text Suffix
Amount .00 Please type some amount here
Text Prefix
Amount $ Please type some amount here
Prefix with Label
Text
Example: 
Suffix with Label
Amount USD
Mat Icon Suffix
Amount
Mat Icon button Suffix
Amount
Example with multiple suffixes
Amount .00 Please type some amount here

Value Modificator

An Example with Minimum value as 0 and Maximum Value as 12.

Number input
Value modificator buttons are only supported this way.
<mat-form-field bciValueModificatorButton>
<input matInput />
<span matSuffix bciSpanForValueModificatorButton>
<button>
<mat-icon></mat-icon>
</button>
<button>
<mat-icon></mat-icon>
</button>
</span>
</mat-form-field>