Inline desktop form
Usage
theme: 'ios' You can turn auto theming on and let it decide based on the platform.
Usage
themeVariant: 'light' You can turn auto dark mode on based on system settings.
Usage
locale: localeEn Selecting the locale loads the localized settings and the translated UI text.
Inline desktop form
Use the grid layout to create single and multiple column forms suited for medium and large screens. Don't go overboard with too many columns but make use of the available horizontal space on bigger screens.
Use the global options for setting the theme, localization options and everything that should be consistent across your app.
Looking for mobile forms? Learn how to create full width, single column forms →
Demo
Loading the live demo
The live demo didn't load.
Try it on demo.mobiscroll.comMulti column grid
Single column grid
Code
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { MbscModule, setOptions } from '@mobiscroll/angular';
setOptions({
theme: ' ',
themeVariant: ' '
});
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
standalone: true,
imports: [CommonModule, MbscModule],
})
export class AppComponent {}
<mbsc-page>
<div class="mbsc-grid mbsc-grid-fixed">
<div class="mbsc-form-group">
<div class="mbsc-row mbsc-justify-content-center">
<div class="mbsc-col-md-10 mbsc-col-xl-8 mbsc-form-grid">
<div class="mbsc-form-group-title">Multiple columns grid</div>
<div class="mbsc-row">
<div class="mbsc-col-md-6 mbsc-col-12">
<mbsc-input label="Email" inputStyle="box" labelStyle="floating" placeholder="Email"></mbsc-input>
</div>
<div class="mbsc-col-md-6 mbsc-col-12">
<mbsc-input
label="Password"
inputStyle="box"
labelStyle="floating"
placeholder="Password"
type="password"
[passwordToggle]="true"
></mbsc-input>
</div>
</div>
<div class="mbsc-row">
<div class="mbsc-col-12">
<mbsc-input label="Address" inputStyle="box" labelStyle="floating" placeholder="Address"></mbsc-input>
</div>
</div>
<div class="mbsc-row">
<div class="mbsc-col-md-6 mbsc-col-12">
<mbsc-input label="City" inputStyle="box" labelStyle="floating" placeholder="City"></mbsc-input>
</div>
<div class="mbsc-col-md-4 mbsc-col-6">
<mbsc-dropdown label="State" inputStyle="box" labelStyle="floating">
<option value="Alabama">Alabama</option>
<option value="Alaska">Alaska</option>
<option value="Arizona">Arizona</option>
<option value="Arkansas">Arkansas</option>
<option value="California">California</option>
<option value="Colorado">Colorado</option>
<option value="Connecticut">Connecticut</option>
<option value="Delaware">Delaware</option>
<option value="Florida">Florida</option>
<option value="Georgia">Georgia</option>
<option value="Hawaii">Hawaii</option>
<option value="Idaho">Idaho</option>
<option value="Illinois Indiana">Illinois Indiana</option>
<option value="Iowa">Iowa</option>
<option value="Kansas">Kansas</option>
<option value="Kentucky">Kentucky</option>
<option value="Louisiana">Louisiana</option>
<option value="Maine">Maine</option>
<option value="Maryland">Maryland</option>
<option value="Massachusetts">Massachusetts</option>
<option value="Michigan">Michigan</option>
<option value="Minnesota">Minnesota</option>
<option value="Mississippi">Mississippi</option>
<option value="Missouri">Missouri</option>
<option value="Montana Nebraska">Montana Nebraska</option>
<option value="Nevada">Nevada</option>
<option value="New Hampshire">New Hampshire</option>
<option value="New Jersey">New Jersey</option>
<option value="New Mexico">New Mexico</option>
<option value="New York">New York</option>
<option value="North Carolina">North Carolina</option>
<option value="North Dakota">North Dakota</option>
<option value="Ohio">Ohio</option>
<option value="Oklahoma">Oklahoma</option>
<option value="Oregon">Oregon</option>
<option value="Pennsylvania Rhode Island">Pennsylvania Rhode Island</option>
<option value="South Carolina">South Carolina</option>
<option value="South Dakota">South Dakota</option>
<option value="Tennessee">Tennessee</option>
<option value="Texas">Texas</option>
<option value="Utah">Utah</option>
<option value="Vermont">Vermont</option>
<option value="Virginia">Virginia</option>
<option value="Washington">Washington</option>
<option value="West Virginia">West Virginia</option>
<option value="Wisconsin">Wisconsin</option>
<option value="Wyomin">Wyomin</option>
</mbsc-dropdown>
</div>
<div class="mbsc-col-md-2 mbsc-col-6">
<mbsc-input label="Zip" inputStyle="box" labelStyle="floating" placeholder="Zip"></mbsc-input>
</div>
</div>
<mbsc-button>Sign in</mbsc-button>
</div>
</div>
</div>
</div>
<div class="mbsc-grid">
<div class="mbsc-row mbsc-justify-content-center">
<div class="mbsc-col-sm-9 mbsc-col-md-7 mbsc-col-xl-5">
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Single column grid</div>
<mbsc-input label="First Name" placeholder="First Name"></mbsc-input>
<mbsc-input label="Last Name" placeholder="Last Name"></mbsc-input>
<mbsc-input label="User Name" placeholder="User Name"></mbsc-input>
<mbsc-input label="Company" placeholder="Company Name"></mbsc-input>
<mbsc-input label="Email" placeholder="Email Address"></mbsc-input>
</div>
</div>
</div>
</div>
</mbsc-page>
.mbsc-ios .mbsc-form-grid .mbsc-textfield-wrapper {
margin: 0.75em 1em;
}