Textfields documentation for React

General

Getting Started Quick Install Using with Cordova Using with Ionic Using with Meteor Mobiscroll CLI ES6 Modules Instance Customizing the Look and Feel Upgrade From Trial Utility functions Update version Upgrade Guide v4

Date & Time pickers

Calendar

Usage Options Events Methods Localization Conversion functions Theming

Date & Time

Usage Options Events Methods Localization Theming

Range

Usage Options Events Methods Localization Theming

Timespan

Usage Options Events Methods Localization Conversion functions Theming

Event Calendar

Usage Options Events Methods Localization Theming

Form components

Accordion

Usage

Alerts & Notifications

Alert Confirm Prompt Toast Snackbar Notes

Buttons

Usage Options Theming

Checkbox

Usage Attributes Theming

Dropdown Forms

Usage Options Events Methods Localization Validation Groups Theming

Progress

Usage Attributes Methods Theming

Radio Buttons

Usage Attributes Theming

Rating

Usage Attributes Methods Theming

Segmented

Usage Options Theming

Slider

Usage Attributes Methods Theming

Stepper

Usage Attributes Theming

Switch

Usage Options Theming

Textfields

Usage Attributes Theming

Timer

Usage Options Events Methods Localization Theming

Responsive list

Cards

Usage Options Methods Theming

Listview

Usage Options Events Methods Data attributes Localization Theming

Scrollview

Usage Options Events Methods Localization

Numeric pickers

Measurement

Usage Options Events Methods Temperature Speed Distance Mass Force Localization Theming

Number

Usage Options Events Methods Localization Theming

Numpad

Usage Options Events Methods Localization Decimal Timespan Time Date Conversion functions Theming

Pickers & dropdowns

Color

Usage Options Events Methods Localization Theming

Image

Usage Options Events Methods Data attributes Localization Theming

Option List

Usage Options Events Methods Localization Data attributes Theming

Scroller

Usage Options Events Methods Localization Conversion functions Theming

Select

Usage Options Events Methods Localization Theming

Treelist

Usage Options Events Methods Localization Theming

Layout & navigation Tools

Icons Language Modules

Accessibility

Section 508 WAI-ARIA Support Keyboard Support RTL Support

Textfields

<mobiscroll.Input />

Textfields

Simple input with label

<mobiscroll.Input value={myValue} onChange={myChange}>
    Username
</mobiscroll.Input>

Without label

<mobiscroll.Input value={myValue} onChange={myChange} />

Icons

With left icon

<mobiscroll.Input icon="ion-ios7-email" type="email" value={myValue} onChange={myChange}>
    Email
</mobiscroll.Input>

With right icon

<mobiscroll.Input icon="ion-ios7-email" iconAlign="right" value={myValue} onChange={myChange}>
    Email
</mobiscroll.Input>

Input style

This attribute can be used for customizing your input and textarea components rendering.

Underline input style

<mobiscroll.Input inputStyle="underline" value={myValue} onChange={myChange}>
    Username
</mobiscroll.Input>

Box input style

<mobiscroll.Input inputStyle="box" value={myValue} onChange={myChange}>
    Username
</mobiscroll.Input>

Outline input style

<mobiscroll.Input inputStyle="outline" value={myValue} onChange={myChange}>
    Username
</mobiscroll.Input>

Label style

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

Stacked label style

<mobiscroll.Input labelStyle="stacked" value={myValue} onChange={myChange}>
    Username
</mobiscroll.Input>

Inline label style

<mobiscroll.Input labelStyle="inline" value={myValue} onChange={myChange}>
    Username
</mobiscroll.Input>

Floating label style

<mobiscroll.Input labelStyle="floating" value={myValue} onChange={myChange}>
    Username
</mobiscroll.Input>

Password

The password toggle can be used to hide or show the entered password using icons

With icons

<mobiscroll.Input type="password" passwordToggle={true} iconShow="eye" iconHide="eye-blocked" value={myValue} onChange={myChange}>
    Password
</mobiscroll.Input>

With custom icons

<mobiscroll.Input type="password" passwordToggle={true} iconShow="my-show-icon" iconHide="my-hide-icon" value={myValue} onChange={myChange}>
    Password
</mobiscroll.Input>

File upload input

You can change the file type input icon with the iconUpload prop.

File type input with icon

<mobiscroll.Input type="file" placeholder="Select file..." iconUpload="cloud-upload">
    Upload
</mobiscroll.Input>

