---
title: "Vue Forms Inline desktop form Example | Mobiscroll"
component: "Forms"
framework: "Vue"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/vue/forms/desktop"
---

# Inline desktop form - Vue Forms demo

Vue single and multi-column desktop form. Render forms right on the page with a consistent look & feel. For Vue and Nuxt.

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

## Description

Use the grid layout to create single and multiple column forms suited for medium and large screens. Don't go overboard with too many columns but make use of the available horizontal space on bigger screens.

Use the [global options](https://mobiscroll.com/docs/vue/core-concepts/global-options) for setting the theme, localization options and everything that should be consistent across your app.

**Looking for mobile forms?** [Learn how to create full width, single column forms →](https://demo.mobiscroll.com/vue/forms/mobile)

## What this demo shows

- Shows a single-column and multi-column grid layouts for forms on medium and large screens.
- **Responsive grid** Fields spanning different column widths to use the available horizontal space without overcrowding the form.
- **Multi-column form** Text, password, and select inputs arranged within the same grid layout.
- **Password field** A visibility toggle for showing or hiding the entered password.
- **Select field** A dropdown for choosing from a set of options.
- **Single-column form** A compact layout with consistently aligned labels and inputs.
- **Field organization** Form grids used to arrange related fields in a clear, structured layout.

## Best for

- **Account and profile forms** Arrange related user details side by side on wider screens.
- **Checkout and billing forms** Group contact, address, and payment-related fields in a compact desktop layout.
- **Admin and data-entry forms** Make forms with many fields easier to scan and complete without excessive vertical scrolling.
- **Settings forms** Organize related configuration fields into clear rows and columns.
- **Registration and onboarding forms** Present related information in logical groups while adapting the layout to the available width.

## 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/dropdown#opt-inputStyle) - option
- [`labelStyle`](https://mobiscroll.com/docs/vue/forms/dropdown#opt-labelStyle) - option

## Code

### SFC JS

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

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

<template>
  <MbscPage>
    <div class="mbsc-grid mbsc-grid-fixed">
      <div class="mbsc-form-group">
        <div class="mbsc-row mbsc-justify-content-center">
          <div class="mbsc-col-md-10 mbsc-col-xl-8 mbsc-form-grid">
            <div class="mbsc-form-group-title">Multiple columns grid</div>
            <div class="mbsc-row">
              <div class="mbsc-col-md-6 mbsc-col-12">
                <MbscInput
                  label="Email"
                  inputStyle="box"
                  labelStyle="floating"
                  placeholder="Email"
                ></MbscInput>
              </div>
              <div class="mbsc-col-md-6 mbsc-col-12">
                <MbscInput
                  label="Password"
                  inputStyle="box"
                  labelStyle="floating"
                  placeholder="Password"
                  type="password"
                  :passwordToggle="true"
                ></MbscInput>
              </div>
            </div>
            <div class="mbsc-row">
              <div class="mbsc-col-12">
                <MbscInput
                  label="Address"
                  inputStyle="box"
                  labelStyle="floating"
                  placeholder="Address"
                ></MbscInput>
              </div>
            </div>
            <div class="mbsc-row">
              <div class="mbsc-col-md-6 mbsc-col-12">
                <MbscInput
                  label="City"
                  inputStyle="box"
                  labelStyle="floating"
                  placeholder="City"
                ></MbscInput>
              </div>
              <div class="mbsc-col-md-4 mbsc-col-6">
                <MbscDropdown label="State" inputStyle="box" labelStyle="floating">
                  <option value="Alabama">Alabama</option>
                  <option value="Alaska">Alaska</option>
                  <option value="Arizona">Arizona</option>
                  <option value="Arkansas">Arkansas</option>
                  <option value="California">California</option>
                  <option value="Colorado">Colorado</option>
                  <option value="Connecticut">Connecticut</option>
                  <option value="Delaware">Delaware</option>
                  <option value="Florida">Florida</option>
                  <option value="Georgia">Georgia</option>
                  <option value="Hawaii">Hawaii</option>
                  <option value="Idaho">Idaho</option>
                  <option value="Illinois Indiana">Illinois Indiana</option>
                  <option value="Iowa">Iowa</option>
                  <option value="Kansas">Kansas</option>
                  <option value="Kentucky">Kentucky</option>
                  <option value="Louisiana">Louisiana</option>
                  <option value="Maine">Maine</option>
                  <option value="Maryland">Maryland</option>
                  <option value="Massachusetts">Massachusetts</option>
                  <option value="Michigan">Michigan</option>
                  <option value="Minnesota">Minnesota</option>
                  <option value="Mississippi">Mississippi</option>
                  <option value="Missouri">Missouri</option>
                  <option value="Montana Nebraska">Montana Nebraska</option>
                  <option value="Nevada">Nevada</option>
                  <option value="New Hampshire">New Hampshire</option>
                  <option value="New Jersey">New Jersey</option>
                  <option value="New Mexico">New Mexico</option>
                  <option value="New York">New York</option>
                  <option value="North Carolina">North Carolina</option>
                  <option value="North Dakota">North Dakota</option>
                  <option value="Ohio">Ohio</option>
                  <option value="Oklahoma">Oklahoma</option>
                  <option value="Oregon">Oregon</option>
                  <option value="Pennsylvania Rhode Island">Pennsylvania Rhode Island</option>
                  <option value="South Carolina">South Carolina</option>
                  <option value="South Dakota">South Dakota</option>
                  <option value="Tennessee">Tennessee</option>
                  <option value="Texas">Texas</option>
                  <option value="Utah">Utah</option>
                  <option value="Vermont">Vermont</option>
                  <option value="Virginia">Virginia</option>
                  <option value="Washington">Washington</option>
                  <option value="West Virginia">West Virginia</option>
                  <option value="Wisconsin">Wisconsin</option>
                  <option value="Wyomin">Wyomin</option>
                </MbscDropdown>
              </div>
              <div class="mbsc-col-md-2 mbsc-col-6">
                <MbscInput
                  label="Zip"
                  inputStyle="box"
                  labelStyle="floating"
                  placeholder="Zip"
                ></MbscInput>
              </div>
            </div>
            <MbscButton>Sign in</MbscButton>
          </div>
        </div>
      </div>
    </div>
    <div class="mbsc-grid">
      <div class="mbsc-row mbsc-justify-content-center">
        <div class="mbsc-col-sm-9 mbsc-col-md-7 mbsc-col-xl-5">
          <div class="mbsc-form-group">
            <div class="mbsc-form-group-title">Single column grid</div>
            <MbscInput label="First Name" placeholder="First Name"></MbscInput>
            <MbscInput label="Last Name" placeholder="Last Name"></MbscInput>
            <MbscInput label="User Name" placeholder="User Name"></MbscInput>
            <MbscInput label="Company" placeholder="Company Name"></MbscInput>
            <MbscInput label="Email" placeholder="Email Address"></MbscInput>
          </div>
        </div>
      </div>
    </div>
  </MbscPage>
</template>

<style>
.mbsc-ios .mbsc-form-grid .mbsc-textfield-wrapper {
  margin: 0.75em 1em;
}
</style>
```

### SFC TS

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

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

<template>
  <MbscPage>
    <div class="mbsc-grid mbsc-grid-fixed">
      <div class="mbsc-form-group">
        <div class="mbsc-row mbsc-justify-content-center">
          <div class="mbsc-col-md-10 mbsc-col-xl-8 mbsc-form-grid">
            <div class="mbsc-form-group-title">Multiple columns grid</div>
            <div class="mbsc-row">
              <div class="mbsc-col-md-6 mbsc-col-12">
                <MbscInput
                  label="Email"
                  inputStyle="box"
                  labelStyle="floating"
                  placeholder="Email"
                ></MbscInput>
              </div>
              <div class="mbsc-col-md-6 mbsc-col-12">
                <MbscInput
                  label="Password"
                  inputStyle="box"
                  labelStyle="floating"
                  placeholder="Password"
                  type="password"
                  :passwordToggle="true"
                ></MbscInput>
              </div>
            </div>
            <div class="mbsc-row">
              <div class="mbsc-col-12">
                <MbscInput
                  label="Address"
                  inputStyle="box"
                  labelStyle="floating"
                  placeholder="Address"
                ></MbscInput>
              </div>
            </div>
            <div class="mbsc-row">
              <div class="mbsc-col-md-6 mbsc-col-12">
                <MbscInput
                  label="City"
                  inputStyle="box"
                  labelStyle="floating"
                  placeholder="City"
                ></MbscInput>
              </div>
              <div class="mbsc-col-md-4 mbsc-col-6">
                <MbscDropdown label="State" inputStyle="box" labelStyle="floating">
                  <option value="Alabama">Alabama</option>
                  <option value="Alaska">Alaska</option>
                  <option value="Arizona">Arizona</option>
                  <option value="Arkansas">Arkansas</option>
                  <option value="California">California</option>
                  <option value="Colorado">Colorado</option>
                  <option value="Connecticut">Connecticut</option>
                  <option value="Delaware">Delaware</option>
                  <option value="Florida">Florida</option>
                  <option value="Georgia">Georgia</option>
                  <option value="Hawaii">Hawaii</option>
                  <option value="Idaho">Idaho</option>
                  <option value="Illinois Indiana">Illinois Indiana</option>
                  <option value="Iowa">Iowa</option>
                  <option value="Kansas">Kansas</option>
                  <option value="Kentucky">Kentucky</option>
                  <option value="Louisiana">Louisiana</option>
                  <option value="Maine">Maine</option>
                  <option value="Maryland">Maryland</option>
                  <option value="Massachusetts">Massachusetts</option>
                  <option value="Michigan">Michigan</option>
                  <option value="Minnesota">Minnesota</option>
                  <option value="Mississippi">Mississippi</option>
                  <option value="Missouri">Missouri</option>
                  <option value="Montana Nebraska">Montana Nebraska</option>
                  <option value="Nevada">Nevada</option>
                  <option value="New Hampshire">New Hampshire</option>
                  <option value="New Jersey">New Jersey</option>
                  <option value="New Mexico">New Mexico</option>
                  <option value="New York">New York</option>
                  <option value="North Carolina">North Carolina</option>
                  <option value="North Dakota">North Dakota</option>
                  <option value="Ohio">Ohio</option>
                  <option value="Oklahoma">Oklahoma</option>
                  <option value="Oregon">Oregon</option>
                  <option value="Pennsylvania Rhode Island">Pennsylvania Rhode Island</option>
                  <option value="South Carolina">South Carolina</option>
                  <option value="South Dakota">South Dakota</option>
                  <option value="Tennessee">Tennessee</option>
                  <option value="Texas">Texas</option>
                  <option value="Utah">Utah</option>
                  <option value="Vermont">Vermont</option>
                  <option value="Virginia">Virginia</option>
                  <option value="Washington">Washington</option>
                  <option value="West Virginia">West Virginia</option>
                  <option value="Wisconsin">Wisconsin</option>
                  <option value="Wyomin">Wyomin</option>
                </MbscDropdown>
              </div>
              <div class="mbsc-col-md-2 mbsc-col-6">
                <MbscInput
                  label="Zip"
                  inputStyle="box"
                  labelStyle="floating"
                  placeholder="Zip"
                ></MbscInput>
              </div>
            </div>
            <MbscButton>Sign in</MbscButton>
          </div>
        </div>
      </div>
    </div>
    <div class="mbsc-grid">
      <div class="mbsc-row mbsc-justify-content-center">
        <div class="mbsc-col-sm-9 mbsc-col-md-7 mbsc-col-xl-5">
          <div class="mbsc-form-group">
            <div class="mbsc-form-group-title">Single column grid</div>
            <MbscInput label="First Name" placeholder="First Name"></MbscInput>
            <MbscInput label="Last Name" placeholder="Last Name"></MbscInput>
            <MbscInput label="User Name" placeholder="User Name"></MbscInput>
            <MbscInput label="Company" placeholder="Company Name"></MbscInput>
            <MbscInput label="Email" placeholder="Email Address"></MbscInput>
          </div>
        </div>
      </div>
    </div>
  </MbscPage>
</template>

<style>
.mbsc-ios .mbsc-form-grid .mbsc-textfield-wrapper {
  margin: 0.75em 1em;
}
</style>
```

## Implementation notes

- The multi-column layout uses Mobiscroll's grid CSS classes on plain wrapper `<div>`s, not a component option: `.mbsc-grid.mbsc-grid-fixed` containing `.mbsc-row` elements with `.mbsc-col-{breakpoint}-{size}` columns (size out of 12).
- Column spans stack per breakpoint, e.g. `mbsc-col-md-6 mbsc-col-12` is full width below `md` and half width from `md` up; `mbsc-col-md-4 mbsc-col-6` is half width by default and a third at `md`.
- `mbsc-row.mbsc-justify-content-center` combined with a bounded column width on the row's own wrapper (e.g. `mbsc-col-md-10 mbsc-col-xl-8`) centers and caps the grid's overall width on large screens instead of letting it stretch edge to edge.
- The single-column variant is the same grid classes with no multi-column split - each field's wrapper stays at its default full-row width, producing one field per row.
- `inputStyle="box"` and `labelStyle="floating"` (JS/jQuery: `data-input-style="box"` / `data-label-style="floating"`) are applied per field for the boxed-input-with-floating-label style used in the multi-column example; the single-column example omits them for the plain underline style.
- `passwordToggle` (JS/jQuery: `data-password-toggle="true"`) adds a show/hide control to a password-type `Input`/`mbsc-input`.
- A `Dropdown`/`mbsc-dropdown`/`MbscSelect`-family select field is populated with plain `<option>` children for the state/choice list.

## 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: [Mobile form](https://demo.mobiscroll.com/vue/forms/mobile.md) - Vue Single column mobile form example with field groups. Deliver different fields types with a consistent look & feel.
- Next: [Responsive form](https://demo.mobiscroll.com/vue/forms/responsive.md) - Responsive Vue form using grid layout. Define how the form elements behaves across multiple screen sizes.