General
Getting Started
Quick Install
Using with Cordova
Using with Vue.js
Mobiscroll CLI
ES6 Modules
Instance
Utility functions
Upgrade Guide v3
Date & Time pickers
Event Calendar
Form components
Alerts & Notifications
Buttons
Checkbox
Dropdown
Forms
Progress
Radio Buttons
Segmented
Slider
Stepper
Switch
Textfields
Timer
Responsive list
Numeric pickers
Pickers & dropdowns
Layout & navigation
Tools
Accessibility
Textfields
Textbox
Wrapped in label element
<label>
Username
<input id="username" />
</label>
Wrapped in div element
<div>
<label for="username">Username</label>
<input id="username" />
</div>
Without label
<div>
<input id="username" placeholder="Username" />
</div>
Icons
With left icon
<label>
Email
<input id="email" type="email" data-icon="ion-ios7-email" />
</label>
With right icon
<label>
Email
<input id="email" type="email" data-icon="ion-ios7-email" data-icon-align="right"/>
</label>
Password
The password toggle can be used to hide or show the entered password using icons
Without toggle
<input type="password" placeholder="Password">With icons
<input type="text" placeholder="Password" data-password-toggle="true" data-icon-show="eye" data-icon-hide="eye-blocked">With custom icons
<input type="text" placeholder="Password" data-password-toggle="true" data-icon-show="my-show-icon" data-icon-hide="my-hide-icon"/>Textarea
Textareas will auto-grow based on the entered content up until to 10 lines. After 10 lines scroll is enabled.
Wrapped in label element
<label>
About me
<textarea id="aboutme"></textarea>
</label>
Wrapped in div element
<div>
<label for="aboutme">About me</label>
<textarea id="aboutme"></textarea>
</div>
Without label
<div>
<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
| Name | Description |
|---|---|
| data-enhance | If a form element has the data-enhance="false" attribute, the particular element won't be enhanced. |
| data-icon |
Specify icons for a button, textbox, textarea , stepper, segmented control, slider, progress or select.
A font-icon name should be passed.
Icon alignment can be controlled with the data-icon-align attribute. Icons can be displayed on both sides by passing and object with left and right properties containing icon names,
e.g.: data-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: You can use the icons anywhere in your app using thembsc-ic mbsc-ic-{iconName} classes, e.g.:
|
| data-icon-align | Specify icon alignment. It can be "left" or "right", it defaults to "left" if not specified. |
| data-icon-hide | Specify icon for hide password. It can be any valid icon name, it defaults to "eye-blocked" if not specified. |
| data-icon-show | Specify icon for show password. It can be any valid icon name, it defaults to "eye" if not specified. |
| data-password-toggle | If the input of a password field has the data-password-toggle="true" attribute, the visibility of the password can be toggled. |
| disabled | If an element has the disabled attribute, the element will be disabled. |
Icons
With left icon
<label>
About me
<textarea id="aboutme" data-icon="line-note"></textarea>
</label>
With right icon
<label>
About me
<textarea id="aboutme" data-icon="line-note" data-icon-align="right"></textarea>
</label>
