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

# Field types - JavaScript Forms demo

Javascript text field input examples with single-, multi-line, masked, reveal password, disabled, error styling. Plain JS api for usage everywhere.

- [Live demo](https://demo.mobiscroll.com/javascript/forms/inputs-text-areas-date-fields)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/form-components/forms/inputs-text-areas-date-fields)
- This demo in other frameworks: [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), [React](https://demo.mobiscroll.com/react/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/javascript/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
<label>
    <input mbsc-input type="text" data-label="Label" placeholder="Text field label" />
</label>
<label>
    <input mbsc-input type="password" data-label="Password" placeholder="Text field with icon" data-start-icon="lock2" />
</label>
<label>
    <input mbsc-input type="password" data-label="Password Toggle" placeholder="Text field with icon" data-start-icon="lock2" data-password-toggle="true" />
</label>
<label>
    <input mbsc-input type="text" placeholder="Text field with right icon" data-end-icon="pencil" />
</label>
<label>
    <input mbsc-input type="text" placeholder="Text field disabled" disabled/>
</label>
<label>
    <input mbsc-input type="text" data-error="true" placeholder="Text field with error style"  />
</label>
<label>
    <input mbsc-input type="text" data-error="true" data-error-message="Error message!" placeholder="Text field with error style and message" />
</label>
<label>
    <input mbsc-input type="file" data-label="File upload" placeholder="Select file..." />
</label>
```

### Text areas

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

```html
<label>
    <textarea mbsc-textarea data-label="Label"></textarea>
</label>
<label>
    <textarea mbsc-textarea data-end-icon="pencil"></textarea>
</label>
<label>
    <textarea mbsc-textarea data-label="Label" data-start-icon="bubble"></textarea>
</label>
<label>
    <textarea mbsc-textarea placeholder="disabled" disabled></textarea>
</label>
<label>
    <textarea mbsc-textarea data-error="true" data-error-message="Error message!"></textarea>
</label>
```

### Date fields

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

```html
<label>
    <input mbsc-input data-label="Date field" type="date" placeholder="Please Select..." />
</label>
<label>
    <input mbsc-input data-label="Calendar" id="demo-cal" placeholder="Please Select..." />
</label>
<label>
    <input mbsc-input data-label="Date scroller" id="demo-scroller" placeholder="Please Select..." />
</label>
```

### Numeric fields

Use it with native numeric inputs.

```html
<label>
    <input mbsc-input data-label="Number field" type="number" placeholder="Please Select..." />
</label>
```

### Select input

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

```html
<label>
    <select mbsc-dropdown data-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>
    </select>
</label>
<label>
    <select mbsc-dropdown data-end-icon="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>
    </select>
</label>
<label>
    <select mbsc-dropdown data-start-icon="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>
    </select>
</label>
<label>
    <select mbsc-dropdown data-error="true" data-error-message="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>
    </select>
</label>
<label>
    <select mbsc-dropdown disabled>
        <option>Select disabled</option>
        <option value="Bentley">Bentley</option>
        <option value="Morgan">Morgan</option>
        <option value="Chevrolet">Chevrolet</option>
        <option value="Dodge">Dodge</option>
    </select>
</label>
```

## API used in this demo

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

## Code

### JS

```js
mobiscroll.setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

mobiscroll.datepicker('#demo-cal', {
  controls: ['calendar'],
});

mobiscroll.datepicker('#demo-scroller', {
  controls: ['date'],
});
```

### HTML

```html
<div class="mbsc-form-group">
    <div class="mbsc-form-group-title">Single-line text</div>
    <label>
        <input mbsc-input type="text" data-label="Label" placeholder="Text field label" />
    </label>
    <label>
        <input mbsc-input type="password" data-label="Password" placeholder="Text field with icon" data-start-icon="lock2" />
    </label>
    <label>
        <input mbsc-input type="password" data-label="Password Toggle" placeholder="Text field with icon" data-start-icon="lock2" data-password-toggle="true" />
    </label>
    <label>
        <input mbsc-input type="text" placeholder="Text field with right icon" data-end-icon="pencil" />
    </label>
    <label>
        <input mbsc-input type="text" placeholder="Text field disabled" disabled/>
    </label>
    <label>
        <input mbsc-input type="text" data-error="true" placeholder="Text field with error style"  />
    </label>
    <label>
        <input mbsc-input type="text" data-error="true" data-error-message="Error message!" placeholder="Text field with error style and message" />
    </label>
    <label>
        <input mbsc-input type="file" data-label="File upload" placeholder="Select file..." />
    </label>
</div>
<div class="mbsc-form-group">
    <div class="mbsc-form-group-title">Multi-line text</div>
    <label>
        <textarea mbsc-textarea data-label="Label"></textarea>
    </label>
    <label>
        <textarea mbsc-textarea data-end-icon="pencil"></textarea>
    </label>
    <label>
        <textarea mbsc-textarea data-label="Label" data-start-icon="bubble"></textarea>
    </label>
    <label>
        <textarea mbsc-textarea placeholder="disabled" disabled></textarea>
    </label>
    <label>
        <textarea mbsc-textarea data-error="true" data-error-message="Error message!"></textarea>
    </label>
</div>
<div class="mbsc-form-group">
    <div class="mbsc-form-group-title">Input fields for date entry</div>
    <label>
        <input mbsc-input data-label="Date field" type="date" placeholder="Please Select..." />
    </label>
    <label>
        <input mbsc-input data-label="Calendar" id="demo-cal" placeholder="Please Select..." />
    </label>
    <label>
        <input mbsc-input data-label="Date scroller" id="demo-scroller" placeholder="Please Select..." />
    </label>
</div>
<div class="mbsc-form-group">
    <div class="mbsc-form-group-title">Input field for number entry</div>
    <label>
        <input mbsc-input data-label="Number field" type="number" placeholder="Please Select..." />
    </label>
</div>
<div class="mbsc-form-group">
    <div class="mbsc-form-group-title">Select</div>
    <label>
        <select mbsc-dropdown data-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>
        </select>
    </label>
    <label>
        <select mbsc-dropdown data-end-icon="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>
        </select>
    </label>
    <label>
        <select mbsc-dropdown data-start-icon="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>
        </select>
    </label>
    <label>
        <select mbsc-dropdown data-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>
        </select>
    </label>
    <label>
        <select mbsc-dropdown disabled>
            <option>Select disabled</option>
            <option value="Bentley">Bentley</option>
            <option value="Morgan">Morgan</option>
            <option value="Chevrolet">Chevrolet</option>
            <option value="Dodge">Dodge</option>
        </select>
    </label>
</div>
```

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

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

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

## Related demos

- Next: [Customize the input](https://demo.mobiscroll.com/javascript/forms/input-label-types.md) - Javascript input examples with underlined, boxed and outline rendering and labels stacked, inline and floating.