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

# Customize the input - Vue Forms demo

Vue input examples with underlined, boxed and outline rendering and labels stacked, inline and floating. For Vue and Nuxt.

- [Live demo](https://demo.mobiscroll.com/vue/forms/input-label-types)
- [View SFC JS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue/tree/main/src/demos/form-components/forms/input-label-types)
- [View SFC TS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue-ts/tree/main/src/demos/form-components/forms/input-label-types)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/forms/input-label-types.md), [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)

## 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

```vue
<MbscInput inputStyle="underline" labelStyle="stacked" startIcon="user4" placeholder="Input with label" label="Name" />
<MbscInput inputStyle="underline" labelStyle="stacked" startIcon="material-email" placeholder="With error styling" error="true" label="Email" />
<MbscInput inputStyle="underline" labelStyle="stacked" startIcon="lock2" placeholder="Without label" />
<MbscTextarea inputStyle="underline" labelStyle="stacked" startIcon="bubble" placeholder="Textarea with left icon" label="About me" />
<MbscDropdown inputStyle="underline" labelStyle="stacked" startIcon="plus" endIcon="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>
</MbscDropdown>
<MbscInput inputStyle="underline" labelStyle="stacked" type="file" placeholder="Select file..." label="File upload"></Input>
```

With "Box":

```vue
<MbscInput inputStyle="box" labelStyle="stacked" startIcon="user4" placeholder="Input with label" label="Name" />
<MbscInput inputStyle="box" labelStyle="stacked" startIcon="material-email" placeholder="With error styling" error="true" label="Email" />
<MbscInput inputStyle="box" labelStyle="stacked" startIcon="lock2" placeholder="Without label" />
<MbscTextarea inputStyle="box" labelStyle="stacked" startIcon="bubble" placeholder="Textarea with left icon" label="About me" />
<MbscDropdown inputStyle="box" labelStyle="stacked" startIcon="plus" endIcon="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>
</MbscDropdown>
<MbscInput inputStyle="box" labelStyle="stacked" type="file" placeholder="Select file..." label="File upload"></Input>
```

With "Outline":

```vue
<MbscInput inputStyle="outline" labelStyle="stacked" startIcon="user4" placeholder="Input with label" label="Name" />
<MbscInput inputStyle="outline" labelStyle="stacked" startIcon="material-email" placeholder="With error styling" error="true" label="Email" />
<MbscInput inputStyle="outline" labelStyle="stacked" startIcon="lock2" placeholder="Without label" />
<MbscTextarea inputStyle="outline" labelStyle="stacked" startIcon="bubble" placeholder="Textarea with left icon" label="About me" />
<MbscDropdown inputStyle="outline" labelStyle="stacked" startIcon="plus" endIcon="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>
</MbscDropdown>
<MbscInput inputStyle="outline" labelStyle="stacked" type="file" placeholder="Select file..." label="File upload"></Input>
```

With "Inline":

```vue
<MbscInput inputStyle="underline" labelStyle="inline" startIcon="user4" placeholder="Input with label" label="Name" />
<MbscInput inputStyle="underline" labelStyle="inline" startIcon="material-email" placeholder="With error styling" error="true" label="Email" />
<MbscInput inputStyle="underline" labelStyle="inline" startIcon="lock2" placeholder="Without label" />
<MbscTextarea inputStyle="underline" labelStyle="inline" startIcon="bubble" placeholder="Textarea with left icon" label="About me" />
<MbscDropdown inputStyle="underline" labelStyle="inline" startIcon="plus" endIcon="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>
</MbscDropdown>
<MbscInput inputStyle="underline" labelStyle="inline" type="file" placeholder="Select file..." label="File upload"></Input>
```

With "Floating":

