Textfields

Textbox

<label>
    Username
    <input mbsc-input id="username" />
</label>
    

<div>
    <label for="username">Username</label>
    <input mbsc-input id="username" />
</div>
    

<div>
    <input mbsc-input id="username" placeholder="Username" />
</div>
    

Icons

<label>
    Email
    <input mbsc-input id="email" type="email" data-icon="ion-ios7-email" />
</label>
    

<label>
    Email
    <input mbsc-input id="email" type="email" data-icon="ion-ios7-email" data-icon-align="right"/>
</label>
    

Input style

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

<label>
    Username
    <input mbsc-input id="username" data-input-style="underline" />
</label>
    

<label>
    Username
    <input mbsc-input id="username" data-input-style="box" />
</label>
    

<label>
    Username
    <input mbsc-input id="username" data-input-style="outline" />
</label>
    

Label style

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

<label>
    Username
    <input mbsc-input id="username" data-label-style="stacked" />
</label>
    

<label>
    Username
    <input mbsc-input id="username" data-label-style="inline" />
</label>
    

<label>
    Username
    <input mbsc-input id="username" data-label-style="floating" />
</label>
    

Password

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

<input mbsc-input type="password" placeholder="Password">

<input mbsc-input type="text" placeholder="Password" data-password-toggle="true" data-icon-show="eye" data-icon-hide="eye-blocked">

<input mbsc-input type="text" placeholder="Password" data-password-toggle="true" data-icon-show="my-show-icon" data-icon-hide="my-hide-icon"/>

File upload input

You can change the file type input icon with the data-icon-upload attribute.

<label>
    Upload
    <input mbsc-input type="file" placeholder="Select file..." data-icon-upload="cloud-upload"/>
</label>

Textarea

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

<label>
    About me
    <textarea mbsc-textarea id="aboutme"></textarea>
</label>
    

<div>
    <label for="aboutme">About me</label>
    <textarea mbsc-textarea id="aboutme"></textarea>
</div>
    

<div>
    <textarea mbsc-textarea id="aboutme" placeholder="About me"></textarea>
</div>
    

For many more examples - simple and complex use-cases - check out the textfield demos for javascript.

Attributes

<div class="mbsc-ic mbsc-ic-star"></div>

Icons

<label>
    About me
    <textarea mbsc-textarea id="aboutme" data-icon="line-note"></textarea>
</label>
    

<label>
    About me
    <textarea mbsc-textarea id="aboutme" data-icon="line-note" data-icon-align="right"></textarea>
</label>
    

Input style

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

<label>
    About me
    <textarea mbsc-textarea id="aboutme" data-input-style="underline"></textarea>
</label>
    

<label>
    About me
    <textarea mbsc-textarea id="aboutme" data-input-style="box"></textarea>
</label>
    

<label>
    About me
    <textarea mbsc-textarea id="aboutme" data-input-style="outline"></textarea>
</label>
    

Label style

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

<label>
    About me
    <textarea mbsc-textarea id="aboutme" data-label-style="stacked"></textarea>
</label>
    

<label>
    About me
    <textarea mbsc-textarea id="aboutme" data-label-style="inline"></textarea>
</label>
    

<label>
    About me
    <textarea mbsc-textarea id="aboutme" data-label-style="floating"></textarea>
</label>
    

Textfields theming

Global variables of the Input, Password, Textarea and Dropdown

iOS theme

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

iOS Dark theme

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

Underline examples

Box examples

Outline examples

Windows theme

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

Windows Dark theme

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

Underline examples

Box examples

Outline examples

Material theme

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

Material Dark theme

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

Underline examples

Box examples

Outline examples

Mobiscroll theme

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

Mobiscroll Dark theme

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

Underline examples

Box examples

Outline examples

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