Angular Forms Field types Example

Use the input styling in Angular apps or as an alternative to the ion-input in Ionic Framework. The inputs feature three styles:

Underline
Box
Outline

Besides that, you can pick from three label types: inline, stacked and floating labels.

Play around and combine different input types with various label positions to find out what fits you best.

While Mobiscroll doesn't provide built-in validation, it provides styling for error messages, disabled fields, labels and more. See how the fields look in different themes by changing it dynamically from the floating action bar on the right.

Get started with this example

Inputs

Use single-line fields with labels, icons error styling and more.

Javascript jQuery Angular React Vue

                        <mbsc-input label="Label" placeholder="Text field label"></mbsc-input>
<mbsc-input label="Password" type="password" placeholder="Text field with icon" startIcon="lock2"></mbsc-input>
<mbsc-input label="Password Toggle" type="password" placeholder="Text field with icon" startIcon="lock2" [passwordToggle]="true"></mbsc-input>
<mbsc-input placeholder="Text field with right icon" endIcon="pencil"></mbsc-input>
<mbsc-input [disabled]="true" placeholder="Text field disabled"></mbsc-input>
<mbsc-input [error]="true" placeholder="Text field with error style"></mbsc-input>
<mbsc-input [error]="true" [errorMessage]="errorMessage" placeholder="Text field with error style and message"></mbsc-input>
<mbsc-input label="File upload" type="file" placeholder="Select file..."></mbsc-input>
                

Text areas

Use auto-growing text areas for multi-line text entry.

Javascript jQuery Angular React Vue

                        <mbsc-textarea label="Label"></mbsc-textarea>
<mbsc-textarea endIcon="pencil"></mbsc-textarea>
<mbsc-textarea label="Label" startIcon="bubble"></mbsc-textarea>
<mbsc-textarea [disabled]="true" placeholder="disabled"></mbsc-textarea>
<mbsc-textarea [error]="true" [errorMessage]="errorMessage"></mbsc-textarea>
                

Date fields

Use it for native date fields or in combination with the date picker or calendar.

Javascript jQuery Angular React Vue

                        <mbsc-input label="Date field" type="date" placeholder="Please Select..."></mbsc-input>
<mbsc-datepicker label="Calendar" [controls]="['calendar']" placeholder="Please Select..."></mbsc-datepicker>
<mbsc-datepicker label="Date scroller" [controls]="['date']" placeholder="Please Select..."></mbsc-datepicker>
                

Numeric fields

Use it with native numeric inputs.

Javascript jQuery Angular React Vue

                        <mbsc-input label="Number field" type="number" placeholder="Please Select..."></mbsc-input>
                

Select input

Use it for select inputs, with the native option list or the select component.

Javascript jQuery Angular React Vue

                        <mbsc-dropdown [(ngModel)]="select" label="Label">
    <option value="select">Select</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</mbsc-dropdown>
<mbsc-dropdown [(ngModel)]="iconSelect" endIcon="plus">
    <option value="select">Select with right icon</option>
    <option value="opel">Opel</option>
    <option value="renault">Renault</option>
    <option value="Citroen">Citroen</option>
    <option value="Lotus">Lotus</option>
</mbsc-dropdown>
<mbsc-dropdown [(ngModel)]="leftIconSelect" startIcon="plus">
    <option value="select">Select with left icon</option>
    <option value="Peugeot">Peugeot</option>
    <option value="Porsche">Porsche</option>
    <option value="Fiat">Fiat</option>
    <option value="Volkswagen">Volkswagen</option>
</mbsc-dropdown>
<mbsc-dropdown [(ngModel)]="errorSelect" [error]="true" errorMessage="Error message!">
    <option value="select">Select error</option>
    <option value="Ferrari">Ferrari</option>
    <option value="Honda">Honda</option>
    <option value="Suzuki">Suzuki</option>
    <option value="Lamborghini">Lamborghini</option>
</mbsc-dropdown>
<mbsc-dropdown [(ngModel)]="disabledSelect" [disabled]="true">
    <option value="select">Select disabled</option>
    <option value="Bentley">Bentley</option>
    <option value="Morgan">Morgan</option>
    <option value="Chevrolet">Chevrolet</option>
    <option value="Dodge">Dodge</option>
</mbsc-dropdown>
                