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

# Responsive form - Vue Forms demo

Responsive Vue form using grid layout. Define how the form elements behaves across multiple screen sizes. For Vue and Nuxt.

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

## Description

Build in responsiveness into your vue form using the grid layout. Define how the form elements behave across multiple screen sizes.

- The column widths will adapt to the screen size based on the predefined **.mbsc-col-{breakpoint}-{size}** classes.
- The examples are using the **.mbsc-col-md-6**, **.mbsc-col-lg-6** and **.mbsc-col-lg-3** classes.

## What this demo shows

- Shows a sesponsive form grid which adapts the form layout to different viewport widths.
- **Breakpoint behavior** Changes fields from a single-column layout to multiple columns as more horizontal space becomes available.
- **Column spans** Uses different column widths to control how much horizontal space each field occupies at each breakpoint.
- **Screen sizes** Uses the same form configuration to create layouts suited to mobile, tablet, and desktop screens.
- **Form controls** Includes text and password inputs with a Create account button.
- **Grid classes** Uses Mobiscroll grid classes to build one responsive form instead of maintaining separate layouts for each screen size.

## Best for

- **Account registration** Arrange sign-up fields clearly across phones, tablets, and desktop screens.
- **Checkout forms** Reflow customer, shipping, and payment fields as the available width changes.
- **Profile and settings forms** Present related fields in columns on wider screens while keeping them readable on smaller devices.
- **Contact and application forms** Support forms that need to work across a range of devices without separate layouts.

## Tutorial

```vue
<div class="mbsc-row">
    <div class="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
        <MbscInput label="Email" inputStyle="box" labelStyle="floating" placeholder="Enter your email address" />
    </div>
    <div class="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
        <MbscInput label="Password" inputStyle="box" labelStyle="floating" placeholder="Set a password" :passwordToggle="true" />
    </div>
    <div class="mbsc-col-12 mbsc-col-lg-6">
        <MbscInput label="Address" inputStyle="box" labelStyle="floating" placeholder="What is your address?" />
    </div>
</div>
<div class="mbsc-row">
    <div class="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
        <MbscInput label="Town" inputStyle="box" labelStyle="floating" placeholder="Enter your town" />
    </div>
    <div class="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
        <MbscInput label="State" inputStyle="box" labelStyle="floating" placeholder="Select your state" />
    </div>
    <div class="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
        <MbscInput label="Zip" inputStyle="box" labelStyle="floating" placeholder="What is your zip code" />
    </div>
    <div class="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
        <MbscInput label="Country" inputStyle="box" labelStyle="floating" placeholder="Select your country" />
    </div>
</div>
<div class="mbsc-row">
    <div class="mbsc-col-12 mbsc-col-md-12 mbsc-col-lg-3">
        <div class="mbsc-button-group-block">
            <MbscButton color="success">Create account</MbscButton>
        </div>
    </div>
</div>
```

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

## Code

### SFC JS

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

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

<template>
  <MbscPage>
    <div class="mbsc-grid mbsc-form-grid">
      <div class="mbsc-row">
        <div class="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
          <MbscInput
            label="Email"
            inputStyle="box"
            labelStyle="floating"
            placeholder="Enter your email address"
          />
        </div>
        <div class="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
          <MbscInput
            label="Password"
            inputStyle="box"
            labelStyle="floating"
            placeholder="Set a password"
            :passwordToggle="true"
          />
        </div>
        <div class="mbsc-col-12 mbsc-col-lg-6">
          <MbscInput
            label="Address"
            inputStyle="box"
            labelStyle="floating"
            placeholder="What is your address?"
          />
        </div>
      </div>
      <div class="mbsc-row">
        <div class="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
          <MbscInput
            label="Town"
            inputStyle="box"
            labelStyle="floating"
            placeholder="Enter your town"
          />
        </div>
        <div class="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
          <MbscInput
            label="State"
            inputStyle="box"
            labelStyle="floating"
            placeholder="Select your state"
          />
        </div>
        <div class="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
          <MbscInput
            label="Zip"
            inputStyle="box"
            labelStyle="floating"
            placeholder="What is your zip code"
          />
        </div>
        <div class="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
          <MbscInput
            label="Country"
            inputStyle="box"
            labelStyle="floating"
            placeholder="Select your country"
          />
        </div>
      </div>
      <div class="mbsc-row">
        <div class="mbsc-col-12 mbsc-col-md-12 mbsc-col-lg-3">
          <div class="mbsc-button-group-block">
            <MbscButton color="success"> Create account </MbscButton>
          </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, MbscInput, MbscPage, setOptions } from '@mobiscroll/vue'

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

