Customize the input
The three input styles: underline, box and outline can be combined with three label styles: stacked, inline or floating. Try different combinations to find what's right for you.
Demo
Input type
Label type
<mbsc-input inputStyle="underline " labelStyle="stacked " startIcon="user4" placeholder="Input with label" label="Name"></mbsc-input>
<mbsc-input inputStyle="underline " labelStyle="stacked " startIcon="material-email" placeholder="With error styling" error="true" label="Email"></mbsc-input>
<mbsc-input inputStyle="underline " labelStyle="stacked " startIcon="lock2" placeholder="Without label"></mbsc-input>
<mbsc-textarea inputStyle="underline " labelStyle="stacked " startIcon="bubble" placeholder="Textarea with left icon" label="About me"></mbsc-textarea>
<mbsc-dropdown inputStyle="underline " labelStyle="stacked " startIcon="plus" endIcon="close">
<option>Select with icons</option>
<option value="Opel">Opel</option>
<option value="Renault">Renault</option>
<option value="Citroen">Citroen</option>
<option value="Lotus">Lotus</option>
</mbsc-dropdown>
<mbsc-input inputStyle="underline " labelStyle="stacked " type="file" placeholder="Select file..." label="File upload"></mbsc-input>ComponentTemplate
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { MbscModule, setOptions } from '@mobiscroll/angular';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
standalone: true,
imports: [CommonModule, MbscModule],
})
export class AppComponent {}
<mbsc-page>
<div class="mbsc-grid">
<div class="mbsc-row mbsc-justify-content-center">
<div class="mbsc-col-sm-12 mbsc-col-md-8 mbsc-col-xl-4">
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Underline inputs with stacked labels</div>
<mbsc-input
inputStyle="underline"
labelStyle="stacked"
startIcon="user4"
placeholder="Input with label"
label="Name"
></mbsc-input>
<mbsc-input
inputStyle="underline"
labelStyle="stacked"
startIcon="material-email"
placeholder="With error styling"
[error]="true"
label="Email"
></mbsc-input>
<mbsc-input
inputStyle="underline"
labelStyle="stacked"
startIcon="lock2"
[passwordToggle]="true"
[error]="true"
errorMessage="An error occurred"
type="password"
placeholder="With icons and error message"
label="Password"
></mbsc-input>
<mbsc-input inputStyle="underline" labelStyle="stacked" startIcon="empty" placeholder="Without label"></mbsc-input>
<mbsc-textarea
inputStyle="underline"
labelStyle="stacked"
startIcon="bubble"
placeholder="Textarea with left icon"
label="About me"
></mbsc-textarea>
<mbsc-dropdown inputStyle="underline" labelStyle="stacked" startIcon="plus" endIcon="close">
<option>Select with icons</option>
<option value="Opel">Opel</option>
<option value="Renault">Renault</option>
<option value="Citroen">Citroen</option>
<option value="Lotus">Lotus</option>
</mbsc-dropdown>
<mbsc-input inputStyle="underline" labelStyle="stacked" type="file" placeholder="Select file..." label="File upload"></mbsc-input>
</div>
</div>
<div class="mbsc-col-sm-12 mbsc-col-md-8 mbsc-col-xl-4">
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Underline inputs with inline labels</div>
<mbsc-input inputStyle="underline" labelStyle="inline" startIcon="user4" placeholder="Input with label" label="Name"></mbsc-input>
<mbsc-input
inputStyle="underline"
labelStyle="inline"
startIcon="material-email"
placeholder="With error styling"
[error]="true"
label="Email"
></mbsc-input>
<mbsc-input
inputStyle="underline"
labelStyle="inline"
startIcon="lock2"
[passwordToggle]="true"
[error]="true"
errorMessage="An error occurred"
type="password"
placeholder="With icons and error message"
label="Password"
></mbsc-input>
<mbsc-input inputStyle="underline" labelStyle="inline" startIcon="empty" placeholder="Without label"></mbsc-input>
<mbsc-textarea
inputStyle="underline"
labelStyle="inline"
startIcon="bubble"
placeholder="Textarea with left icon"
label="About me"
></mbsc-textarea>
<mbsc-dropdown inputStyle="underline" labelStyle="inline" startIcon="plus" endIcon="close">
<option>Select with icons</option>
<option value="Opel">Opel</option>
<option value="Renault">Renault</option>
<option value="Citroen">Citroen</option>
<option value="Lotus">Lotus</option>
</mbsc-dropdown>
<mbsc-input inputStyle="underline" labelStyle="inline" type="file" placeholder="Select file..." label="File upload"></mbsc-input>
</div>
</div>
<div class="mbsc-col-sm-12 mbsc-col-md-8 mbsc-col-xl-4">
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Underline inputs with floating labels</div>
<mbsc-input
inputStyle="underline"
labelStyle="floating"
startIcon="user4"
placeholder="Input with label"
label="Name"
></mbsc-input>
<mbsc-input
inputStyle="underline"
labelStyle="floating"
startIcon="material-email"
placeholder="With error styling"
[error]="true"
label="Email"
></mbsc-input>
<mbsc-input
inputStyle="underline"
labelStyle="floating"
startIcon="lock2"
[passwordToggle]="true"
[error]="true"
errorMessage="An error occurred"
type="password"
placeholder="With icons and error message"
label="Password"
></mbsc-input>
<mbsc-input inputStyle="underline" labelStyle="floating" startIcon="empty" placeholder="Without label"></mbsc-input>
<mbsc-textarea
inputStyle="underline"
labelStyle="floating"
startIcon="bubble"
placeholder="Textarea with left icon"
label="About me"
></mbsc-textarea>
<mbsc-dropdown inputStyle="underline" labelStyle="floating" startIcon="plus" endIcon="close">
<option>Select with icons</option>
<option value="Opel">Opel</option>
<option value="Renault">Renault</option>
<option value="Citroen">Citroen</option>
<option value="Lotus">Lotus</option>
</mbsc-dropdown>
<mbsc-input
inputStyle="underline"
labelStyle="floating"
type="file"
placeholder="Select file..."
label="File upload"
></mbsc-input>
</div>
</div>
</div>
<div class="mbsc-row mbsc-justify-content-center">
<div class="mbsc-col-sm-12 mbsc-col-md-8 mbsc-col-xl-4">
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Box inputs with stacked labels</div>
<mbsc-input inputStyle="box" labelStyle="stacked" startIcon="user4" placeholder="Input with label" label="Name"></mbsc-input>
<mbsc-input
inputStyle="box"
labelStyle="stacked"
startIcon="material-email"
placeholder="With error styling"
[error]="true"
label="Email"
></mbsc-input>
<mbsc-input
inputStyle="box"
labelStyle="stacked"
startIcon="lock2"
[passwordToggle]="true"
[error]="true"
errorMessage="An error occurred"
type="password"
placeholder="With icons and error message"
label="Password"
></mbsc-input>
<mbsc-input inputStyle="box" labelStyle="stacked" startIcon="empty" placeholder="Without label"></mbsc-input>
<mbsc-textarea
inputStyle="box"
labelStyle="stacked"
startIcon="bubble"
placeholder="Textarea with left icon"
label="About me"
></mbsc-textarea>
<mbsc-dropdown inputStyle="box" labelStyle="stacked" startIcon="plus" endIcon="close">
<option>Select with icons</option>
<option value="Opel">Opel</option>
<option value="Renault">Renault</option>
<option value="Citroen">Citroen</option>
<option value="Lotus">Lotus</option>
</mbsc-dropdown>
<mbsc-input inputStyle="box" labelStyle="stacked" type="file" placeholder="Select file..." label="File upload"></mbsc-input>
</div>
</div>
<div class="mbsc-col-sm-12 mbsc-col-md-8 mbsc-col-xl-4">
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Box inputs with inline labels</div>
<mbsc-input inputStyle="box" labelStyle="inline" startIcon="user4" placeholder="Input with label" label="Name"></mbsc-input>
<mbsc-input
inputStyle="box"
labelStyle="inline"
startIcon="material-email"
placeholder="With error styling"
[error]="true"
label="Email"
></mbsc-input>
<mbsc-input
inputStyle="box"
labelStyle="inline"
startIcon="lock2"
[passwordToggle]="true"
[error]="true"
errorMessage="An error occurred"
type="password"
placeholder="With icons and error message"
label="Password"
></mbsc-input>
<mbsc-input inputStyle="box" labelStyle="inline" startIcon="empty" placeholder="Without label"></mbsc-input>
<mbsc-textarea
inputStyle="box"
labelStyle="inline"
startIcon="bubble"
placeholder="Textarea with left icon"
label="About me"
></mbsc-textarea>
<mbsc-dropdown inputStyle="box" labelStyle="inline" startIcon="plus" endIcon="close">
<option>Select with icons</option>
<option value="Opel">Opel</option>
<option value="Renault">Renault</option>
<option value="Citroen">Citroen</option>
<option value="Lotus">Lotus</option>
</mbsc-dropdown>
<mbsc-input inputStyle="box" labelStyle="inline" type="file" placeholder="Select file..." label="File upload"></mbsc-input>
</div>
</div>
<div class="mbsc-col-sm-12 mbsc-col-md-8 mbsc-col-xl-4">
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Box inputs with floating labels</div>
<mbsc-input inputStyle="box" labelStyle="floating" startIcon="user4" placeholder="Input with label" label="Name"></mbsc-input>
<mbsc-input
inputStyle="box"
labelStyle="floating"
startIcon="material-email"
placeholder="With error styling"
[error]="true"
label="Email"
></mbsc-input>
<mbsc-input
inputStyle="box"
labelStyle="floating"
startIcon="lock2"
[passwordToggle]="true"
[error]="true"
errorMessage="An error occurred"
type="password"
placeholder="With icons and error message"
label="Password"
></mbsc-input>
<mbsc-input inputStyle="box" labelStyle="floating" startIcon="empty" placeholder="Without label"></mbsc-input>
<mbsc-textarea
inputStyle="box"
labelStyle="floating"
startIcon="bubble"
placeholder="Textarea with left icon"
label="About me"
></mbsc-textarea>
<mbsc-dropdown inputStyle="box" labelStyle="floating" startIcon="plus" endIcon="close">
<option>Select with icons</option>
<option value="Opel">Opel</option>
<option value="Renault">Renault</option>
<option value="Citroen">Citroen</option>
<option value="Lotus">Lotus</option>
</mbsc-dropdown>
<mbsc-input inputStyle="box" labelStyle="floating" type="file" placeholder="Select file..." label="File upload"></mbsc-input>
</div>
</div>
</div>
<div class="mbsc-row mbsc-justify-content-center">
<div class="mbsc-col-sm-12 mbsc-col-md-8 mbsc-col-xl-4">
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Outline inputs with stacked labels</div>
<mbsc-input inputStyle="outline" labelStyle="stacked" startIcon="user4" placeholder="Input with label" label="Name"></mbsc-input>
<mbsc-input
inputStyle="outline"
labelStyle="stacked"
startIcon="material-email"
placeholder="With error styling"
[error]="true"
label="Email"
></mbsc-input>
<mbsc-input
inputStyle="outline"
labelStyle="stacked"
startIcon="lock2"
[passwordToggle]="true"
[error]="true"
errorMessage="An error occurred"
type="password"
placeholder="With icons and error message"
label="Password"
></mbsc-input>
<mbsc-input inputStyle="outline" labelStyle="stacked" startIcon="empty" placeholder="Without label"></mbsc-input>
<mbsc-textarea
inputStyle="outline"
labelStyle="stacked"
startIcon="bubble"
placeholder="Textarea with left icon"
label="About me"
></mbsc-textarea>
<mbsc-dropdown inputStyle="outline" labelStyle="stacked" startIcon="plus" endIcon="close">
<option>Select with icons</option>
<option value="Opel">Opel</option>
<option value="Renault">Renault</option>
<option value="Citroen">Citroen</option>
<option value="Lotus">Lotus</option>
</mbsc-dropdown>
<mbsc-input inputStyle="outline" labelStyle="stacked" type="file" placeholder="Select file..." label="File upload"></mbsc-input>
</div>
</div>
<div class="mbsc-col-sm-12 mbsc-col-md-8 mbsc-col-xl-4">
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Outline inputs with inline labels</div>
<mbsc-input inputStyle="outline" labelStyle="inline" startIcon="user4" placeholder="Input with label" label="Name"></mbsc-input>
<mbsc-input
inputStyle="outline"
labelStyle="inline"
startIcon="material-email"
placeholder="With error styling"
[error]="true"
label="Email"
></mbsc-input>
<mbsc-input
inputStyle="outline"
labelStyle="inline"
startIcon="lock2"
[passwordToggle]="true"
[error]="true"
errorMessage="An error occurred"
type="password"
placeholder="With icons and error message"
label="Password"
></mbsc-input>
<mbsc-input inputStyle="outline" labelStyle="inline" startIcon="empty" placeholder="Without label"></mbsc-input>
<mbsc-textarea
inputStyle="outline"
labelStyle="inline"
startIcon="bubble"
placeholder="Textarea with left icon"
label="About me"
></mbsc-textarea>
<mbsc-dropdown inputStyle="outline" labelStyle="inline" startIcon="plus" endIcon="close">
<option>Select with icons</option>
<option value="Opel">Opel</option>
<option value="Renault">Renault</option>
<option value="Citroen">Citroen</option>
<option value="Lotus">Lotus</option>
</mbsc-dropdown>
<mbsc-input inputStyle="outline" labelStyle="inline" type="file" placeholder="Select file..." label="File upload"></mbsc-input>
</div>
</div>
<div class="mbsc-col-sm-12 mbsc-col-md-8 mbsc-col-xl-4">
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Outline inputs with floating labels</div>
<mbsc-input inputStyle="outline" labelStyle="floating" startIcon="user4" placeholder="Input with label" label="Name"></mbsc-input>
<mbsc-input
inputStyle="outline"
labelStyle="floating"
startIcon="material-email"
placeholder="With error styling"
[error]="true"
label="Email"
></mbsc-input>
<mbsc-input
inputStyle="outline"
labelStyle="floating"
startIcon="lock2"
[passwordToggle]="true"
[error]="true"
errorMessage="An error occurred"
type="password"
placeholder="With icons and error message"
label="Password"
></mbsc-input>
<mbsc-input inputStyle="outline" labelStyle="floating" startIcon="empty" placeholder="Without label"></mbsc-input>
<mbsc-textarea
inputStyle="outline"
labelStyle="floating"
startIcon="bubble"
placeholder="Textarea with left icon"
label="About me"
></mbsc-textarea>
<mbsc-dropdown inputStyle="outline" labelStyle="floating" startIcon="plus" endIcon="close">
<option>Select with icons</option>
<option value="Opel">Opel</option>
<option value="Renault">Renault</option>
<option value="Citroen">Citroen</option>
<option value="Lotus">Lotus</option>
</mbsc-dropdown>
<mbsc-input inputStyle="outline" labelStyle="floating" type="file" placeholder="Select file..." label="File upload"></mbsc-input>
</div>
</div>
</div>
</div>
</mbsc-page>