Prop	Type	Description
disabled	PropTypes.bool	Disables the textfield when true.
errorMessage	PropTypes.string	Shown error message when the field is invalid.
icon	PropTypes.string	Specify icon for the field. A font-icon name should be passed. Icon alignment can be controlled with the iconAlign attribute. Icons can be displayed on both sides by passing a JSON string with `left` and `right` properties containing icon names, e.g.: `icon='{ "right": "plus", "left": "minus" }'`. You can build your custom icon set on our download page ("Choose Icon Set" section). See the full list of available icons here. The default icon pack contains the following icons: home pencil office newspaper droplet image2 camera play bullhorn connection library book file4 copy2 copy3 stack folder tag cart support phone location credit map history clock alarm2 stopwatch calendar mobile drawer undo2 redo2 forward reply bubble bubbles disk download upload user4 key2 lock2 unlocked cogs aid bars cloud-download cloud-upload globe airplane earth link flag eye eye-blocked attachment star3 heart thumbs-up thumbs-up2 smiley2 sad2 checkmark close plus minus remove loop2 You can use the icons anywhere in your app using the `mbsc-ic mbsc-ic-{iconName}` classes, e.g.: `<div class="mbsc-ic mbsc-ic-star"></div>`
iconAlign	PropTypes.string	Controls icon alignment. Icons can be displayed on both sides by passing a JSON string with `left` and `right` properties containing icon names, e.g.: `icon='{ "right": "plus", "left": "minus" }'`.
iconHide	PropTypes.string	Specify icon for password hide. Defaults to `eye-blocked`.
iconShow	PropTypes.string	Specify icon for password show. Defaults to `eye`.
iconUpload	PropTypes.string	Specify icon for file type input. Defaults to `upload`.
inputStyle	PropTypes.string	Defines the input rendering mode. Possible values: `"underline"`, `"box"`, `"outline"`.
labelStyle	PropTypes.string	Defines the position of the label. Possible values: `"stacked"`, `"inline"`, `"floating"`.
name	PropTypes.string	Specify name attribute of the input.
passwordToggle	PropTypes.bool	When true, an icon is shown that toggles the visibility of the password.
type	PropTypes.string	Specify type attribute of the input.
valid	PropTypes.bool	Specify the valid state of the input. When false, the input will be styled as invalid.

Textarea

Textareas will auto-grow based on the entered content up until to 10 lines. After 10 lines scroll is enabled.

Simple textarea with label

<mobiscroll.Textarea value={myValue} onChange={myChange}>
    About me
</mobiscroll.Textarea>

Without label

<mobiscroll.Textarea value={myValue} onChange={myChange} />

Prop	Type	Description
disabled	PropTypes.bool	Disables the textfield when true.
errorMessage	PropTypes.string	Shown error message when the field is invalid.
icon	PropTypes.string	Specify icon for the field. A font-icon name should be passed. Icon alignment can be controlled with the iconAlign attribute. Icons can be displayed on both sides by passing a JSON string with `left` and `right` properties containing icon names, e.g.: `icon='{ "right": "plus", "left": "minus" }'`. You can build your custom icon set on our download page ("Choose Icon Set" section). See the full list of available icons here. The default icon pack contains the following icons: home pencil office newspaper droplet image2 camera play bullhorn connection library book file4 copy2 copy3 stack folder tag cart support phone location credit map history clock alarm2 stopwatch calendar mobile drawer undo2 redo2 forward reply bubble bubbles disk download upload user4 key2 lock2 unlocked cogs aid bars cloud-download cloud-upload globe airplane earth link flag eye eye-blocked attachment star3 heart thumbs-up thumbs-up2 smiley2 sad2 checkmark close plus minus remove loop2 You can use the icons anywhere in your app using the `mbsc-ic mbsc-ic-{iconName}` classes, e.g.: `<div class="mbsc-ic mbsc-ic-star"></div>`
iconAlign	PropTypes.string	Controls icon alignment. Icons can be displayed on both sides by passing a JSON string with `left` and `right` properties containing icon names, e.g.: `icon='{ "right": "plus", "left": "minus" }'`.
name	PropTypes.string	Specify name attribute of the input.
valid	PropTypes.bool	Specify the valid state of the input. When false, the input will be styled as invalid.

Icons

With left icon

<mobiscroll.Textarea icon="line-note" value={myValue} onChange={myChange}>
    About me
</mobiscroll.Textarea>

With right icon

<mobiscroll.Textarea icon="line-note" iconAlign="right" value={myValue} onChange={myChange}>
    About me
</mobiscroll.Textarea>

Input style

This attribute can be used for customizing your form input rendering.

Underline input style

<mobiscroll.Textarea inputStyle="underline" value={myValue} onChange={myChange}">
    About me
</mobiscroll.Textarea>

Box input style

<mobiscroll.Textarea inputStyle="box" value={myValue} onChange={myChange}">
    About me
</mobiscroll.Textarea>

Outline input style

<mobiscroll.Textarea inputStyle="outline" value={myValue} onChange={myChange}>
    About me
</mobiscroll.Textarea>

Label style

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

Stacked label style

<mobiscroll.Textarea labelStyle="stacked" value={myValue} onChange={myChange}>
    About me
</mobiscroll.Textarea>

Inline label style

<mobiscroll.Textarea labelStyle="inline" value={myValue} onChange={myChange}>
    About me
</mobiscroll.Textarea>

Floating label style

<mobiscroll.Textarea labelStyle="floating" value={myValue} onChange={myChange}>
    About me
</mobiscroll.Textarea>

Textfields theming

Global variables of the Input, Password, Textarea and Dropdown

