## 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
- Textarea
- Error Messages
- Multiple Input Fields
- Suffix
- Value Modificator
- Deprecated

### 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

- 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.

Company Amount $ .00

##### Input with hint

First name Should contain only alphabets [a-zA-Z]

### Textareas

(*) Mandatory field

##### Simple textarea

Textarea example

##### Textarea with hint

Textarea with hint example Hint appears instantly! Hint appears instantly! Hint appears instantly!

##### Textarea with overflowing content

Textarea with overflowing content Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

##### Disabled Textarea

Disabled Textarea Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

##### Textarea autosize with hint

Textarea autosize with hint example 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>`