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.
Examples with appearance="fill" attribute instead of floatLabel="never"
Enter a textFirst namePasswordSearchPassword
Disabled Input
This attribute indicates that the form control is not available for interaction. Disabled form elements do not
receive focus and therefore are been skipped in tab navigation.
Company
Readonly Input
This attribute indicates that the user cannot modify the value of the control. The value of the attribute is
irrelevant.
CompanyAmount$.00
Input with hint
First nameShould contain only alphabets [a-zA-Z]
Textareas
(*) Mandatory field
Simple textarea
Textarea
Textarea with hint
Textarea with hintHint 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 hintHint appears instantly!Type your text here.
Error messages
(*) Mandatory field
Validation states with mat-hint and mat-error
EmailEnter an Email 0">Email OK
Email should not be empty
Enter a valid email address
Input with required example with multiple error messages
EmailEnter an Email Type email here. Email should not be empty
Enter a valid email address
Dropdown with required example
NoneCoca-ColaPepsiPick a drink!Select a drink.
textarea with required example
Textarea with error messageType your text here
Example with all validation state messages
EmailType something here Email too shortEmail OK(*) Mandatory fieldEnter 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.
EmailEmail too shortEmail OKType your email hereEnter a valid email addressSurnameSurnameSomethingEnter somethingFavorite FoodSnackAgeLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod temporFavorite FoodFavorite 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.00Please type some amount here
Text Prefix
Amount$Please type some amount here
Prefix with Label
Text
Example:
Suffix with Label
AmountUSD
Mat Icon Suffix
Amount
Mat Icon button Suffix
Amount
Example with multiple suffixes
Amount.00Please 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.