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

# Responsive form - React Forms demo

Responsive React form using grid layout. Define how the form elements behaves across multiple screen sizes. For React and Next.JS.

- [Live demo](https://demo.mobiscroll.com/react/forms/responsive)
- [View React JS code on GitHub](https://github.com/acidb/mobiscroll-demos-react/tree/main/src/demos/form-components/forms/responsive)
- [View React TS code on GitHub](https://github.com/acidb/mobiscroll-demos-react-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), [Vue](https://demo.mobiscroll.com/vue/forms/responsive.md)

## Description

Build in responsiveness into your react 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

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

## API used in this demo

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

## Code

### JSX

```jsx
import { Button, Input, Page, setOptions } from '@mobiscroll/react';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

function App() {
  return (
    <Page>
      <div className="mbsc-grid mbsc-form-grid">
        <div className="mbsc-row">
          <div className="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
            <Input label="Email" inputStyle="box" labelStyle="floating" placeholder="Enter your email address" />
          </div>
          <div className="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
            <Input
              label="Password"
              inputStyle="box"
              labelStyle="floating"
              type="password"
              passwordToggle={true}
              placeholder="Set a password"
            />
          </div>
          <div className="mbsc-col-12 mbsc-col-lg-6">
            <Input label="Address" inputStyle="box" labelStyle="floating" placeholder="What is your address?" />
          </div>
        </div>
        <div className="mbsc-row">
          <div className="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
            <Input label="Town" inputStyle="box" labelStyle="floating" placeholder="Enter your town" />
          </div>
          <div className="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
            <Input label="State" inputStyle="box" labelStyle="floating" placeholder="Select your state" />
          </div>
          <div className="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
            <Input label="Zip" inputStyle="box" labelStyle="floating" placeholder="What is your zip code" />
          </div>
          <div className="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
            <Input label="Country" inputStyle="box" labelStyle="floating" placeholder="Select your country" />
          </div>
        </div>
        <div className="mbsc-row">
          <div className="mbsc-col-12 mbsc-col-md-16 mbsc-col-lg-3">
            <div className="mbsc-button-group-block">
              <Button color="success">Create account</Button>
            </div>
          </div>
        </div>
      </div>
    </Page>
  );
}

export default App;
```

### TSX

```tsx
import { Button, Input, Page, setOptions } from '@mobiscroll/react';
import { FC } from 'react';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

const App: FC = () => (
  <Page>
    <div className="mbsc-grid mbsc-form-grid">
      <div className="mbsc-row">
        <div className="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
          <Input label="Email" inputStyle="box" labelStyle="floating" placeholder="Enter your email address" />
        </div>
        <div className="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
          <Input
            label="Password"
            inputStyle="box"
            labelStyle="floating"
            type="password"
            passwordToggle={true}
            placeholder="Set a password"
          />
        </div>
        <div className="mbsc-col-12 mbsc-col-lg-6">
          <Input label="Address" inputStyle="box" labelStyle="floating" placeholder="What is your address?" />
        </div>
      </div>
      <div className="mbsc-row">
        <div className="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
          <Input label="Town" inputStyle="box" labelStyle="floating" placeholder="Enter your town" />
        </div>
        <div className="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
          <Input label="State" inputStyle="box" labelStyle="floating" placeholder="Select your state" />
        </div>
        <div className="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
          <Input label="Zip" inputStyle="box" labelStyle="floating" placeholder="What is your zip code" />
        </div>
        <div className="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
          <Input label="Country" inputStyle="box" labelStyle="floating" placeholder="Select your country" />
        </div>
      </div>
      <div className="mbsc-row">
        <div className="mbsc-col-12 mbsc-col-md-16 mbsc-col-lg-3">
          <div className="mbsc-button-group-block">
            <Button color="success">Create account</Button>
          </div>
        </div>
      </div>
    </div>
  </Page>
);
export default App;
```

### CSS

```css
.mbsc-ios .mbsc-form-grid .mbsc-textfield-wrapper {
  margin: 0.75em 1em;
}
```

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

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

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

## Related demos

- Previous: [Inline desktop form](https://demo.mobiscroll.com/react/forms/desktop.md) - React 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/react/forms/popup.md) - React embedded forms in modal or pop-over. Perfect layout for contextual add/edit forms.