```vue
<MbscInput inputStyle="underline" labelStyle="floating" startIcon="user4" placeholder="Input with label" label="Name" />
<MbscInput inputStyle="underline" labelStyle="floating" startIcon="material-email" placeholder="With error styling" error="true" label="Email" />
<MbscInput inputStyle="underline" labelStyle="floating" startIcon="lock2" placeholder="Without label" />
<MbscTextarea inputStyle="underline" labelStyle="floating" startIcon="bubble" placeholder="Textarea with left icon" label="About me" />
<MbscDropdown inputStyle="underline" labelStyle="floating" startIcon="plus" endIcon="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>
</MbscDropdown>
<MbscInput inputStyle="underline" labelStyle="floating" type="file" placeholder="Select file..." label="File upload"></Input>
```

## API used in this demo

- [`inputStyle`](https://mobiscroll.com/docs/vue/forms/input#opt-inputStyle) - option
- [`labelStyle`](https://mobiscroll.com/docs/vue/forms/input#opt-labelStyle) - option
- [`inputStyle`](https://mobiscroll.com/docs/vue/forms/textarea#opt-inputStyle) - option
- [`labelStyle`](https://mobiscroll.com/docs/vue/forms/textarea#opt-labelStyle) - option
- [`inputStyle`](https://mobiscroll.com/docs/vue/forms/dropdown#opt-inputStyle) - option
- [`labelStyle`](https://mobiscroll.com/docs/vue/forms/dropdown#opt-labelStyle) - option

## Code

### SFC JS

```vue
<script setup>
import {
  MbscDropdown,
  MbscInput,
  MbscPage,
  MbscTextarea,
  setOptions
} from '@mobiscroll/vue'

setOptions({
  theme: 'ios',
  themeVariant: 'light'
})
</script>

<template>
  <MbscPage>
    <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>
            <MbscInput
              inputStyle="underline"
              labelStyle="stacked"
              startIcon="user4"
              placeholder="Input with label"
              label="Name"
            />
            <MbscInput
              inputStyle="underline"
              labelStyle="stacked"
              startIcon="material-email"
              placeholder="With error styling"
              label="Email"
              :error="true"
            />
            <MbscInput
              inputStyle="underline"
              labelStyle="stacked"
              startIcon="lock2"
              errorMessage="An error occurred"
              type="password"
              placeholder="With icons and error message"
              label="Password"
              :passwordToggle="true"
              :error="true"
            />
            <MbscInput
              inputStyle="underline"
              labelStyle="stacked"
              startIcon="empty"
              placeholder="Without label"
            />
            <MbscTextarea
              inputStyle="underline"
              labelStyle="stacked"
              startIcon="bubble"
              placeholder="Textarea with left icon"
              label="About me"
            />
            <MbscDropdown
              inputStyle="underline"
              labelStyle="stacked"
              startIcon="plus"
              endIcon="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>
            </MbscDropdown>
            <MbscInput
              inputStyle="underline"
              labelStyle="stacked"
              type="file"
              placeholder="Select file..."
              label="File upload"
            />
          </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>
            <MbscInput
              inputStyle="underline"
              labelStyle="inline"
              startIcon="user4"
              placeholder="Input with label"
              label="Name"
            />
            <MbscInput
              inputStyle="underline"
              labelStyle="inline"
              startIcon="material-email"
              placeholder="With error styling"
              label="Email"
              :error="true"
            />
            <MbscInput
              inputStyle="underline"
              labelStyle="inline"
              startIcon="lock2"
              errorMessage="An error occurred"
              type="password"
              placeholder="With icons and error message"
              label="Password"
              :passwordToggle="true"
              :error="true"
            />
            <MbscInput
              inputStyle="underline"
              labelStyle="inline"
              startIcon="empty"
              placeholder="Without label"
            />
            <MbscTextarea
              inputStyle="underline"
              labelStyle="inline"
              startIcon="bubble"
              placeholder="Textarea with left icon"
              label="About me"
            ></MbscTextarea>
            <MbscDropdown
              inputStyle="underline"
              labelStyle="inline"
              startIcon="plus"
              endIcon="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>
            </MbscDropdown>
            <MbscInput
              inputStyle="underline"
              labelStyle="inline"
              type="file"
              placeholder="Select file..."
              label="File upload"
            />
          </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>
            <MbscInput
              inputStyle="underline"
              labelStyle="floating"
              startIcon="user4"
              placeholder="Input with label"
              label="Name"
            />
            <MbscInput
              inputStyle="underline"
              labelStyle="floating"
              startIcon="material-email"
              placeholder="With error styling"
              error="true"
              label="Email"
            />
            <MbscInput
              inputStyle="underline"
              labelStyle="floating"
              startIcon="lock2"
              errorMessage="An error occurred"
              type="password"
              placeholder="With icons and error message"
              label="Password"
              :passwordToggle="true"
              :error="true"
            />
            <MbscInput
              inputStyle="underline"
              labelStyle="floating"
              startIcon="empty"
              placeholder="Without label"
            />
            <MbscTextarea
              inputStyle="underline"
              labelStyle="floating"
              startIcon="bubble"
              placeholder="Textarea with left icon"
              label="About me"
            ></MbscTextarea>
            <MbscDropdown
              inputStyle="underline"
              labelStyle="floating"
              startIcon="plus"
              endIcon="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>
            </MbscDropdown>
            <MbscInput
              inputStyle="underline"
              labelStyle="floating"
              type="file"
              placeholder="Select file..."
              label="File upload"
            />
          </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>
            <MbscInput
              inputStyle="box"
              labelStyle="stacked"
              startIcon="user4"
              placeholder="Input with label"
              label="Name"
            />
            <MbscInput
              inputStyle="box"
              labelStyle="stacked"
              startIcon="material-email"
              placeholder="With error styling"
              label="Email"
              :error="true"
            />
            <MbscInput
              inputStyle="box"
              labelStyle="stacked"
              startIcon="lock2"
              errorMessage="An error occurred"
              type="password"
              placeholder="With icons and error message"
              label="Password"
              :passwordToggle="true"
              :error="true"
            />
            <MbscInput
              inputStyle="box"
              labelStyle="stacked"
              startIcon="empty"
              placeholder="Without label"
            />
            <MbscTextarea
              inputStyle="box"
              labelStyle="stacked"
              startIcon="bubble"
              placeholder="Textarea with left icon"
              label="About me"
            ></MbscTextarea>
            <MbscDropdown inputStyle="box" labelStyle="stacked" startIcon="plus" endIcon="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>
            </MbscDropdown>
            <MbscInput
              inputStyle="box"
              labelStyle="stacked"
              type="file"
              placeholder="Select file..."
              label="File upload"
            />
          </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>
            <MbscInput
              inputStyle="box"
              labelStyle="inline"
              startIcon="user4"
              placeholder="Input with label"
              label="Name"
            />
            <MbscInput
              inputStyle="box"
              labelStyle="inline"
              startIcon="material-email"
              placeholder="With error styling"
              label="Email"
              :error="true"
            />
            <MbscInput
              inputStyle="box"
              labelStyle="inline"
              startIcon="lock2"
              errorMessage="An error occurred"
              type="password"
              placeholder="With icons and error message"
              label="Password"
              :passwordToggle="true"
              :error="true"
            />
            <MbscInput
              inputStyle="box"
              labelStyle="inline"
              startIcon="empty"
              placeholder="Without label"
            />
            <MbscTextarea
              inputStyle="box"
              labelStyle="inline"
              startIcon="bubble"
              placeholder="Textarea with left icon"
              label="About me"
            ></MbscTextarea>
            <MbscDropdown inputStyle="box" labelStyle="inline" startIcon="plus" endIcon="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>
            </MbscDropdown>
            <MbscInput
              inputStyle="box"
              labelStyle="inline"
              type="file"
              placeholder="Select file..."
              label="File upload"
            />
          </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>
            <MbscInput
              inputStyle="box"
              labelStyle="floating"
              startIcon="user4"
              placeholder="Input with label"
              label="Name"
            />
            <MbscInput
              inputStyle="box"
              labelStyle="floating"
              startIcon="material-email"
              placeholder="With error styling"
              label="Email"
              :error="true"
            />
            <MbscInput
              inputStyle="box"
              labelStyle="floating"
              startIcon="lock2"
              errorMessage="An error occurred"
              type="password"
              placeholder="With icons and error message"
              label="Password"
              :passwordToggle="true"
              :error="true"
            />
            <MbscInput
              inputStyle="box"
              labelStyle="floating"
              startIcon="empty"
              placeholder="Without label"
            />
            <MbscTextarea
              inputStyle="box"
              labelStyle="floating"
              startIcon="bubble"
              placeholder="Textarea with left icon"
              label="About me"
            ></MbscTextarea>
            <MbscDropdown inputStyle="box" labelStyle="floating" startIcon="plus" endIcon="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>
            </MbscDropdown>
            <MbscInput
              inputStyle="box"
              labelStyle="floating"
              type="file"
              placeholder="Select file..."
              label="File upload"
            />
          </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>
            <MbscInput
              inputStyle="outline"
              labelStyle="stacked"
              startIcon="user4"
              placeholder="Input with label"
              label="Name"
            />
            <MbscInput
              inputStyle="outline"
              labelStyle="stacked"
              startIcon="material-email"
              placeholder="With error styling"
              label="Email"
              :error="true"
            />
            <MbscInput
              inputStyle="outline"
              labelStyle="stacked"
              startIcon="lock2"
              errorMessage="An error occurred"
              type="password"
              placeholder="With icons and error message"
              label="Password"
              :passwordToggle="true"
              :error="true"
            />
            <MbscInput
              inputStyle="outline"
              labelStyle="stacked"
              startIcon="empty"
              placeholder="Without label"
            />
            <MbscTextarea
              inputStyle="outline"
              labelStyle="stacked"
              startIcon="bubble"
              placeholder="Textarea with left icon"
              label="About me"
            ></MbscTextarea>
            <MbscDropdown
              inputStyle="outline"
              labelStyle="stacked"
              startIcon="plus"
              endIcon="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>
            </MbscDropdown>
            <MbscInput
              inputStyle="outline"
              labelStyle="stacked"
              type="file"
              placeholder="Select file..."
              label="File upload"
            />
          </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>
            <MbscInput
              inputStyle="outline"
              labelStyle="inline"
              startIcon="user4"
              placeholder="Input with label"
              label="Name"
            />
            <MbscInput
              inputStyle="outline"
              labelStyle="inline"
              startIcon="material-email"
              placeholder="With error styling"
              label="Email"
              :error="true"
            />
            <MbscInput
              inputStyle="outline"
              labelStyle="inline"
              startIcon="lock2"
              errorMessage="An error occurred"
              type="password"
              placeholder="With icons and error message"
              label="Password"
              :passwordToggle="true"
              :error="true"
            />
            <MbscInput
              inputStyle="outline"
              labelStyle="inline"
              startIcon="empty"
              placeholder="Without label"
            />
            <MbscTextarea
              inputStyle="outline"
              labelStyle="inline"
              startIcon="bubble"
              placeholder="Textarea with left icon"
              label="About me"
            ></MbscTextarea>
            <MbscDropdown inputStyle="outline" labelStyle="inline" startIcon="plus" endIcon="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>
            </MbscDropdown>
            <MbscInput
              inputStyle="outline"
              labelStyle="inline"
              type="file"
              placeholder="Select file..."
              label="File upload"
            />
          </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>
            <MbscInput
              inputStyle="outline"
              labelStyle="floating"
              startIcon="user4"
              placeholder="Input with label"
              label="Name"
            />
            <MbscInput
              inputStyle="outline"
              labelStyle="floating"
              startIcon="material-email"
              placeholder="With error styling"
              label="Email"
              :error="true"
            />
            <MbscInput
              inputStyle="outline"
              labelStyle="floating"
              startIcon="lock2"
              errorMessage="An error occurred"
              type="password"
              placeholder="With icons and error message"
              label="Password"
              :passwordToggle="true"
              :error="true"
            />
            <MbscInput
              inputStyle="outline"
              labelStyle="floating"
              startIcon="empty"
              placeholder="Without label"
            />
            <MbscTextarea
              inputStyle="outline"
              labelStyle="floating"
              startIcon="bubble"
              placeholder="Textarea with left icon"
              label="About me"
            ></MbscTextarea>
            <MbscDropdown
              inputStyle="outline"
              labelStyle="floating"
              startIcon="plus"
              endIcon="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>
            </MbscDropdown>
            <MbscInput
              inputStyle="outline"
              labelStyle="floating"
              type="file"
              placeholder="Select file..."
              label="File upload"
            />
          </div>
        </div>
      </div>
    </div>
  </MbscPage>
</template>
```

### SFC TS

```vue
<script setup lang="ts">
import {
  MbscDropdown,
  MbscInput,
  MbscPage,
  MbscTextarea,
  setOptions
} from '@mobiscroll/vue'

setOptions({
  theme: 'ios',
  themeVariant: 'light'
})
</script>

<template>
  <MbscPage>
    <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>
            <MbscInput
              inputStyle="underline"
              labelStyle="stacked"
              startIcon="user4"
              placeholder="Input with label"
              label="Name"
            />
            <MbscInput
              inputStyle="underline"
              labelStyle="stacked"
              startIcon="material-email"
              placeholder="With error styling"
              label="Email"
              :error="true"
            />
            <MbscInput
              inputStyle="underline"
              labelStyle="stacked"
              startIcon="lock2"
              errorMessage="An error occurred"
              type="password"
              placeholder="With icons and error message"
              label="Password"
              :passwordToggle="true"
              :error="true"
            />
            <MbscInput
              inputStyle="underline"
              labelStyle="stacked"
              startIcon="empty"
              placeholder="Without label"
            />
            <MbscTextarea
              inputStyle="underline"
              labelStyle="stacked"
              startIcon="bubble"
              placeholder="Textarea with left icon"
              label="About me"
            />
            <MbscDropdown
              inputStyle="underline"
              labelStyle="stacked"
              startIcon="plus"
              endIcon="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>
            </MbscDropdown>
            <MbscInput
              inputStyle="underline"
              labelStyle="stacked"
              type="file"
              placeholder="Select file..."
              label="File upload"
            />
          </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>
            <MbscInput
              inputStyle="underline"
              labelStyle="inline"
              startIcon="user4"
              placeholder="Input with label"
              label="Name"
            />
            <MbscInput
              inputStyle="underline"
              labelStyle="inline"
              startIcon="material-email"
              placeholder="With error styling"
              label="Email"
              :error="true"
            />
            <MbscInput
              inputStyle="underline"
              labelStyle="inline"
              startIcon="lock2"
              errorMessage="An error occurred"
              type="password"
              placeholder="With icons and error message"
              label="Password"
              :passwordToggle="true"
              :error="true"
            />
            <MbscInput
              inputStyle="underline"
              labelStyle="inline"
              startIcon="empty"
              placeholder="Without label"
            />
            <MbscTextarea
              inputStyle="underline"
              labelStyle="inline"
              startIcon="bubble"
              placeholder="Textarea with left icon"
              label="About me"
            ></MbscTextarea>
            <MbscDropdown
              inputStyle="underline"
              labelStyle="inline"
              startIcon="plus"
              endIcon="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>
            </MbscDropdown>
            <MbscInput
              inputStyle="underline"
              labelStyle="inline"
              type="file"
              placeholder="Select file..."
              label="File upload"
            />
          </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>
            <MbscInput
              inputStyle="underline"
              labelStyle="floating"
              startIcon="user4"
              placeholder="Input with label"
              label="Name"
            />
            <MbscInput
              inputStyle="underline"
              labelStyle="floating"
              startIcon="material-email"
              placeholder="With error styling"
              error="true"
              label="Email"
            />
            <MbscInput
              inputStyle="underline"
              labelStyle="floating"
              startIcon="lock2"
              errorMessage="An error occurred"
              type="password"
              placeholder="With icons and error message"
              label="Password"
              :passwordToggle="true"
              :error="true"
            />
            <MbscInput
              inputStyle="underline"
              labelStyle="floating"
              startIcon="empty"
              placeholder="Without label"
            />
            <MbscTextarea
              inputStyle="underline"
              labelStyle="floating"
              startIcon="bubble"
              placeholder="Textarea with left icon"
              label="About me"
            ></MbscTextarea>
            <MbscDropdown
              inputStyle="underline"
              labelStyle="floating"
              startIcon="plus"
              endIcon="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>
            </MbscDropdown>
            <MbscInput
              inputStyle="underline"
              labelStyle="floating"
              type="file"
              placeholder="Select file..."
              label="File upload"
            />
          </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>
            <MbscInput
              inputStyle="box"
              labelStyle="stacked"
              startIcon="user4"
              placeholder="Input with label"
              label="Name"
            />
            <MbscInput
              inputStyle="box"
              labelStyle="stacked"
              startIcon="material-email"
              placeholder="With error styling"
              label="Email"
              :error="true"
            />
            <MbscInput
              inputStyle="box"
              labelStyle="stacked"
              startIcon="lock2"
              errorMessage="An error occurred"
              type="password"
              placeholder="With icons and error message"
              label="Password"
              :passwordToggle="true"
              :error="true"
            />
            <MbscInput
              inputStyle="box"
              labelStyle="stacked"
              startIcon="empty"
              placeholder="Without label"
            />
            <MbscTextarea
              inputStyle="box"
              labelStyle="stacked"
              startIcon="bubble"
              placeholder="Textarea with left icon"
              label="About me"
            ></MbscTextarea>
            <MbscDropdown inputStyle="box" labelStyle="stacked" startIcon="plus" endIcon="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>
            </MbscDropdown>
            <MbscInput
              inputStyle="box"
              labelStyle="stacked"
              type="file"
              placeholder="Select file..."
              label="File upload"
            />
          </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>
            <MbscInput
              inputStyle="box"
              labelStyle="inline"
              startIcon="user4"
              placeholder="Input with label"
              label="Name"
            />
            <MbscInput
              inputStyle="box"
              labelStyle="inline"
              startIcon="material-email"
              placeholder="With error styling"
              label="Email"
              :error="true"
            />
            <MbscInput
              inputStyle="box"
              labelStyle="inline"
              startIcon="lock2"
              errorMessage="An error occurred"
              type="password"
              placeholder="With icons and error message"
              label="Password"
              :passwordToggle="true"
              :error="true"
            />
            <MbscInput
              inputStyle="box"
              labelStyle="inline"
              startIcon="empty"
              placeholder="Without label"
            />
            <MbscTextarea
              inputStyle="box"
              labelStyle="inline"
              startIcon="bubble"
              placeholder="Textarea with left icon"
              label="About me"
            ></MbscTextarea>
            <MbscDropdown inputStyle="box" labelStyle="inline" startIcon="plus" endIcon="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>
            </MbscDropdown>
            <MbscInput
              inputStyle="box"
              labelStyle="inline"
              type="file"
              placeholder="Select file..."
              label="File upload"
            />
          </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>
            <MbscInput
              inputStyle="box"
              labelStyle="floating"
              startIcon="user4"
              placeholder="Input with label"
              label="Name"
            />
            <MbscInput
              inputStyle="box"
              labelStyle="floating"
              startIcon="material-email"
              placeholder="With error styling"
              label="Email"
              :error="true"
            />
            <MbscInput
              inputStyle="box"
              labelStyle="floating"
              startIcon="lock2"
              errorMessage="An error occurred"
              type="password"
              placeholder="With icons and error message"
              label="Password"
              :passwordToggle="true"
              :error="true"
            />
            <MbscInput
              inputStyle="box"
              labelStyle="floating"
              startIcon="empty"
              placeholder="Without label"
            />
            <MbscTextarea
              inputStyle="box"
              labelStyle="floating"
              startIcon="bubble"
              placeholder="Textarea with left icon"
              label="About me"
            ></MbscTextarea>
            <MbscDropdown inputStyle="box" labelStyle="floating" startIcon="plus" endIcon="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>
            </MbscDropdown>
            <MbscInput
              inputStyle="box"
              labelStyle="floating"
              type="file"
              placeholder="Select file..."
              label="File upload"
            />
          </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>
            <MbscInput
              inputStyle="outline"
              labelStyle="stacked"
              startIcon="user4"
              placeholder="Input with label"
              label="Name"
            />
            <MbscInput
              inputStyle="outline"
              labelStyle="stacked"
              startIcon="material-email"
              placeholder="With error styling"
              label="Email"
              :error="true"
            />
            <MbscInput
              inputStyle="outline"
              labelStyle="stacked"
              startIcon="lock2"
              errorMessage="An error occurred"
              type="password"
              placeholder="With icons and error message"
              label="Password"
              :passwordToggle="true"
              :error="true"
            />
            <MbscInput
              inputStyle="outline"
              labelStyle="stacked"
              startIcon="empty"
              placeholder="Without label"
            />
            <MbscTextarea
              inputStyle="outline"
              labelStyle="stacked"
              startIcon="bubble"
              placeholder="Textarea with left icon"
              label="About me"
            ></MbscTextarea>
            <MbscDropdown
              inputStyle="outline"
              labelStyle="stacked"
              startIcon="plus"
              endIcon="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>
            </MbscDropdown>
            <MbscInput
              inputStyle="outline"
              labelStyle="stacked"
              type="file"
              placeholder="Select file..."
              label="File upload"
            />
          </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>
            <MbscInput
              inputStyle="outline"
              labelStyle="inline"
              startIcon="user4"
              placeholder="Input with label"
              label="Name"
            />
            <MbscInput
              inputStyle="outline"
              labelStyle="inline"
              startIcon="material-email"
              placeholder="With error styling"
              label="Email"
              :error="true"
            />
            <MbscInput
              inputStyle="outline"
              labelStyle="inline"
              startIcon="lock2"
              errorMessage="An error occurred"
              type="password"
              placeholder="With icons and error message"
              label="Password"
              :passwordToggle="true"
              :error="true"
            />
            <MbscInput
              inputStyle="outline"
              labelStyle="inline"
              startIcon="empty"
              placeholder="Without label"
            />
            <MbscTextarea
              inputStyle="outline"
              labelStyle="inline"
              startIcon="bubble"
              placeholder="Textarea with left icon"
              label="About me"
            ></MbscTextarea>
            <MbscDropdown inputStyle="outline" labelStyle="inline" startIcon="plus" endIcon="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>
            </MbscDropdown>
            <MbscInput
              inputStyle="outline"
              labelStyle="inline"
              type="file"
              placeholder="Select file..."
              label="File upload"
            />
          </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>
            <MbscInput
              inputStyle="outline"
              labelStyle="floating"
              startIcon="user4"
              placeholder="Input with label"
              label="Name"
            />
            <MbscInput
              inputStyle="outline"
              labelStyle="floating"
              startIcon="material-email"
              placeholder="With error styling"
              label="Email"
              :error="true"
            />
            <MbscInput
              inputStyle="outline"
              labelStyle="floating"
              startIcon="lock2"
              errorMessage="An error occurred"
              type="password"
              placeholder="With icons and error message"
              label="Password"
              :passwordToggle="true"
              :error="true"
            />
            <MbscInput
              inputStyle="outline"
              labelStyle="floating"
              startIcon="empty"
              placeholder="Without label"
            />
            <MbscTextarea
              inputStyle="outline"
              labelStyle="floating"
              startIcon="bubble"
              placeholder="Textarea with left icon"
              label="About me"
            ></MbscTextarea>
            <MbscDropdown
              inputStyle="outline"
              labelStyle="floating"
              startIcon="plus"
              endIcon="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>
            </MbscDropdown>
            <MbscInput
              inputStyle="outline"
              labelStyle="floating"
              type="file"
              placeholder="Select file..."
              label="File upload"
            />
          </div>
        </div>
      </div>
    </div>
  </MbscPage>
</template>
```

## 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-vue.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 vue
   ```

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 vue --trial`.

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

## Related demos

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