Skip to main content

Input

The Input component can be used for collecting information from the user.

Usage​

Use the label option to provide a label to the input field.

<!-- Textbox -->
<mbsc-input label="Username" type="text"></mbsc-input>

<!-- Password -->
<mbsc-input label="Password" type="password" [passwordToggle]="true"></mbsc-input>
import { Component } from '@angular/core';
import { MbscModule } from '@mobiscroll/angular';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  standalone: true,
  imports: [MbscModule],
})
export class AppComponent {}

Input style​

With the inputStyle attribute you can customize the look of input. There are three styles to choose from:

<!-- Underline input style -->
<mbsc-input label="Label" inputStyle="underline"></mbsc-input>

<!-- Box input style -->
<mbsc-input label="Label" inputStyle="box"></mbsc-input>

<!-- Outline input style -->
<mbsc-input label="Label" inputStyle="outline"></mbsc-input>
import { Component } from '@angular/core';
import { MbscModule } from '@mobiscroll/angular';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  standalone: true,
  imports: [MbscModule],
})
export class AppComponent {}

Label style​

With the labelStyle attribute you can define the position of the label.

<!-- Stacked label style -->
<mbsc-input label="Label" labelStyle="stacked"></mbsc-input>

<!-- Inline label style -->
<mbsc-input label="Label" labelStyle="inline"></mbsc-input>

<!-- Floating label style -->
<mbsc-input label="Label" labelStyle="floating"></mbsc-input>
import { Component } from '@angular/core';
import { MbscModule } from '@mobiscroll/angular';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  standalone: true,
  imports: [MbscModule],
})
export class AppComponent {}

Value binding​

The input can be bound to a string value using either the [(ngModel)] or the formControlName directives. In this case the input will update it's state according to the bound value.

<mbsc-input [(ngModel)]="username" label="Username" inputStyle="outline" labelStyle="floating"></mbsc-input>
import { Component } from '@angular/core';
import { MbscModule } from '@mobiscroll/angular';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  standalone: true,
  imports: [MbscModule],
})
export class AppComponent {}

Options​

Explore the following API options that help you easily configure the Input component.

cssClass​

string

Specifies a custom CSS class for the component.

Default value: undefined

disabled​

boolean

Specifies the disabled state of the input.

Default value: false

endIcon​

string

Specifies the icon which will be displayed at the end of the input. Use the startIcon option for specifying an icon at the start.

Default value: undefined

error​

boolean

If true, the input will be displayed with error styles.

Default value: false

errorMessage​

string

Error message for the input. If the error option is set to true, the message will be displayed.

Default value: undefined

inputStyle​

"outline" | "box" | "underline"

Specifies the style of the input. Possible values:

  • 'underline'
  • 'box'
  • 'outline'

The default value depends on the theme:

  • iOS: 'underline'
  • Material: 'box'
  • Windows: 'outline'

Default value: undefined

label​

string

Specifies the label of the input.

Default value: undefined

labelStyle​

"inline" | "floating" | "stacked"

Specifies the position of the input label. Possible values:

  • 'stacked'
  • 'inline'
  • 'floating'

The default value depends on the theme:

  • iOS: 'inline'
  • Material: 'floating'
  • Windows: 'stacked'

Default value: undefined

passwordToggle​

boolean

Specifies the password toggle visibility on a password field.

Default value: false

placeholder​

string

Specifies the placeholder text for the input.

Default value: undefined

startIcon​

string

Specifies the icon which will be displayed at the start of the input. Use the endIcon option for specifying an icon at the end.

Default value: undefined

theme​

string

Specifies the visual appearance of the component.

If it is 'auto' or undefined, the theme will automatically be chosen based on the platform. If custom themes are also present, they will take precedence over the built in themes, e.g. if there's an iOS based custom theme, it will be chosen on the iOS platform instead of the default iOS theme.

Supplied themes:

  • 'ios' - iOS theme
  • 'material' - Material theme
  • 'windows' - Windows theme

It's possible to modify theme colors or create custom themes.

info

Make sure that the theme you set is included in the downloaded package.

Default value: undefined

themeVariant​

"auto" | "light" | "dark"

Controls which variant of the theme will be used (light or dark).

Possible values:

  • 'light' - Use the light variant of the theme.
  • 'dark' - Use the dark variant of the theme.
  • 'auto' or undefined - Detect the preferred system theme on devices where this is supported.

To use the option with custom themes, make sure to create two custom themes, where the dark version has the same name as the light one, suffixed with '-dark', e.g.: 'my-theme' and 'my-theme-dark'.

Default value: undefined

Events​

The Input component ships with different event hooks for deep customization. Events are triggered through the lifecycle of the component where you can tie in custom functionality and code.

onDestroy​

(args: any, inst: any) => void

Triggered when the component is destroyed.

Parameters:

  • args - The event argument object.

  • inst - The component instance.

onInit​

(args: any, inst: any) => void

Triggered when the component is initialized.

Parameters:

  • args - The event argument object.

  • inst - The component instance.

Localization​

The Input component is fully localized. This covers date and time format, button copy, rtl and more.

locale​

MbscLocale

Sets the language of the component. The locale object contains all the translations for a given language. The built in language modules are listed below. If a language is not listed, it can be provided as a custom language module.

Supported values:

  • Arabic: localeAr, 'ar'
  • Bulgarian: localeBg, 'bg'
  • Catalan: localeCa, 'ca'
  • Czech: localeCs, 'cs'
  • Chinese: localeZh, 'zh'
  • Croatian: localeHr, 'hr'
  • Danish: localeDa, 'da'
  • Dutch: localeNl, 'nl'
  • English: localeEn or undefined, 'en'
  • English (UK): localeEnGB, 'en-GB'
  • Farsi: localeFa, 'fa'
  • German: localeDe, 'de'
  • Greek: localeEl, 'el'
  • Spanish: localeEs, 'es'
  • Finnish: localeFi, 'fi'
  • French: localeFr, 'fr'
  • Hebrew: localeHe, 'he'
  • Hindi: localeHi, 'hi'
  • Hungarian: localeHu, 'hu'
  • Italian: localeIt, 'it'
  • Japanese: localeJa, 'ja'
  • Korean: localeKo, 'ko'
  • Lithuanian: localeLt, 'lt'
  • Norwegian: localeNo, 'no'
  • Polish: localePl, 'pl'
  • Portuguese (Brazilian): localePtBR, 'pt-BR'
  • Portuguese (European): localePtPT, 'pt-PT'
  • Romanian: localeRo, 'ro'
  • Russian: localeRu, 'ru'
  • Russian (UA): localeRuUA, 'ru-UA'
  • Slovak: localeSk, 'sk'
  • Serbian: localeSr, 'sr'
  • Swedish: localeSv, 'sv'
  • Thai: localeTh, 'th'
  • Turkish: localeTr, 'tr'
  • Ukrainian: localeUa, 'ua'

Default value: undefined

rtl​

boolean

Enables right-to-left display.

Default value: false