---
title: "Javascript Forms Customize the input Example | Mobiscroll"
component: "Forms"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/forms/input-label-types"
---

# Customize the input - JavaScript Forms demo

Javascript input examples with underlined, boxed and outline rendering and labels stacked, inline and floating. Plain JavaScript API.

- [Live demo](https://demo.mobiscroll.com/javascript/forms/input-label-types)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/form-components/forms/input-label-types)
- This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/forms/input-label-types.md), [Angular](https://demo.mobiscroll.com/angular/forms/input-label-types.md), [React](https://demo.mobiscroll.com/react/forms/input-label-types.md), [Vue](https://demo.mobiscroll.com/vue/forms/input-label-types.md)

## Description

The three input styles: `underline`, `box` and `outline` can be combined with three label styles: `stacked`, `inline` or `floating`. Try different combinations to find what's right for you.

## What this demo shows

- This demo shows examples for different input and label styles.
- **Input styles** Underline, box, and outline styling for form controls.
- **Label styles** Stacked, inline, and floating labels combined with each input style.
- **Style controls** Controls for dynamically switching between the available input and label styles.
- **Field types** Consistent styling across text inputs, text areas, select inputs, and file uploads.
- **Field variations** Fields with icons, validation error styling, and no labels.

## Best for

- **Brand-aligned forms** Comparing input and label combinations when adapting forms to a product's visual style.
- **Mixed-field forms** Applying consistent styling across text inputs, text areas, selects, and file uploads.
- **Compact and spacious layouts** Evaluating inline, stacked, and floating labels for forms with different space constraints.
- **Validation states** Styling fields that need clear error feedback alongside their standard state.
- **Icon-supported inputs** Presenting fields that use icons to provide additional visual context.

## Tutorial

### Input type

- (x) Underline
- ( ) Box
- ( ) Outline

### Label type

- (x) Stacked
- ( ) Inline
- ( ) Floating

```html
<label>
    Name
    <input data-input-style="underline" data-label-style="stacked" mbsc-input type="text" data-start-icon="user4" placeholder="Input with label" />
</label>
<label class="mbsc-err">
    Email
    <input data-input-style="underline" data-label-style="stacked" mbsc-input type="text" data-start-icon="material-email" placeholder="With error styling" data-error="true" />
</label>
<label>
    <input data-input-style="underline" data-label-style="stacked" mbsc-input type="text" data-start-icon="lock2" placeholder="Without label" />
</label>
<label>
    About me
    <textarea mbsc-textarea data-input-style="underline" data-label-style="stacked" data-start-icon="bubble" placeholder="Textarea with left icon"></textarea>
</label>
<label>
    <select mbsc-dropdown data-input-style="underline" data-label-style="stacked" data-start-icon="plus" data-end-icon="close">
        <option>Select with icons</option>
        <option value="Opel">Opel</option>
        <option value="Renault">Renault</option>
        <option value="Citroen">Citroen</option>
        <option value="Lotus">Lotus</option>
    </select>
</label>
<label>
    File upload
    <input data-input-style="underline" data-label-style="stacked" mbsc-input type="file" placeholder="Select file..." />
</label>
```

With "Box":

```html
<label>
    Name
    <input data-input-style="box" data-label-style="stacked" mbsc-input type="text" data-start-icon="user4" placeholder="Input with label" />
</label>
<label class="mbsc-err">
    Email
    <input data-input-style="box" data-label-style="stacked" mbsc-input type="text" data-start-icon="material-email" placeholder="With error styling" data-error="true" />
</label>
<label>
    <input data-input-style="box" data-label-style="stacked" mbsc-input type="text" data-start-icon="lock2" placeholder="Without label" />
</label>
<label>
    About me
    <textarea mbsc-textarea data-input-style="box" data-label-style="stacked" data-start-icon="bubble" placeholder="Textarea with left icon"></textarea>
</label>
<label>
    <select mbsc-dropdown data-input-style="box" data-label-style="stacked" data-start-icon="plus" data-end-icon="close">
        <option>Select with icons</option>
        <option value="Opel">Opel</option>
        <option value="Renault">Renault</option>
        <option value="Citroen">Citroen</option>
        <option value="Lotus">Lotus</option>
    </select>
</label>
<label>
    File upload
    <input data-input-style="box" data-label-style="stacked" mbsc-input type="file" placeholder="Select file..." />
</label>
```

With "Outline":

```html
<label>
    Name
    <input data-input-style="outline" data-label-style="stacked" mbsc-input type="text" data-start-icon="user4" placeholder="Input with label" />
</label>
<label class="mbsc-err">
    Email
    <input data-input-style="outline" data-label-style="stacked" mbsc-input type="text" data-start-icon="material-email" placeholder="With error styling" data-error="true" />
</label>
<label>
    <input data-input-style="outline" data-label-style="stacked" mbsc-input type="text" data-start-icon="lock2" placeholder="Without label" />
</label>
<label>
    About me
    <textarea mbsc-textarea data-input-style="outline" data-label-style="stacked" data-start-icon="bubble" placeholder="Textarea with left icon"></textarea>
</label>
<label>
    <select mbsc-dropdown data-input-style="outline" data-label-style="stacked" data-start-icon="plus" data-end-icon="close">
        <option>Select with icons</option>
        <option value="Opel">Opel</option>
        <option value="Renault">Renault</option>
        <option value="Citroen">Citroen</option>
        <option value="Lotus">Lotus</option>
    </select>
</label>
<label>
    File upload
    <input data-input-style="outline" data-label-style="stacked" mbsc-input type="file" placeholder="Select file..." />
</label>
```

With "Inline":

```html
<label>
    Name
    <input data-input-style="underline" data-label-style="inline" mbsc-input type="text" data-start-icon="user4" placeholder="Input with label" />
</label>
<label class="mbsc-err">
    Email
    <input data-input-style="underline" data-label-style="inline" mbsc-input type="text" data-start-icon="material-email" placeholder="With error styling" data-error="true" />
</label>
<label>
    <input data-input-style="underline" data-label-style="inline" mbsc-input type="text" data-start-icon="lock2" placeholder="Without label" />
</label>
<label>
    About me
    <textarea mbsc-textarea data-input-style="underline" data-label-style="inline" data-start-icon="bubble" placeholder="Textarea with left icon"></textarea>
</label>
<label>
    <select mbsc-dropdown data-input-style="underline" data-label-style="inline" data-start-icon="plus" data-end-icon="close">
        <option>Select with icons</option>
        <option value="Opel">Opel</option>
        <option value="Renault">Renault</option>
        <option value="Citroen">Citroen</option>
        <option value="Lotus">Lotus</option>
    </select>
</label>
<label>
    File upload
    <input data-input-style="underline" data-label-style="inline" mbsc-input type="file" placeholder="Select file..." />
</label>
```

With "Floating":

```html
<label>
    Name
    <input data-input-style="underline" data-label-style="floating" mbsc-input type="text" data-start-icon="user4" placeholder="Input with label" />
</label>
<label class="mbsc-err">
    Email
    <input data-input-style="underline" data-label-style="floating" mbsc-input type="text" data-start-icon="material-email" placeholder="With error styling" data-error="true" />
</label>
<label>
    <input data-input-style="underline" data-label-style="floating" mbsc-input type="text" data-start-icon="lock2" placeholder="Without label" />
</label>
<label>
    About me
    <textarea mbsc-textarea data-input-style="underline" data-label-style="floating" data-start-icon="bubble" placeholder="Textarea with left icon"></textarea>
</label>
<label>
    <select mbsc-dropdown data-input-style="underline" data-label-style="floating" data-start-icon="plus" data-end-icon="close">
        <option>Select with icons</option>
        <option value="Opel">Opel</option>
        <option value="Renault">Renault</option>
        <option value="Citroen">Citroen</option>
        <option value="Lotus">Lotus</option>
    </select>
</label>
<label>
    File upload
    <input data-input-style="underline" data-label-style="floating" mbsc-input type="file" placeholder="Select file..." />
</label>
```

## Code

### JS

```js
mobiscroll.setOptions({
  theme: 'ios',
  themeVariant: 'light'
});
```

### HTML

```html
<div class="mbsc-grid">
    <div class="mbsc-row mbsc-justify-content-center">
        <div class="mbsc-col-sm-12 mbsc-col-md-8 mbsc-col-xl-4">
            <div class="mbsc-form-group">
                <div class="mbsc-form-group-title">Underline inputs with stacked labels</div>
                <label>
                    Name
                    <input mbsc-input data-label-style="stacked" data-input-style="underline" type="text" data-start-icon="user4" placeholder="Input with label" />
                </label>
                <label class="mbsc-err">
                    Email
                    <input mbsc-input data-label-style="stacked" data-input-style="underline" type="text" data-start-icon="material-email" placeholder="With error styling" data-error="true" />
                </label>
                <label class="mbsc-err">
                    Password
                    <input mbsc-input data-label-style="stacked" data-input-style="underline" type="password" data-password-toggle="true" placeholder="With icons and error message" data-start-icon="lock2" data-error="true" data-error-message="An error occurred" />
                </label>
                <label>
                    <input mbsc-input data-label-style="stacked" data-input-style="underline" type="text" data-start-icon="empty" placeholder="Without label" />
                </label>
                <label>
                    About me
                    <textarea mbsc-textarea data-label-style="stacked" data-input-style="underline" data-start-icon="bubble" data-start-icon-align="left" placeholder="Textarea with left icon"></textarea>
                </label>
                <label>
                    <select mbsc-dropdown data-label-style="stacked" data-input-style="underline" data-start-icon="plus" data-end-icon="close">
                        <option>Select with icons</option>
                        <option value="Opel">Opel</option>
                        <option value="Renault">Renault</option>
                        <option value="Citroen">Citroen</option>
                        <option value="Lotus">Lotus</option>
                    </select>
                </label>
                <label>
                    File upload
                    <input mbsc-input data-label-style="stacked" data-input-style="underline" type="file" placeholder="Select file..." />
                </label>
            </div>
        </div>
        <div class="mbsc-col-sm-12 mbsc-col-md-8 mbsc-col-xl-4">
            <div class="mbsc-form-group">
                <div class="mbsc-form-group-title">Underline inputs with inline labels</div>
                <label>
                    Name
                    <input mbsc-input data-label-style="inline" data-input-style="underline" type="text" data-start-icon="user4" placeholder="Input with label" />
                </label>
                <label class="mbsc-err">
                    Email
                    <input mbsc-input data-label-style="inline" data-input-style="underline" type="text" data-start-icon="material-email" placeholder="With error styling" data-error="true" />
                </label>
                <label class="mbsc-err">
                    Password
                    <input mbsc-input data-label-style="inline" data-input-style="underline" type="password" data-password-toggle="true" placeholder="With icons and error message" data-start-icon="lock2" data-error="true" data-error-message="An error occurred" />
                </label>
                <label>
                    <input mbsc-input data-label-style="inline" data-input-style="underline" type="text" data-start-icon="empty" placeholder="Without label" />
                </label>
                <label>
                    About me
                    <textarea mbsc-textarea data-label-style="inline" data-input-style="underline" data-start-icon="bubble" data-start-icon-align="left" placeholder="Textarea with left icon"></textarea>
                </label>
                <label>
                    <select mbsc-dropdown data-label-style="inline" data-input-style="underline" data-start-icon="plus" data-end-icon="close">
                        <option>Select with icons</option>
                        <option value="Opel">Opel</option>
                        <option value="Renault">Renault</option>
                        <option value="Citroen">Citroen</option>
                        <option value="Lotus">Lotus</option>
                    </select>
                </label>
                <label>
                    File upload
                    <input mbsc-input data-label-style="inline" data-input-style="underline" type="file" placeholder="Select file..." />
                </label>
            </div>
        </div>
        <div class="mbsc-col-sm-12 mbsc-col-md-8 mbsc-col-xl-4">
            <div class="mbsc-form-group">
                <div class="mbsc-form-group-title">Underline inputs with floating labels</div>
                <label>
                    Name
                    <input mbsc-input data-label-style="floating" data-input-style="underline" type="text" data-start-icon="user4" placeholder="Input with label" />
                </label>
                <label class="mbsc-err">
                    Email
                    <input mbsc-input data-label-style="floating" data-input-style="underline" type="text" data-start-icon="material-email" placeholder="With error styling" data-error="true" />
                </label>
                <label class="mbsc-err">
                    Password
                    <input mbsc-input data-label-style="floating" data-input-style="underline" type="password" data-password-toggle="true" placeholder="With icons and error message" data-start-icon="lock2" data-error="true" data-error-message="An error occurred" />
                </label>
                <label>
                    <input mbsc-input data-label-style="floating" data-input-style="underline" type="text" data-start-icon="empty" placeholder="Without label" />
                </label>
                <label>
                    About me
                    <textarea mbsc-textarea data-label-style="floating" data-input-style="underline" data-start-icon="bubble" data-start-icon-align="left" placeholder="Textarea with left icon"></textarea>
                </label>
                <label>
                    <select mbsc-dropdown data-label-style="floating" data-input-style="underline" data-start-icon="plus" data-end-icon="close">
                        <option>Select with icons</option>
                        <option value="Opel">Opel</option>
                        <option value="Renault">Renault</option>
                        <option value="Citroen">Citroen</option>
                        <option value="Lotus">Lotus</option>
                    </select>
                </label>
                <label>
                    File upload
                    <input mbsc-input data-label-style="floating" data-input-style="underline" type="file" placeholder="Select file..." />
                </label>
            </div>
        </div>
    </div>
    <div class="mbsc-row mbsc-justify-content-center">
        <div class="mbsc-col-sm-12 mbsc-col-md-8 mbsc-col-xl-4">
            <div class="mbsc-form-group">
                <div class="mbsc-form-group-title">Box inputs with stacked labels</div>
                <label>
                    Name
                    <input mbsc-input data-label-style="stacked" data-input-style="box" type="text" data-start-icon="user4" placeholder="Input with label" />
                </label>
                <label class="mbsc-err">
                    Email
                    <input mbsc-input data-label-style="stacked" data-input-style="box" type="text" data-start-icon="material-email" placeholder="With error styling" data-error="true" />
                </label>
                <label class="mbsc-err">
                    Password
                    <input mbsc-input data-label-style="stacked" data-input-style="box" type="password" data-password-toggle="true" placeholder="With icons and error message" data-start-icon="lock2" data-error="true" data-error-message="An error occurred" />
                </label>
                <label>
                    <input mbsc-input data-label-style="stacked" data-input-style="box" type="text" data-start-icon="empty" placeholder="Without label" />
                </label>
                <label>
                    About me
                    <textarea mbsc-textarea data-label-style="stacked" data-input-style="box" data-start-icon="bubble" data-start-icon-align="left" placeholder="Textarea with left icon"></textarea>
                </label>
                <label>
                    <select mbsc-dropdown data-label-style="stacked" data-input-style="box" data-start-icon="plus" data-end-icon="close">
                        <option>Select with icons</option>
                        <option value="Opel">Opel</option>
                        <option value="Renault">Renault</option>
                        <option value="Citroen">Citroen</option>
                        <option value="Lotus">Lotus</option>
                    </select>
                </label>
                <label>
                    File upload
                    <input mbsc-input data-label-style="stacked" data-input-style="box" type="file" placeholder="Select file..." />
                </label>
            </div>
        </div>
        <div class="mbsc-col-sm-12 mbsc-col-md-8 mbsc-col-xl-4">
            <div class="mbsc-form-group">
                <div class="mbsc-form-group-title">box inputs with inline labels</div>
                <label>
                    Name
                    <input mbsc-input data-label-style="inline" data-input-style="box" type="text" data-start-icon="user4" placeholder="Input with label" />
                </label>
                <label class="mbsc-err">
                    Email
                    <input mbsc-input data-label-style="inline" data-input-style="box" type="text" data-start-icon="material-email" placeholder="With error styling" data-error="true" />
                </label>
                <label class="mbsc-err">
                    Password
                    <input mbsc-input data-label-style="inline" data-input-style="box" type="password" data-password-toggle="true" placeholder="With icons and error message" data-start-icon="lock2" data-error="true" data-error-message="An error occurred" />
                </label>
                <label>
                    <input mbsc-input data-label-style="inline" data-input-style="box" type="text" data-start-icon="empty" placeholder="Without label" />
                </label>
                <label>
                    About me
                    <textarea mbsc-textarea data-label-style="inline" data-input-style="box" data-start-icon="bubble" data-start-icon-align="left" placeholder="Textarea with left icon"></textarea>
                </label>
                <label>
                    <select mbsc-dropdown data-label-style="inline" data-input-style="box" data-start-icon="plus" data-end-icon="close">
                        <option>Select with icons</option>
                        <option value="Opel">Opel</option>
                        <option value="Renault">Renault</option>
                        <option value="Citroen">Citroen</option>
                        <option value="Lotus">Lotus</option>
                    </select>
                </label>
                <label>
                    File upload
                    <input mbsc-input data-label-style="inline" data-input-style="box" type="file" placeholder="Select file..." />
                </label>
            </div>
        </div>
        <div class="mbsc-col-sm-12 mbsc-col-md-8 mbsc-col-xl-4">
            <div class="mbsc-form-group">
                <div class="mbsc-form-group-title">box inputs with floating labels</div>
                <label>
                    Name
                    <input mbsc-input data-label-style="floating" data-input-style="box" type="text" data-start-icon="user4" placeholder="Input with label" />
                </label>
                <label class="mbsc-err">
                    Email
                    <input mbsc-input data-label-style="floating" data-input-style="box" type="text" data-start-icon="material-email" placeholder="With error styling" data-error="true" />
                </label>
                <label class="mbsc-err">
                    Password
                    <input mbsc-input data-label-style="floating" data-input-style="box" type="password" data-password-toggle="true" placeholder="With icons and error message" data-start-icon="lock2" data-error="true" data-error-message="An error occurred" />
                </label>
                <label>
                    <input mbsc-input data-label-style="floating" data-input-style="box" type="text" data-start-icon="empty" placeholder="Without label" />
                </label>
                <label>
                    About me
                    <textarea mbsc-textarea data-label-style="floating" data-input-style="box" data-start-icon="bubble" data-start-icon-align="left" placeholder="Textarea with left icon"></textarea>
                </label>
                <label>
                    <select mbsc-dropdown data-label-style="floating" data-input-style="box" data-start-icon="plus" data-end-icon="close">
                        <option>Select with icons</option>
                        <option value="Opel">Opel</option>
                        <option value="Renault">Renault</option>
                        <option value="Citroen">Citroen</option>
                        <option value="Lotus">Lotus</option>
                    </select>
                </label>
                <label>
                    File upload
                    <input mbsc-input data-label-style="floating" data-input-style="box" type="file" placeholder="Select file..." />
                </label>
            </div>
        </div>
    </div>
    <div class="mbsc-row mbsc-justify-content-center">
        <div class="mbsc-col-sm-12 mbsc-col-md-8 mbsc-col-xl-4">
            <div class="mbsc-form-group">
                <div class="mbsc-form-group-title">Outline inputs with stacked labels</div>
                <label>
                    Name
                    <input mbsc-input data-label-style="stacked" data-input-style="outline" type="text" data-start-icon="user4" placeholder="Input with label" />
                </label>
                <label class="mbsc-err">
                    Email
                    <input mbsc-input data-label-style="stacked" data-input-style="outline" type="text" data-start-icon="material-email" placeholder="With error styling" data-error="true" />
                </label>
                <label class="mbsc-err">
                    Password
                    <input mbsc-input data-label-style="stacked" data-input-style="outline" type="password" data-password-toggle="true" placeholder="With icons and error message" data-start-icon="lock2" data-error="true" data-error-message="An error occurred" />
                </label>
                <label>
                    <input mbsc-input data-label-style="stacked" data-input-style="outline" type="text" data-start-icon="empty" placeholder="Without label" />
                </label>
                <label>
                    About me
                    <textarea mbsc-textarea data-label-style="stacked" data-input-style="outline" data-start-icon="bubble" data-start-icon-align="left" placeholder="Textarea with left icon"></textarea>
                </label>
                <label>
                    <select mbsc-dropdown data-label-style="stacked" data-input-style="outline" data-start-icon="plus" data-end-icon="close">
                        <option>Select with icons</option>
                        <option value="Opel">Opel</option>
                        <option value="Renault">Renault</option>
                        <option value="Citroen">Citroen</option>
                        <option value="Lotus">Lotus</option>
                    </select>
                </label>
                <label>
                    File upload
                    <input mbsc-input data-label-style="stacked" data-input-style="outline" type="file" placeholder="Select file..." />
                </label>
            </div>
        </div>
        <div class="mbsc-col-sm-12 mbsc-col-md-8 mbsc-col-xl-4">
            <div class="mbsc-form-group">
                <div class="mbsc-form-group-title">Outline inputs with inline labels</div>
                <label>
                    Name
                    <input mbsc-input data-label-style="inline" data-input-style="outline" type="text" data-start-icon="user4" placeholder="Input with label" />
                </label>
                <label class="mbsc-err">
                    Email
                    <input mbsc-input data-label-style="inline" data-input-style="outline" type="text" data-start-icon="material-email" placeholder="With error styling" data-error="true" />
                </label>
                <label class="mbsc-err">
                    Password
                    <input mbsc-input data-label-style="inline" data-input-style="outline" type="password" data-password-toggle="true" placeholder="With icons and error message" data-start-icon="lock2" data-error="true" data-error-message="An error occurred" />
                </label>
                <label>
                    <input mbsc-input data-label-style="inline" data-input-style="outline" type="text" data-start-icon="empty" placeholder="Without label" />
                </label>
                <label>
                    About me
                    <textarea mbsc-textarea data-label-style="inline" data-input-style="outline" data-start-icon="bubble" data-start-icon-align="left" placeholder="Textarea with left icon"></textarea>
                </label>
                <label>
                    <select mbsc-dropdown data-label-style="inline" data-input-style="outline" data-start-icon="plus" data-end-icon="close">
                        <option>Select with icons</option>
                        <option value="Opel">Opel</option>
                        <option value="Renault">Renault</option>
                        <option value="Citroen">Citroen</option>
                        <option value="Lotus">Lotus</option>
                    </select>
                </label>
                <label>
                    File upload
                    <input mbsc-input data-label-style="inline" data-input-style="outline" type="file" placeholder="Select file..." />
                </label>
            </div>
        </div>
        <div class="mbsc-col-sm-12 mbsc-col-md-8 mbsc-col-xl-4">
            <div class="mbsc-form-group">
                <div class="mbsc-form-group-title">Outline inputs with floating labels</div>
                <label>
                    Name
                    <input mbsc-input data-label-style="floating" data-input-style="outline" type="text" data-start-icon="user4" placeholder="Input with label" />
                </label>
                <label class="mbsc-err">
                    Email
                    <input mbsc-input data-label-style="floating" data-input-style="outline" type="text" data-start-icon="material-email" placeholder="With error styling" data-error="true" />
                </label>
                <label class="mbsc-err">
                    Password
                    <input mbsc-input data-label-style="floating" data-input-style="outline" type="password" data-password-toggle="true" placeholder="With icons and error message" data-start-icon="lock2" data-error="true" data-error-message="An error occurred" />
                </label>
                <label>
                    <input mbsc-input data-label-style="floating" data-input-style="outline" type="text" data-start-icon="empty" placeholder="Without label" />
                </label>
                <label>
                    About me
                    <textarea mbsc-textarea data-label-style="floating" data-input-style="outline" data-start-icon="bubble" data-start-icon-align="left" placeholder="Textarea with left icon"></textarea>
                </label>
                <label>
                    <select mbsc-dropdown data-label-style="floating" data-input-style="outline" data-start-icon="plus" data-end-icon="close">
                        <option>Select with icons</option>
                        <option value="Opel">Opel</option>
                        <option value="Renault">Renault</option>
                        <option value="Citroen">Citroen</option>
                        <option value="Lotus">Lotus</option>
                    </select>
                </label>
                <label>
                    File upload
                    <input mbsc-input data-label-style="floating" data-input-style="outline" type="file" placeholder="Select file..." />
                </label>
            </div>
        </div>
    </div>
</div>
```

## Implementation notes

- `inputStyle` accepts `underline`, `box`, or `outline`; `labelStyle` accepts `stacked`, `inline`, or `floating`. Both options apply uniformly to `Input`, `Textarea`, and `Dropdown` (and to a `type="file"` input, which is just an `Input` variant) and can be combined freely (`data-input-style`/`data-label-style` in JS/jQuery).
- `startIcon`/`endIcon` (`data-start-icon`/`data-end-icon` in JS/jQuery) place an icon inside the field, before or after the value.
- `error` (boolean) applies error styling to a field; `errorMessage` adds explanatory text shown below it.
- `passwordToggle` (boolean), combined with `type="password"`, adds a show/hide toggle control to a password field.
- Omitting the `label` prop/attribute (and its wrapping text in JS/jQuery) renders the field with no label, keeping only its `placeholder`.
- `Dropdown`/`mbsc-dropdown`/`select[mbsc-dropdown]` takes the same `inputStyle`, `labelStyle`, `startIcon`, and `endIcon` options as `Input`; its options are plain `<option>` elements.
- Switching the input/label style dynamically (as this demo's style switcher does) is done by calling `.setOptions({ inputStyle: ... })` / `.setOptions({ labelStyle: ... })` on each field instance in JS/jQuery; in React/Angular/Vue it's done by updating the bound `inputStyle`/`labelStyle` prop value on re-render.
- Framework differences: React `<Input inputStyle="underline" labelStyle="stacked" startIcon="..." error={true} errorMessage="..." passwordToggle={true} label="..." />`; Vue `<MbscInput inputStyle="underline" labelStyle="stacked" startIcon="..." :error="true" :passwordToggle="true" label="..." />`; Angular `<mbsc-input inputStyle="underline" labelStyle="stacked" startIcon="..." error="true" label="...">`; JS/jQuery `<label>Name<input mbsc-input data-input-style="underline" data-label-style="stacked" data-start-icon="..." data-error="true" /></label>`.

## Run it in your project

1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).

2. Clone the repository:

   ```
   git clone https://github.com/acidb/mobiscroll-demos-javascript.git
   ```

3. If not installed yet, install the Mobiscroll CLI from NPM:

   ```
   npm install -g @mobiscroll/cli
   ```

4. Config Mobiscroll - open a terminal window in the root directory and run:

   ```
   mobiscroll config javascript
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   npm run dev
   ```

On a trial, add `--trial` to the config command: `mobiscroll config javascript --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/javascript/getting-started/installation

## Related demos

- Previous: [Field types](https://demo.mobiscroll.com/javascript/forms/inputs-text-areas-date-fields.md) - Javascript text field input examples with single-, multi-line, masked, reveal password, disabled, error styling.