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

# Mobile form - React Forms demo

React Single column mobile form example with field groups. Deliver different fields types with a consistent look & feel. For React and Next.JS.

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

## Description

Easily create single column layouts and render mobile forms using the various form elements like [buttons](https://demo.mobiscroll.com/react/forms/buttons), [inputs](https://demo.mobiscroll.com/react/forms/inputs-text-areas-date-fields), [radio buttons](https://demo.mobiscroll.com/react/forms/radio-button) and more.

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

**Building for larger screens?** [See how to make forms for tablets & desktops →](https://demo.mobiscroll.com/react/forms/desktop)

## What this demo shows

- Shows a clean, single-column form designed for touch-friendly data entry on mobile devices.
- **Form sections** Related fields are organized into separate User Data and Phone Number sections.
- **Text inputs** Fields collect a name, username, company, email address, and phone numbers.
- **Placeholder text** Descriptive placeholders indicate the expected value for each field.
- **Checkbox** A checkbox is paired with additional explanatory text.
- **Combined controls** Text inputs and a checkbox are presented together in one consistent mobile form.

## Best for

- **Account registration** Collecting identity, username, company, and contact details during mobile sign-up.
- **User profiles** Creating or editing personal and business contact information from a phone.
- **Customer onboarding** Gathering user and phone details in a clear, step-by-step mobile form.
- **Contact management** Adding or updating records that include email addresses and multiple phone numbers.
- **Forms with acknowledgments** Combining contact fields with a checkbox and supporting explanatory text.

## Code

### JSX

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

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

function App() {
  return (
    <Page>
      <div className="mbsc-form-group">
        <div className="mbsc-form-group-title">User Data</div>
        <Input label="First name" placeholder="First Name" />
        <Input label="Last name" placeholder="Last Name" />
        <Input label="User name" placeholder="User Name" />
        <Input label="Company" placeholder="Company Name" />
        <Input label="Email" placeholder="Email Address" />
      </div>
      <div className="mbsc-form-group">
        <div className="mbsc-form-group-title">Phone Number</div>
        <Input label="Home" placeholder="Home" />
        <Input label="Business" placeholder="Business" />
        <Input label="Fax" placeholder="Fax" />
      </div>
    </Page>
  );
}

export default App;
```

### TSX

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

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

const App: FC = () => (
  <Page>
    <div className="mbsc-form-group">
      <div className="mbsc-form-group-title">User Data</div>
      <Input label="First name" placeholder="First Name" />
      <Input label="Last name" placeholder="Last Name" />
      <Input label="User name" placeholder="User Name" />
      <Input label="Company" placeholder="Company Name" />
      <Input label="Email" placeholder="Email Address" />
    </div>
    <div className="mbsc-form-group">
      <div className="mbsc-form-group-title">Phone Number</div>
      <Input label="Home" placeholder="Home" />
      <Input label="Business" placeholder="Business" />
      <Input label="Fax" placeholder="Fax" />
    </div>
  </Page>
);
export default App;
```

## Implementation notes

- The single-column layout needs no grid classes - `Input`/`mbsc-input` fields are stacked directly inside an `mbsc-form-group` container and default to full width, which is what makes the layout mobile-friendly without any breakpoint-specific markup.
- Related fields are grouped into separate `mbsc-form-group` blocks, each with an `mbsc-form-group-title` (a plain `<div>`) labeling the section - e.g. "User Data" and "Phone Number" as two adjacent groups.
- `label` sets each field's title text (JS/jQuery: `data-label` attribute); `placeholder` sets the empty-state hint text shown inside the input.
- A checkbox is added with a `Checkbox`/`mbsc-checkbox`-family component; `label`/`description` (JS/jQuery: `data-label`/`data-description`) attach the acknowledgment title and explanatory text next to it, the same pattern used for other form fields.
- This is the same `Input`/grid-free layout used across the "desktop" demo's single-column variant - the "desktop" demo ([desktop demo](https://demo.mobiscroll.com/react/forms/desktop)) adds the `.mbsc-col-*` grid classes on top of the same field set to span multiple columns on wider screens.

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

- Next: [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.