<template>
  <MbscPage>
    <div class="mbsc-grid mbsc-form-grid">
      <div class="mbsc-row">
        <div class="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
          <MbscInput
            label="Email"
            inputStyle="box"
            labelStyle="floating"
            placeholder="Enter your email address"
          />
        </div>
        <div class="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
          <MbscInput
            label="Password"
            inputStyle="box"
            labelStyle="floating"
            placeholder="Set a password"
            :passwordToggle="true"
          />
        </div>
        <div class="mbsc-col-12 mbsc-col-lg-6">
          <MbscInput
            label="Address"
            inputStyle="box"
            labelStyle="floating"
            placeholder="What is your address?"
          />
        </div>
      </div>
      <div class="mbsc-row">
        <div class="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
          <MbscInput
            label="Town"
            inputStyle="box"
            labelStyle="floating"
            placeholder="Enter your town"
          />
        </div>
        <div class="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
          <MbscInput
            label="State"
            inputStyle="box"
            labelStyle="floating"
            placeholder="Select your state"
          />
        </div>
        <div class="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
          <MbscInput
            label="Zip"
            inputStyle="box"
            labelStyle="floating"
            placeholder="What is your zip code"
          />
        </div>
        <div class="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
          <MbscInput
            label="Country"
            inputStyle="box"
            labelStyle="floating"
            placeholder="Select your country"
          />
        </div>
      </div>
      <div class="mbsc-row">
        <div class="mbsc-col-12 mbsc-col-md-12 mbsc-col-lg-3">
          <div class="mbsc-button-group-block">
            <MbscButton color="success"> Create account </MbscButton>
          </div>
        </div>
      </div>
    </div>
  </MbscPage>
</template>

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

## Implementation notes

- The layout uses Mobiscroll's grid CSS classes, not a component option: a `.mbsc-grid`/`.mbsc-form-grid` wrapper contains one or more `.mbsc-row` elements, each holding column `<div>`s.
- Column width per breakpoint is set with `.mbsc-col-{breakpoint}-{size}` classes (size out of 12), stacked per element: e.g. `mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3` renders full width below the `md` breakpoint, half width at `md`, and quarter width at `lg` and above.
- A field with no breakpoint-specific class keeps its base `mbsc-col-12` width (full row) at every viewport size until a narrower class overrides it, e.g. `mbsc-col-12 mbsc-col-lg-6` stays full width until `lg`.
- The same markup/component tree is reused across breakpoints - only the grid classes change; there is no separate mobile vs. desktop form definition.
- `inputStyle="box"` and `labelStyle="floating"` are applied to each `Input`/`mbsc-input` field for the boxed-input-with-floating-label appearance used throughout the grid (JS/jQuery: `data-input-style="box"` / `data-label-style="floating"` attributes).
- `passwordToggle` (JS/jQuery: `data-password-toggle="true"`) adds a show/hide toggle to a `type="password"` input.
- Framework markup differences: JS/jQuery wraps plain `<input mbsc-input>` elements in `<label>`s inside `<div class="mbsc-col-...">` wrappers; React uses `<Input .../>` inside `<div className="mbsc-col-...">`; Angular uses `<mbsc-input ...></mbsc-input>` inside `<div class="mbsc-col-...">`, with boolean options like `[passwordToggle]="true"` bound; Vue uses `<MbscInput .../>` inside `<div class="mbsc-col-...">`, with boolean options like `:passwordToggle="true"`.
- A `Button`/`<button mbsc-button>` with `color="success"` (JS/jQuery: `data-color="success"`) submits the form; it sits in its own row/column span like any other grid item.

## 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: [Inline desktop form](https://demo.mobiscroll.com/vue/forms/desktop.md) - Vue single and multi-column desktop form. Render forms right on the page with a consistent look & feel.
- Next: [Inside a modal](https://demo.mobiscroll.com/vue/forms/popup.md) - Vue embedded forms in modal or pop-over. Perfect layout for contextual add/edit forms.