Variable name	Description
$mbsc-input-background-light	Sets the background color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-input-background-dark
$mbsc-input-text-light	Sets the text color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-input-text-dark
$mbsc-form-input-border-light	Sets the border color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-form-input-border-dark
$mbsc-input-accent-light	Sets the accent color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-input-accent-dark
$mbsc-input-error-light	Sets the error color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-input-error-dark

iOS theme

The following variables are specific to the iOS theme light variant:

Variable name	Default value	Description
$mbsc-ios-input-background	#ffffff	Sets the background color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-ios-input-text	#000000	Sets the text color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-ios-input-border	#cccccc	Sets the border color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-ios-input-error	#d8332a	Sets the error color of the Input, along with the Password, Textarea and Dropdown fields.

iOS Dark theme

The following variables are specific to the iOS theme dark variant:

Variable name	Default value	Description
$mbsc-ios-dark-input-background	#0f0f0f	Sets the background color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-ios-dark-input-text	#ffffff	Sets the text color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-ios-dark-input-border	#333333	Sets the border color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-ios-dark-input-error	#d8332a	Sets the error color of the Input, along with the Password, Textarea and Dropdown fields.

Underline examples

iOS theme variables for the Input, Textarea and Dropdown with underline styling

Box examples

iOS theme variables for the Input, Textarea and Dropdown with box styling

Outline examples

iOS theme variables for the Input, Textarea and Dropdown with outline styling

Windows theme

The following variables are specific to the Windows theme light variant:

Variable name	Default value	Description
$mbsc-windows-input-text	#262626	Sets the text color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-windows-input-border	#999999	Sets the border color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-windows-input-accent	#0078d7	Sets the accent color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-windows-input-error	#d30101	Sets the error color of the Input, along with the Password, Textarea and Dropdown fields.

Windows Dark theme

The following variables are specific to the Windows theme dark variant:

Variable name	Default value	Description
$mbsc-windows-dark-input-text	#ffffff	Sets the text color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-windows-dark-input-border	#737373	Sets the border color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-windows-dark-input-accent	#0078d7	Sets the accent color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-windows-dark-input-error	#d30101	Sets the error color of the Input, along with the Password, Textarea and Dropdown fields.

Underline examples

Windows theme variables for Input, Textarea and Dropdown with underline styling

Box examples

Windows theme variables for Input, Textarea and Dropdown with box styling

Outline examples

Windows theme variables for Input, Textarea and Dropdown with outline styling

Material theme

The following variables are specific to the Material theme light variant:

Variable name	Default value	Description
$mbsc-material-input-background	#eeeeee	Sets the background color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-material-input-text	#6d6d6d	Sets the text color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-material-input-border	#6d6d6d	Sets the border color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-material-input-accent	#009688	Sets the accent color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-material-input-error	#de3226	Sets the error color of the Input, along with the Password, Textarea and Dropdown fields.

Material Dark theme

The following variables are specific to the Material theme dark variant:

Variable name	Default value	Description
$mbsc-material-dark-input-background	#303030	Sets the background color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-material-dark-input-text	#d4d4d4	Sets the text color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-material-dark-input-border	#d4d4d4	Sets the border color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-material-dark-input-accent	#81ccc4	Sets the accent color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-material-dark-input-error	#de3226	Sets the error color of the Input, along with the Password, Textarea and Dropdown fields.

Underline examples

Material theme variables for Input, Textarea and Dropdown with underline styling

Box examples

Material theme variables for Input, Textarea and Dropdown with box styling

Outline examples

Material theme variables for Input, Textarea and Dropdown with outline styling

Mobiscroll theme

The following variables are specific to the Mobiscroll theme light variant:

Variable name	Default value	Description
$mbsc-mobiscroll-input-text	#454545	Sets the text color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-mobiscroll-input-border	#787878	Sets the border color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-mobiscroll-input-accent	#4eccc4	Sets the accent color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-mobiscroll-input-error	#de3226	Sets the error color of the Input, along with the Password, Textarea and Dropdown fields.

Mobiscroll Dark theme

The following variables are specific to the Mobiscroll theme dark variant:

Variable name	Default value	Description
$mbsc-mobiscroll-dark-input-text	#f7f7f7	Sets the text color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-mobiscroll-dark-input-border	#ffffff	Sets the border color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-mobiscroll-dark-input-accent	#4fccc4	Sets the accent color of the Input, along with the Password, Textarea and Dropdown fields.
$mbsc-mobiscroll-dark-input-error	#de3226	Sets the error color of the Input, along with the Password, Textarea and Dropdown fields.

Underline examples

Mobiscroll theme variables for Input, Textarea and Dropdown with underline styling

Box examples

Mobiscroll theme variables for Input, Textarea and Dropdown with box styling

Outline examples

Mobiscroll theme variables for Input, Textarea and Dropdown with outline styling

If you are looking for the generic Form variables, check out the tables here.

Scheduling & calendaring

Date & time picking

Mobile UI Patterns

Docs

Community Forum

Knowledge base

Customers

Blog