---
title: "React Forms Field types Example | Mobiscroll"
component: "Forms"
framework: "React"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/react/forms/inputs-text-areas-date-fields"
---

# Field types - React Forms demo

React text field input examples with single-, multi-line, masked, reveal password, disabled, error styling. For React and Next.JS.

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

## Description

Use the input styling in desktop and mobile forms. The inputs feature three styles:

- Underline
- Box
- Outline

Besides that, you can pick from three label types: `inline`, `stacked` and `floating` labels.

Play around and combine different [input types with various label positions](https://demo.mobiscroll.com/react/forms/input-label-types) to find out what fits you best.

While Mobiscroll doesn't provide built-in validation, it provides styling for error messages, disabled fields, labels and more. See how the fields look in different themes by changing it dynamically from the floating action bar on the right.

## What this demo shows

- This demo shows text inputs, text areas, date fields, selects, file uploads, and numeric inputs in a single form.
- **Text inputs** Shows single-line fields with labels, placeholders, password entry, and left or right icons.
- **Field states** Includes disabled fields and error states with custom validation messages.
- **File upload** Shows a file input with an upload icon.
- **Text areas** Demonstrates multi-line fields with icons, disabled states, and validation errors.
- **Date entry** Shows native date input, calendar picker, and date scroller options.
- **Select inputs** Demonstrates native option lists with left or right icons, disabled states, and validation errors.
- **Numeric input** Shows a native number field with increment and decrement controls.

## Best for

- **Registration and account forms** Combine text, password, date, select, and numeric fields for structured user data entry.
- **Profile and settings forms** Present editable, disabled, and invalid fields with clear labels, icons, and error messages.
- **Contact and feedback forms** Use single-line inputs and multi-line text areas for short details and longer responses.
- **Document submission** Add a file upload field alongside other form details.
- **Booking and date-based forms** Offer native date entry, a calendar picker, or a date scroller to suit the workflow.
- **Form pattern evaluation** Compare field types, states, and configurations before applying them to a larger form.

## Tutorial

### Inputs

Use single-line fields with labels, icons error styling and more.

```html
<Input label="Label" placeholder="Text field label" />
<Input label="Password" type="password" placeholder="Password field with icon" startIcon="lock2" />
<Input label="Password Toggle" type="password" placeholder="Password field with icon" startIcon="lock2" passwordToggle={true} />
<Input placeholder="Text field with right icon" endIcon="pencil" />
<Input placeholder="Text field disabled" disabled={true} />
<Input placeholder="Text field with error style" error={true} />
<Input placeholder="Text field with error style and message" error={true} errorMessage="Error message!" />
<Input label="File upload" type="file" placeholder="Select file..." />
```

### Text areas

Use auto-growing text areas for multi-line text entry.

```html
<Textarea label="Label" />
<Textarea endIcon="pencil" />
<Textarea label="Label" startIcon="bubble" />
<Textarea placeholder="disabled" disabled={true} />
<Textarea error={true} errorMessage="Error message!" />
```

### Date fields

Use it for native date fields or in combination with the [date picker](https://demo.mobiscroll.com/react/datetime/mobile-desktop-usage) or [calendar](https://demo.mobiscroll.com/react/calendar/mobile-desktop-usage).

```html
const props1 = { placeholder: 'Please Select...', label: 'Calendar' };
const props2 = { placeholder: 'Please Select...', label: 'Date scroller' };

<Input type="date" label="Date field" placeholder="Please Select..." />
<Datepicker controls={['calendar']} inputProps={props1} />
<Datepicker controls={['date']} inputProps={props2} />
```

### Numeric fields

Use it with native numeric inputs.

```html
<Input label="Number field" type="number" placeholder="Please Select..." />
```

### Select input

Use it for select inputs, with the native option list or the [select component](https://demo.mobiscroll.com/react/select/mobile-desktop-usage).

```html
<Dropdown label="Label">
    <option>Select</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</Dropdown>
<Dropdown endIcon="plus">
    <option>Select with right icon</option>
    <option value="opel">Opel</option>
    <option value="renault">Renault</option>
    <option value="Citroen">Citroen</option>
    <option value="Lotus">Lotus</option>
</Dropdown>
<Dropdown startIcon="plus">
    <option>Select with left icon</option>
    <option value="Peugeot">Peugeot</option>
    <option value="Porsche">Porsche</option>
    <option value="Fiat">Fiat</option>
    <option value="Volkswagen">Volkswagen</option>
</Dropdown>
<Dropdown error={true} errorMessage="Error message!">
    <option>Select error</option>
    <option value="Ferrari">Ferrari</option>
    <option value="Honda">Honda</option>
    <option value="Suzuki">Suzuki</option>
    <option value="Lamborghini">Lamborghini</option>
</Dropdown>
<Dropdown disabled={true}>
    <option>Select disabled</option>
    <option value="Bentley">Bentley</option>
    <option value="Morgan">Morgan</option>
    <option value="Chevrolet">Chevrolet</option>
    <option value="Dodge">Dodge</option>
</Dropdown>
```

## API used in this demo

- [`controls`](https://mobiscroll.com/docs/react/datepicker/api#opt-controls) - option
- [`inputProps`](https://mobiscroll.com/docs/react/datepicker/api#opt-inputProps) - option

## Code

### JSX

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

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

function App() {
  return (
    <Page>
      <div className="mbsc-form-group">
        <div className="mbsc-form-group-title">Single-line text</div>
        <Input label="Label" placeholder="Text field label" />
        <Input label="Password" type="password" placeholder="Password field with icon" startIcon="lock2" />
        <Input label="Password Toggle" type="password" placeholder="Password field with icon" startIcon="lock2" passwordToggle={true} />
        <Input placeholder="Text field with right icon" endIcon="pencil" />
        <Input placeholder="Text field disabled" disabled={true} />
        <Input placeholder="Text field with error style" error={true} />
        <Input placeholder="Text field with error style and message" error={true} errorMessage="Error message!" />
        <Input label="File upload" type="file" placeholder="Select file..." />
      </div>
      <div className="mbsc-form-group">
        <div className="mbsc-form-group-title">Multi-line text</div>
        <Textarea label="Label" />
        <Textarea endIcon="pencil" />
        <Textarea label="Label" startIcon="bubble" />
        <Textarea placeholder="disabled" disabled={true} />
        <Textarea error={true} errorMessage="Error message!" />
      </div>
      <div className="mbsc-form-group">
        <div className="mbsc-form-group-title">Input fields for date entry</div>
        <Input type="date" label="Date field" placeholder="Please Select..." />
        <Datepicker label="Calendar" placeholder="Please select..." />
        <Datepicker controls={['date']} label="Date scroller" placeholder="Please select..." />
      </div>
      <div className="mbsc-form-group">
        <div className="mbsc-form-group-title">Input fields for number entry</div>
        <Input label="Number field" type="number" placeholder="Please Select..." />
      </div>
      <div className="mbsc-form-group">
        <div className="mbsc-form-group-title">Select</div>
        <Dropdown label="Label">
          <option>Select</option>
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
        </Dropdown>
        <Dropdown endIcon="plus">
          <option>Select with right icon</option>
          <option value="opel">Opel</option>
          <option value="renault">Renault</option>
          <option value="Citroen">Citroen</option>
          <option value="Lotus">Lotus</option>
        </Dropdown>
        <Dropdown startIcon="plus">
          <option>Select with left icon</option>
          <option value="Peugeot">Peugeot</option>
          <option value="Porsche">Porsche</option>
          <option value="Fiat">Fiat</option>
          <option value="Volkswagen">Volkswagen</option>
        </Dropdown>
        <Dropdown error={true}>
          <option>Select error</option>
          <option value="Ferrari">Ferrari</option>
          <option value="Honda">Honda</option>
          <option value="Suzuki">Suzuki</option>
          <option value="Lamborghini">Lamborghini</option>
        </Dropdown>
        <Dropdown disabled={true}>
          <option>Select disabled</option>
          <option value="Bentley">Bentley</option>
          <option value="Morgan">Morgan</option>
          <option value="Chevrolet">Chevrolet</option>
          <option value="Dodge">Dodge</option>
        </Dropdown>
      </div>
    </Page>
  );
}

export default App;
```

### TSX

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

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

const App: FC = () => {
  const props1 = { placeholder: 'Please Select...', label: 'Calendar' };
  const props2 = { placeholder: 'Please Select...', label: 'Date scroller' };
  return (
    <Page>
      <div className="mbsc-form-group">
        <div className="mbsc-form-group-title">Single-line text</div>
        <Input label="Label" placeholder="Text field label" />
        <Input label="Password" type="password" placeholder="Password field with icon" startIcon="lock2" />
        <Input label="Password Toggle" type="password" placeholder="Password field with icon" startIcon="lock2" passwordToggle={true} />
        <Input placeholder="Text field with right icon" endIcon="pencil" />
        <Input placeholder="Text field disabled" disabled={true} />
        <Input placeholder="Text field with error style" error={true} />
        <Input placeholder="Text field with error style and message" error={true} errorMessage="Error message!" />
        <Input label="File upload" type="file" placeholder="Select file..." />
      </div>
      <div className="mbsc-form-group">
        <div className="mbsc-form-group-title">Multi-line text</div>
        <Textarea label="Label" />
        <Textarea endIcon="pencil" />
        <Textarea label="Label" startIcon="bubble" />
        <Textarea placeholder="disabled" disabled={true} />
        <Textarea error={true} errorMessage="Error message!" />
      </div>
      <div className="mbsc-form-group">
        <div className="mbsc-form-group-title">Input fields for date entry</div>
        <Input type="date" label="Date field" placeholder="Please Select..." />
        <Datepicker controls={['calendar']} inputProps={props1} />
        <Datepicker controls={['date']} inputProps={props2} />
      </div>
      <div className="mbsc-form-group">
        <div className="mbsc-form-group-title">Input fields for number entry</div>
        <Input label="Number field" type="number" placeholder="Please Select..." />
      </div>
      <div className="mbsc-form-group">
        <div className="mbsc-form-group-title">Select</div>
        <Dropdown label="Label">
          <option>Select</option>
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
        </Dropdown>
        <Dropdown endIcon="plus">
          <option>Select with right icon</option>
          <option value="opel">Opel</option>
          <option value="renault">Renault</option>
          <option value="Citroen">Citroen</option>
          <option value="Lotus">Lotus</option>
        </Dropdown>
        <Dropdown startIcon="plus">
          <option>Select with left icon</option>
          <option value="Peugeot">Peugeot</option>
          <option value="Porsche">Porsche</option>
          <option value="Fiat">Fiat</option>
          <option value="Volkswagen">Volkswagen</option>
        </Dropdown>
        <Dropdown error={true}>
          <option>Select error</option>
          <option value="Ferrari">Ferrari</option>
          <option value="Honda">Honda</option>
          <option value="Suzuki">Suzuki</option>
          <option value="Lamborghini">Lamborghini</option>
        </Dropdown>
        <Dropdown disabled={true}>
          <option>Select disabled</option>
          <option value="Bentley">Bentley</option>
          <option value="Morgan">Morgan</option>
          <option value="Chevrolet">Chevrolet</option>
          <option value="Dodge">Dodge</option>
        </Dropdown>
      </div>
    </Page>
  );
};
export default App;
```

## Implementation notes

- `Input`, `Textarea`, and `Dropdown` all accept `label` (React/Vue prop, Angular `label` attribute, JS/jQuery `data-label` attribute) and `startIcon`/`endIcon` (JS/jQuery `data-start-icon`/`data-end-icon`) for left/right icons.
- Password fields use `type="password"` plus `passwordToggle` to add a show/hide toggle icon: React `passwordToggle={true}`, Vue `:passwordToggle="true"`, Angular `[passwordToggle]="true"`, JS/jQuery `data-password-toggle="true"`.
- Disabled state: React `disabled={true}`, Vue `:disabled="true"`, Angular `[disabled]="true"`, JS/jQuery the bare `disabled` attribute - supported on `Input`, `Textarea`, and `Dropdown`.
- Error state and message: React `error={true} errorMessage="Error message!"`, Vue `:error="true" errorMessage="Error message!"`, Angular `[error]="true" [errorMessage]="errorMessage"`, JS/jQuery `data-error="true" data-error-message="Error message!"` - supported on `Input`, `Textarea`, and `Dropdown`.
- File upload is an `Input` with `type="file"` (no separate file-upload component).
- Numeric entry is an `Input` with `type="number"`, rendering the browser's native increment/decrement controls.
- Native date entry is an `Input` with `type="date"`, rendering the browser's own date control.
- The calendar-picker date field and the scroller date field are both a `Datepicker` bound to a text input: `controls: ['calendar']` opens a month-view calendar, `controls: ['date']` opens scroller wheels instead. In JS this is `mobiscroll.datepicker(el, { controls: [...] })`; in jQuery it's `$(el).mobiscroll().datepicker({ controls: [...] })`; the demo also sets `display: 'anchored', touchUi: false` so the picker opens as a desktop-anchored popup rather than a full-screen touch picker.
- Native select uses `<select mbsc-dropdown>`/`Dropdown` with `<option>` children; it supports the same `label`, `startIcon`/`endIcon`, `disabled`, and `error`/`errorMessage` options as `Input`. Angular additionally binds the selected value with `[(ngModel)]` on the `mbsc-dropdown`.

## 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: [Customize the input](https://demo.mobiscroll.com/react/forms/input-label-types.md) - React input examples with underlined, boxed and outline rendering and labels stacked, inline and floating.