---
title: "React Forms Customize the input Example | Mobiscroll"
component: "Forms"
framework: "React"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/react/forms/input-label-types"
---

# Customize the input - React Forms demo

React input examples with underlined, boxed and outline rendering and labels stacked, inline and floating. For React and Next.js.

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

## Description

The three input styles: `underline`, `box` and `outline` can be combined with three label styles: `stacked`, `inline` or `floating`. Try different combinations to find what's right for you.

## What this demo shows

- This demo shows examples for different input and label styles.
- **Input styles** Underline, box, and outline styling for form controls.
- **Label styles** Stacked, inline, and floating labels combined with each input style.
- **Style controls** Controls for dynamically switching between the available input and label styles.
- **Field types** Consistent styling across text inputs, text areas, select inputs, and file uploads.
- **Field variations** Fields with icons, validation error styling, and no labels.

## Best for

- **Brand-aligned forms** Comparing input and label combinations when adapting forms to a product's visual style.
- **Mixed-field forms** Applying consistent styling across text inputs, text areas, selects, and file uploads.
- **Compact and spacious layouts** Evaluating inline, stacked, and floating labels for forms with different space constraints.
- **Validation states** Styling fields that need clear error feedback alongside their standard state.
- **Icon-supported inputs** Presenting fields that use icons to provide additional visual context.

## Tutorial

### Input type

- (x) Underline
- ( ) Box
- ( ) Outline

### Label type

- (x) Stacked
- ( ) Inline
- ( ) Floating

```html
<Input inputStyle="underline" labelStyle="stacked" startIcon="user4" placeholder="Input with label" label="Name"></Input>
<Input inputStyle="underline" labelStyle="stacked" startIcon="material-email" placeholder="With error styling" error="true" label="Email"></Input>
<Input inputStyle="underline" labelStyle="stacked" startIcon="lock2" placeholder="Without label"></Input>
<Textarea inputStyle="underline" labelStyle="stacked" startIcon="bubble" placeholder="Textarea with left icon" label="About me"></Textarea>
<Dropdown inputStyle="underline" labelStyle="stacked" startIcon="plus" endIcon="close">
    <option>Select with icons</option>
    <option value="Opel">Opel</option>
    <option value="Renault">Renault</option>
    <option value="Citroen">Citroen</option>
    <option value="Lotus">Lotus</option>
</Dropdown>
<Input inputStyle="underline" labelStyle="stacked" type="file" placeholder="Select file..." label="File upload"></Input>
```

With "Box":

```html
<Input inputStyle="box" labelStyle="stacked" startIcon="user4" placeholder="Input with label" label="Name"></Input>
<Input inputStyle="box" labelStyle="stacked" startIcon="material-email" placeholder="With error styling" error="true" label="Email"></Input>
<Input inputStyle="box" labelStyle="stacked" startIcon="lock2" placeholder="Without label"></Input>
<Textarea inputStyle="box" labelStyle="stacked" startIcon="bubble" placeholder="Textarea with left icon" label="About me"></Textarea>
<Dropdown inputStyle="box" labelStyle="stacked" startIcon="plus" endIcon="close">
    <option>Select with icons</option>
    <option value="Opel">Opel</option>
    <option value="Renault">Renault</option>
    <option value="Citroen">Citroen</option>
    <option value="Lotus">Lotus</option>
</Dropdown>
<Input inputStyle="box" labelStyle="stacked" type="file" placeholder="Select file..." label="File upload"></Input>
```

With "Outline":

```html
<Input inputStyle="outline" labelStyle="stacked" startIcon="user4" placeholder="Input with label" label="Name"></Input>
<Input inputStyle="outline" labelStyle="stacked" startIcon="material-email" placeholder="With error styling" error="true" label="Email"></Input>
<Input inputStyle="outline" labelStyle="stacked" startIcon="lock2" placeholder="Without label"></Input>
<Textarea inputStyle="outline" labelStyle="stacked" startIcon="bubble" placeholder="Textarea with left icon" label="About me"></Textarea>
<Dropdown inputStyle="outline" labelStyle="stacked" startIcon="plus" endIcon="close">
    <option>Select with icons</option>
    <option value="Opel">Opel</option>
    <option value="Renault">Renault</option>
    <option value="Citroen">Citroen</option>
    <option value="Lotus">Lotus</option>
</Dropdown>
<Input inputStyle="outline" labelStyle="stacked" type="file" placeholder="Select file..." label="File upload"></Input>
```

With "Inline":

```html
<Input inputStyle="underline" labelStyle="inline" startIcon="user4" placeholder="Input with label" label="Name"></Input>
<Input inputStyle="underline" labelStyle="inline" startIcon="material-email" placeholder="With error styling" error="true" label="Email"></Input>
<Input inputStyle="underline" labelStyle="inline" startIcon="lock2" placeholder="Without label"></Input>
<Textarea inputStyle="underline" labelStyle="inline" startIcon="bubble" placeholder="Textarea with left icon" label="About me"></Textarea>
<Dropdown inputStyle="underline" labelStyle="inline" startIcon="plus" endIcon="close">
    <option>Select with icons</option>
    <option value="Opel">Opel</option>
    <option value="Renault">Renault</option>
    <option value="Citroen">Citroen</option>
    <option value="Lotus">Lotus</option>
</Dropdown>
<Input inputStyle="underline" labelStyle="inline" type="file" placeholder="Select file..." label="File upload"></Input>
```

With "Floating":

```html
<Input inputStyle="underline" labelStyle="floating" startIcon="user4" placeholder="Input with label" label="Name"></Input>
<Input inputStyle="underline" labelStyle="floating" startIcon="material-email" placeholder="With error styling" error="true" label="Email"></Input>
<Input inputStyle="underline" labelStyle="floating" startIcon="lock2" placeholder="Without label"></Input>
<Textarea inputStyle="underline" labelStyle="floating" startIcon="bubble" placeholder="Textarea with left icon" label="About me"></Textarea>
<Dropdown inputStyle="underline" labelStyle="floating" startIcon="plus" endIcon="close">
    <option>Select with icons</option>
    <option value="Opel">Opel</option>
    <option value="Renault">Renault</option>
    <option value="Citroen">Citroen</option>
    <option value="Lotus">Lotus</option>
</Dropdown>
<Input inputStyle="underline" labelStyle="floating" type="file" placeholder="Select file..." label="File upload"></Input>
```

## 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
- [`inputStyle`](https://mobiscroll.com/docs/react/forms/textarea#opt-inputStyle) - option
- [`labelStyle`](https://mobiscroll.com/docs/react/forms/textarea#opt-labelStyle) - option
- [`inputStyle`](https://mobiscroll.com/docs/react/forms/dropdown#opt-inputStyle) - option
- [`labelStyle`](https://mobiscroll.com/docs/react/forms/dropdown#opt-labelStyle) - option

## Code

### JSX

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

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

function App() {
  return (
    <Page>
      <div className="mbsc-grid">
        <div className="mbsc-row mbsc-justify-content-center">
          <div className="mbsc-col-sm-12 mbsc-col-md-8 mbsc-col-xl-4">
            <div className="mbsc-form-group">
              <div className="mbsc-form-group-title">Underline inputs with stacked labels</div>
              <Input inputStyle="underline" labelStyle="stacked" startIcon="user4" placeholder="Input with label" label="Name"></Input>
              <Input
                inputStyle="underline"
                labelStyle="stacked"
                startIcon="material-email"
                placeholder="With error styling"
                error="true"
                label="Email"
              ></Input>
              <Input
                inputStyle="underline"
                labelStyle="stacked"
                startIcon="lock2"
                passwordToggle="true"
                error="true"
                errorMessage="An error occurred"
                type="password"
                placeholder="With icons and error message"
                label="Password"
              ></Input>
              <Input inputStyle="underline" labelStyle="stacked" startIcon="empty" placeholder="Without label"></Input>
              <Textarea
                inputStyle="underline"
                labelStyle="stacked"
                startIcon="bubble"
                placeholder="Textarea with left icon"
                label="About me"
              ></Textarea>
              <Dropdown inputStyle="underline" labelStyle="stacked" startIcon="plus" endIcon="close">
                <option>Select with icons</option>
                <option value="Opel">Opel</option>
                <option value="Renault">Renault</option>
                <option value="Citroen">Citroen</option>
                <option value="Lotus">Lotus</option>
              </Dropdown>
              <Input inputStyle="underline" labelStyle="stacked" type="file" placeholder="Select file..." label="File upload"></Input>
            </div>
          </div>
          <div className="mbsc-col-sm-12 mbsc-col-md-8 mbsc-col-xl-4">
            <div className="mbsc-form-group">
              <div className="mbsc-form-group-title">Underline inputs with inline labels</div>
              <Input inputStyle="underline" labelStyle="inline" startIcon="user4" placeholder="Input with label" label="Name"></Input>
              <Input
                inputStyle="underline"
                labelStyle="inline"
                startIcon="material-email"
                placeholder="With error styling"
                error="true"
                label="Email"
              ></Input>
              <Input
                inputStyle="underline"
                labelStyle="inline"
                startIcon="lock2"
                passwordToggle="true"
                error="true"
                errorMessage="An error occurred"
                type="password"
                placeholder="With icons and error message"
                label="Password"
              ></Input>
              <Input inputStyle="underline" labelStyle="inline" startIcon="empty" placeholder="Without label"></Input>
              <Textarea
                inputStyle="underline"
                labelStyle="inline"
                startIcon="bubble"
                placeholder="Textarea with left icon"
                label="About me"
              ></Textarea>
              <Dropdown inputStyle="underline" labelStyle="inline" startIcon="plus" endIcon="close">
                <option>Select with icons</option>
                <option value="Opel">Opel</option>
                <option value="Renault">Renault</option>
                <option value="Citroen">Citroen</option>
                <option value="Lotus">Lotus</option>
              </Dropdown>
              <Input inputStyle="underline" labelStyle="inline" type="file" placeholder="Select file..." label="File upload"></Input>
            </div>
          </div>
          <div className="mbsc-col-sm-12 mbsc-col-md-8 mbsc-col-xl-4">
            <div className="mbsc-form-group">
              <div className="mbsc-form-group-title">Underline inputs with floating labels</div>
              <Input inputStyle="underline" labelStyle="floating" startIcon="user4" placeholder="Input with label" label="Name"></Input>
              <Input
                inputStyle="underline"
                labelStyle="floating"
                startIcon="material-email"
                placeholder="With error styling"
                error="true"
                label="Email"
              ></Input>
              <Input
                inputStyle="underline"
                labelStyle="floating"
                startIcon="lock2"
                passwordToggle="true"
                error="true"
                errorMessage="An error occurred"
                type="password"
                placeholder="With icons and error message"
                label="Password"
              ></Input>
              <Input inputStyle="underline" labelStyle="floating" startIcon="empty" placeholder="Without label"></Input>
              <Textarea
                inputStyle="underline"
                labelStyle="floating"
                startIcon="bubble"
                placeholder="Textarea with left icon"
                label="About me"
              ></Textarea>
              <Dropdown inputStyle="underline" labelStyle="floating" startIcon="plus" endIcon="close">
                <option>Select with icons</option>
                <option value="Opel">Opel</option>
                <option value="Renault">Renault</option>
                <option value="Citroen">Citroen</option>
                <option value="Lotus">Lotus</option>
              </Dropdown>
              <Input inputStyle="underline" labelStyle="floating" type="file" placeholder="Select file..." label="File upload"></Input>
            </div>
          </div>
        </div>
        <div className="mbsc-row mbsc-justify-content-center">
          <div className="mbsc-col-sm-12 mbsc-col-md-8 mbsc-col-xl-4">
            <div className="mbsc-form-group">
              <div className="mbsc-form-group-title">Box inputs with stacked labels</div>
              <Input inputStyle="box" labelStyle="stacked" startIcon="user4" placeholder="Input with label" label="Name"></Input>
              <Input
                inputStyle="box"
                labelStyle="stacked"
                startIcon="material-email"
                placeholder="With error styling"
                error="true"
                label="Email"
              ></Input>
              <Input
                inputStyle="box"
                labelStyle="stacked"
                startIcon="lock2"
                passwordToggle="true"
                error="true"
                errorMessage="An error occurred"
                type="password"
                placeholder="With icons and error message"
                label="Password"
              ></Input>
              <Input inputStyle="box" labelStyle="stacked" startIcon="empty" placeholder="Without label"></Input>
              <Textarea
                inputStyle="box"
                labelStyle="stacked"
                startIcon="bubble"
                placeholder="Textarea with left icon"
                label="About me"
              ></Textarea>
              <Dropdown inputStyle="box" labelStyle="stacked" startIcon="plus" endIcon="close">
                <option>Select with icons</option>
                <option value="Opel">Opel</option>
                <option value="Renault">Renault</option>
                <option value="Citroen">Citroen</option>
                <option value="Lotus">Lotus</option>
              </Dropdown>
              <Input inputStyle="box" labelStyle="stacked" type="file" placeholder="Select file..." label="File upload"></Input>
            </div>
          </div>
          <div className="mbsc-col-sm-12 mbsc-col-md-8 mbsc-col-xl-4">
            <div className="mbsc-form-group">
              <div className="mbsc-form-group-title">Box inputs with inline labels</div>
              <Input inputStyle="box" labelStyle="inline" startIcon="user4" placeholder="Input with label" label="Name"></Input>
              <Input
                inputStyle="box"
                labelStyle="inline"
                startIcon="material-email"
                placeholder="With error styling"
                error="true"
                label="Email"
              ></Input>
              <Input
                inputStyle="box"
                labelStyle="inline"
                startIcon="lock2"
                passwordToggle="true"
                error="true"
                errorMessage="An error occurred"
                type="password"
                placeholder="With icons and error message"
                label="Password"
              ></Input>
              <Input inputStyle="box" labelStyle="inline" startIcon="empty" placeholder="Without label"></Input>
              <Textarea
                inputStyle="box"
                labelStyle="inline"
                startIcon="bubble"
                placeholder="Textarea with left icon"
                label="About me"
              ></Textarea>
              <Dropdown inputStyle="box" labelStyle="inline" startIcon="plus" endIcon="close">
                <option>Select with icons</option>
                <option value="Opel">Opel</option>
                <option value="Renault">Renault</option>
                <option value="Citroen">Citroen</option>
                <option value="Lotus">Lotus</option>
              </Dropdown>
              <Input inputStyle="box" labelStyle="inline" type="file" placeholder="Select file..." label="File upload"></Input>
            </div>
          </div>
          <div className="mbsc-col-sm-12 mbsc-col-md-8 mbsc-col-xl-4">
            <div className="mbsc-form-group">
              <div className="mbsc-form-group-title">Box inputs with floating labels</div>
              <Input inputStyle="box" labelStyle="floating" startIcon="user4" placeholder="Input with label" label="Name"></Input>
              <Input
                inputStyle="box"
                labelStyle="floating"
                startIcon="material-email"
                placeholder="With error styling"
                error="true"
                label="Email"
              ></Input>
              <Input
                inputStyle="box"
                labelStyle="floating"
                startIcon="lock2"
                passwordToggle="true"
                error="true"
                errorMessage="An error occurred"
                type="password"
                placeholder="With icons and error message"
                label="Password"
              ></Input>
              <Input inputStyle="box" labelStyle="floating" startIcon="empty" placeholder="Without label"></Input>
              <Textarea
                inputStyle="box"
                labelStyle="floating"
                startIcon="bubble"
                placeholder="Textarea with left icon"
                label="About me"
              ></Textarea>
              <Dropdown inputStyle="box" labelStyle="floating" startIcon="plus" endIcon="close">
                <option>Select with icons</option>
                <option value="Opel">Opel</option>
                <option value="Renault">Renault</option>
                <option value="Citroen">Citroen</option>
                <option value="Lotus">Lotus</option>
              </Dropdown>
              <Input inputStyle="box" labelStyle="floating" type="file" placeholder="Select file..." label="File upload"></Input>
            </div>
          </div>
        </div>
        <div className="mbsc-row mbsc-justify-content-center">
          <div className="mbsc-col-sm-12 mbsc-col-md-8 mbsc-col-xl-4">
            <div className="mbsc-form-group">
              <div className="mbsc-form-group-title">Outline inputs with stacked labels</div>
              <Input inputStyle="outline" labelStyle="stacked" startIcon="user4" placeholder="Input with label" label="Name"></Input>
              <Input
                inputStyle="outline"
                labelStyle="stacked"
                startIcon="material-email"
                placeholder="With error styling"
                error="true"
                label="Email"
              ></Input>
              <Input
                inputStyle="outline"
                labelStyle="stacked"
                startIcon="lock2"
                passwordToggle="true"
                error="true"
                errorMessage="An error occurred"
                type="password"
                placeholder="With icons and error message"
                label="Password"
              ></Input>
              <Input inputStyle="outline" labelStyle="stacked" startIcon="empty" placeholder="Without label"></Input>
              <Textarea
                inputStyle="outline"
                labelStyle="stacked"
                startIcon="bubble"
                placeholder="Textarea with left icon"
                label="About me"
              ></Textarea>
              <Dropdown inputStyle="outline" labelStyle="stacked" startIcon="plus" endIcon="close">
                <option>Select with icons</option>
                <option value="Opel">Opel</option>
                <option value="Renault">Renault</option>
                <option value="Citroen">Citroen</option>
                <option value="Lotus">Lotus</option>
              </Dropdown>
              <Input inputStyle="outline" labelStyle="stacked" type="file" placeholder="Select file..." label="File upload"></Input>
            </div>
          </div>
          <div className="mbsc-col-sm-12 mbsc-col-md-8 mbsc-col-xl-4">
            <div className="mbsc-form-group">
              <div className="mbsc-form-group-title">Outline inputs with inline labels</div>
              <Input inputStyle="outline" labelStyle="inline" startIcon="user4" placeholder="Input with label" label="Name"></Input>
              <Input
                inputStyle="outline"
                labelStyle="inline"
                startIcon="material-email"
                placeholder="With error styling"
                error="true"
                label="Email"
              ></Input>
              <Input
                inputStyle="outline"
                labelStyle="inline"
                startIcon="lock2"
                passwordToggle="true"
                error="true"
                errorMessage="An error occurred"
                type="password"
                placeholder="With icons and error message"
                label="Password"
              ></Input>
              <Input inputStyle="outline" labelStyle="inline" startIcon="empty" placeholder="Without label"></Input>
              <Textarea
                inputStyle="outline"
                labelStyle="inline"
                startIcon="bubble"
                placeholder="Textarea with left icon"
                label="About me"
              ></Textarea>
              <Dropdown inputStyle="outline" labelStyle="inline" startIcon="plus" endIcon="close">
                <option>Select with icons</option>
                <option value="Opel">Opel</option>
                <option value="Renault">Renault</option>
                <option value="Citroen">Citroen</option>
                <option value="Lotus">Lotus</option>
              </Dropdown>
              <Input inputStyle="outline" labelStyle="inline" type="file" placeholder="Select file..." label="File upload"></Input>
            </div>
          </div>
          <div className="mbsc-col-sm-12 mbsc-col-md-8 mbsc-col-xl-4">
            <div className="mbsc-form-group">
              <div className="mbsc-form-group-title">Outline inputs with floating labels</div>
              <Input inputStyle="outline" labelStyle="floating" startIcon="user4" placeholder="Input with label" label="Name"></Input>
              <Input
                inputStyle="outline"
                labelStyle="floating"
                startIcon="material-email"
                placeholder="With error styling"
                error="true"
                label="Email"
              ></Input>
              <Input
                inputStyle="outline"
                labelStyle="floating"
                startIcon="lock2"
                passwordToggle="true"
                error="true"
                errorMessage="An error occurred"
                type="password"
                placeholder="With icons and error message"
                label="Password"
              ></Input>
              <Input inputStyle="outline" labelStyle="floating" startIcon="empty" placeholder="Without label"></Input>
              <Textarea
                inputStyle="outline"
                labelStyle="floating"
                startIcon="bubble"
                placeholder="Textarea with left icon"
                label="About me"
              ></Textarea>
              <Dropdown inputStyle="outline" labelStyle="floating" startIcon="plus" endIcon="close">
                <option>Select with icons</option>
                <option value="Opel">Opel</option>
                <option value="Renault">Renault</option>
                <option value="Citroen">Citroen</option>
                <option value="Lotus">Lotus</option>
              </Dropdown>
              <Input inputStyle="outline" labelStyle="floating" type="file" placeholder="Select file..." label="File upload"></Input>
            </div>
          </div>
        </div>
      </div>
    </Page>
  );
}

export default App;
```

### TSX

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

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

const App: FC = () => (
  <Page>
    <div className="mbsc-grid">
      <div className="mbsc-row mbsc-justify-content-center">
        <div className="mbsc-col-sm-12 mbsc-col-md-8 mbsc-col-xl-4">
          <div className="mbsc-form-group">
            <div className="mbsc-form-group-title">Underline inputs with stacked labels</div>
            <Input inputStyle="underline" labelStyle="stacked" startIcon="user4" placeholder="Input with label" label="Name">
              Name
            </Input>
            <Input
              inputStyle="underline"
              labelStyle="stacked"
              startIcon="material-email"
              placeholder="With error styling"
              error={true}
              label="Email"
            ></Input>
            <Input
              inputStyle="underline"
              labelStyle="stacked"
              startIcon="lock2"
              passwordToggle={true}
              error={true}
              errorMessage="An error occurred"
              type="password"
              placeholder="With icons and error message"
              label="Password"
            ></Input>
            <Input inputStyle="underline" labelStyle="stacked" startIcon="empty" placeholder="Without label"></Input>
            <Textarea
              inputStyle="underline"
              labelStyle="stacked"
              startIcon="bubble"
              placeholder="Textarea with left icon"
              label="About me"
            ></Textarea>
            <Dropdown inputStyle="underline" labelStyle="stacked" startIcon="plus" endIcon="close">
              <option>Select with icons</option>
              <option value="Opel">Opel</option>
              <option value="Renault">Renault</option>
              <option value="Citroen">Citroen</option>
              <option value="Lotus">Lotus</option>
            </Dropdown>
            <Input inputStyle="underline" labelStyle="stacked" type="file" placeholder="Select file..." label="File upload"></Input>
          </div>
        </div>
        <div className="mbsc-col-sm-12 mbsc-col-md-8 mbsc-col-xl-4">
          <div className="mbsc-form-group">
            <div className="mbsc-form-group-title">Underline inputs with inline labels</div>
            <Input inputStyle="underline" labelStyle="inline" startIcon="user4" placeholder="Input with label" label="Name">
              Name
            </Input>
            <Input
              inputStyle="underline"
              labelStyle="inline"
              startIcon="material-email"
              placeholder="With error styling"
              error={true}
              label="Email"
            ></Input>
            <Input
              inputStyle="underline"
              labelStyle="inline"
              startIcon="lock2"
              passwordToggle={true}
              error={true}
              errorMessage="An error occurred"
              type="password"
              placeholder="With icons and error message"
              label="Password"
            ></Input>
            <Input inputStyle="underline" labelStyle="inline" startIcon="empty" placeholder="Without label"></Input>
            <Textarea
              inputStyle="underline"
              labelStyle="inline"
              startIcon="bubble"
              placeholder="Textarea with left icon"
              label="About me"
            ></Textarea>
            <Dropdown inputStyle="underline" labelStyle="inline" startIcon="plus" endIcon="close">
              <option>Select with icons</option>
              <option value="Opel">Opel</option>
              <option value="Renault">Renault</option>
              <option value="Citroen">Citroen</option>
              <option value="Lotus">Lotus</option>
            </Dropdown>
            <Input inputStyle="underline" labelStyle="inline" type="file" placeholder="Select file..." label="File upload"></Input>
          </div>
        </div>
        <div className="mbsc-col-sm-12 mbsc-col-md-8 mbsc-col-xl-4">
          <div className="mbsc-form-group">
            <div className="mbsc-form-group-title">Underline inputs with floating labels</div>
            <Input inputStyle="underline" labelStyle="floating" startIcon="user4" placeholder="Input with label" label="Name">
              Name
            </Input>
            <Input
              inputStyle="underline"
              labelStyle="floating"
              startIcon="material-email"
              placeholder="With error styling"
              error={true}
              label="Email"
            ></Input>
            <Input
              inputStyle="underline"
              labelStyle="floating"
              startIcon="lock2"
              passwordToggle={true}
              error={true}
              errorMessage="An error occurred"
              type="password"
              placeholder="With icons and error message"
              label="Password"
            ></Input>
            <Input inputStyle="underline" labelStyle="floating" startIcon="empty" placeholder="Without label"></Input>
            <Textarea
              inputStyle="underline"
              labelStyle="floating"
              startIcon="bubble"
              placeholder="Textarea with left icon"
              label="About me"
            ></Textarea>
            <Dropdown inputStyle="underline" labelStyle="floating" startIcon="plus" endIcon="close">
              <option>Select with icons</option>
              <option value="Opel">Opel</option>
              <option value="Renault">Renault</option>
              <option value="Citroen">Citroen</option>
              <option value="Lotus">Lotus</option>
            </Dropdown>
            <Input inputStyle="underline" labelStyle="floating" type="file" placeholder="Select file..." label="File upload"></Input>
          </div>
        </div>
      </div>
      <div className="mbsc-row mbsc-justify-content-center">
        <div className="mbsc-col-sm-12 mbsc-col-md-8 mbsc-col-xl-4">
          <div className="mbsc-form-group">
            <div className="mbsc-form-group-title">Box inputs with stacked labels</div>
            <Input inputStyle="box" labelStyle="stacked" startIcon="user4" placeholder="Input with label" label="Name">
              Name
            </Input>
            <Input
              inputStyle="box"
              labelStyle="stacked"
              startIcon="material-email"
              placeholder="With error styling"
              error={true}
              label="Email"
            ></Input>
            <Input
              inputStyle="box"
              labelStyle="stacked"
              startIcon="lock2"
              passwordToggle={true}
              error={true}
              errorMessage="An error occurred"
              type="password"
              placeholder="With icons and error message"
              label="Password"
            ></Input>
            <Input inputStyle="box" labelStyle="stacked" startIcon="empty" placeholder="Without label"></Input>
            <Textarea
              inputStyle="box"
              labelStyle="stacked"
              startIcon="bubble"
              placeholder="Textarea with left icon"
              label="About me"
            ></Textarea>
            <Dropdown inputStyle="box" labelStyle="stacked" startIcon="plus" endIcon="close">
              <option>Select with icons</option>
              <option value="Opel">Opel</option>
              <option value="Renault">Renault</option>
              <option value="Citroen">Citroen</option>
              <option value="Lotus">Lotus</option>
            </Dropdown>
            <Input inputStyle="box" labelStyle="stacked" type="file" placeholder="Select file..." label="File upload"></Input>
          </div>
        </div>
        <div className="mbsc-col-sm-12 mbsc-col-md-8 mbsc-col-xl-4">
          <div className="mbsc-form-group">
            <div className="mbsc-form-group-title">Box inputs with inline labels</div>
            <Input inputStyle="box" labelStyle="inline" startIcon="user4" placeholder="Input with label" label="Name">
              Name
            </Input>
            <Input
              inputStyle="box"
              labelStyle="inline"
              startIcon="material-email"
              placeholder="With error styling"
              error={true}
              label="Email"
            ></Input>
            <Input
              inputStyle="box"
              labelStyle="inline"
              startIcon="lock2"
              passwordToggle={true}
              error={true}
              errorMessage="An error occurred"
              type="password"
              placeholder="With icons and error message"
              label="Password"
            ></Input>
            <Input inputStyle="box" labelStyle="inline" startIcon="empty" placeholder="Without label"></Input>
            <Textarea
              inputStyle="box"
              labelStyle="inline"
              startIcon="bubble"
              placeholder="Textarea with left icon"
              label="About me"
            ></Textarea>
            <Dropdown inputStyle="box" labelStyle="inline" startIcon="plus" endIcon="close">
              <option>Select with icons</option>
              <option value="Opel">Opel</option>
              <option value="Renault">Renault</option>
              <option value="Citroen">Citroen</option>
              <option value="Lotus">Lotus</option>
            </Dropdown>
            <Input inputStyle="box" labelStyle="inline" type="file" placeholder="Select file..." label="File upload"></Input>
          </div>
        </div>
        <div className="mbsc-col-sm-12 mbsc-col-md-8 mbsc-col-xl-4">
          <div className="mbsc-form-group">
            <div className="mbsc-form-group-title">Box inputs with floating labels</div>
            <Input inputStyle="box" labelStyle="floating" startIcon="user4" placeholder="Input with label" label="Name">
              Name
            </Input>
            <Input
              inputStyle="box"
              labelStyle="floating"
              startIcon="material-email"
              placeholder="With error styling"
              error={true}
              label="Email"
            ></Input>
            <Input
              inputStyle="box"
              labelStyle="floating"
              startIcon="lock2"
              passwordToggle={true}
              error={true}
              errorMessage="An error occurred"
              type="password"
              placeholder="With icons and error message"
              label="Password"
            ></Input>
            <Input inputStyle="box" labelStyle="floating" startIcon="empty" placeholder="Without label"></Input>
            <Textarea
              inputStyle="box"
              labelStyle="floating"
              startIcon="bubble"
              placeholder="Textarea with left icon"
              label="About me"
            ></Textarea>
            <Dropdown inputStyle="box" labelStyle="floating" startIcon="plus" endIcon="close">
              <option>Select with icons</option>
              <option value="Opel">Opel</option>
              <option value="Renault">Renault</option>
              <option value="Citroen">Citroen</option>
              <option value="Lotus">Lotus</option>
            </Dropdown>
            <Input inputStyle="box" labelStyle="floating" type="file" placeholder="Select file..." label="File upload"></Input>
          </div>
        </div>
      </div>
      <div className="mbsc-row mbsc-justify-content-center">
        <div className="mbsc-col-sm-12 mbsc-col-md-8 mbsc-col-xl-4">
          <div className="mbsc-form-group">
            <div className="mbsc-form-group-title">Outline inputs with stacked labels</div>
            <Input inputStyle="outline" labelStyle="stacked" startIcon="user4" placeholder="Input with label" label="Name">
              Name
            </Input>
            <Input
              inputStyle="outline"
              labelStyle="stacked"
              startIcon="material-email"
              placeholder="With error styling"
              error={true}
              label="Email"
            ></Input>
            <Input
              inputStyle="outline"
              labelStyle="stacked"
              startIcon="lock2"
              passwordToggle={true}
              error={true}
              errorMessage="An error occurred"
              type="password"
              placeholder="With icons and error message"
              label="Password"
            ></Input>
            <Input inputStyle="outline" labelStyle="stacked" startIcon="empty" placeholder="Without label"></Input>
            <Textarea
              inputStyle="outline"
              labelStyle="stacked"
              startIcon="bubble"
              placeholder="Textarea with left icon"
              label="About me"
            ></Textarea>
            <Dropdown inputStyle="outline" labelStyle="stacked" startIcon="plus" endIcon="close">
              <option>Select with icons</option>
              <option value="Opel">Opel</option>
              <option value="Renault">Renault</option>
              <option value="Citroen">Citroen</option>
              <option value="Lotus">Lotus</option>
            </Dropdown>
            <Input inputStyle="outline" labelStyle="stacked" type="file" placeholder="Select file..." label="File upload"></Input>
          </div>
        </div>
        <div className="mbsc-col-sm-12 mbsc-col-md-8 mbsc-col-xl-4">
          <div className="mbsc-form-group">
            <div className="mbsc-form-group-title">Outline inputs with inline labels</div>
            <Input inputStyle="outline" labelStyle="inline" startIcon="user4" placeholder="Input with label" label="Name">
              Name
            </Input>
            <Input
              inputStyle="outline"
              labelStyle="inline"
              startIcon="material-email"
              placeholder="With error styling"
              error={true}
              label="Email"
            ></Input>
            <Input
              inputStyle="outline"
              labelStyle="inline"
              startIcon="lock2"
              passwordToggle={true}
              error={true}
              errorMessage="An error occurred"
              type="password"
              placeholder="With icons and error message"
              label="Password"
            ></Input>
            <Input inputStyle="outline" labelStyle="inline" startIcon="empty" placeholder="Without label"></Input>
            <Textarea
              inputStyle="outline"
              labelStyle="inline"
              startIcon="bubble"
              placeholder="Textarea with left icon"
              label="About me"
            ></Textarea>
            <Dropdown inputStyle="outline" labelStyle="inline" startIcon="plus" endIcon="close">
              <option>Select with icons</option>
              <option value="Opel">Opel</option>
              <option value="Renault">Renault</option>
              <option value="Citroen">Citroen</option>
              <option value="Lotus">Lotus</option>
            </Dropdown>
            <Input inputStyle="outline" labelStyle="inline" type="file" placeholder="Select file..." label="File upload"></Input>
          </div>
        </div>
        <div className="mbsc-col-sm-12 mbsc-col-md-8 mbsc-col-xl-4">
          <div className="mbsc-form-group">
            <div className="mbsc-form-group-title">Outline inputs with floating labels</div>
            <Input inputStyle="outline" labelStyle="floating" startIcon="user4" placeholder="Input with label" label="Name">
              Name
            </Input>
            <Input
              inputStyle="outline"
              labelStyle="floating"
              startIcon="material-email"
              placeholder="With error styling"
              error={true}
              label="Email"
            ></Input>
            <Input
              inputStyle="outline"
              labelStyle="floating"
              startIcon="lock2"
              passwordToggle={true}
              error={true}
              errorMessage="An error occurred"
              type="password"
              placeholder="With icons and error message"
              label="Password"
            ></Input>
            <Input inputStyle="outline" labelStyle="floating" startIcon="empty" placeholder="Without label"></Input>
            <Textarea
              inputStyle="outline"
              labelStyle="floating"
              startIcon="bubble"
              placeholder="Textarea with left icon"
              label="About me"
            ></Textarea>
            <Dropdown inputStyle="outline" labelStyle="floating" startIcon="plus" endIcon="close">
              <option>Select with icons</option>
              <option value="Opel">Opel</option>
              <option value="Renault">Renault</option>
              <option value="Citroen">Citroen</option>
              <option value="Lotus">Lotus</option>
            </Dropdown>
            <Input inputStyle="outline" labelStyle="floating" type="file" placeholder="Select file..." label="File upload"></Input>
          </div>
        </div>
      </div>
    </div>
  </Page>
);
export default App;
```

## Implementation notes

- `inputStyle` accepts `underline`, `box`, or `outline`; `labelStyle` accepts `stacked`, `inline`, or `floating`. Both options apply uniformly to `Input`, `Textarea`, and `Dropdown` (and to a `type="file"` input, which is just an `Input` variant) and can be combined freely (`data-input-style`/`data-label-style` in JS/jQuery).
- `startIcon`/`endIcon` (`data-start-icon`/`data-end-icon` in JS/jQuery) place an icon inside the field, before or after the value.
- `error` (boolean) applies error styling to a field; `errorMessage` adds explanatory text shown below it.
- `passwordToggle` (boolean), combined with `type="password"`, adds a show/hide toggle control to a password field.
- Omitting the `label` prop/attribute (and its wrapping text in JS/jQuery) renders the field with no label, keeping only its `placeholder`.
- `Dropdown`/`mbsc-dropdown`/`select[mbsc-dropdown]` takes the same `inputStyle`, `labelStyle`, `startIcon`, and `endIcon` options as `Input`; its options are plain `<option>` elements.
- Switching the input/label style dynamically (as this demo's style switcher does) is done by calling `.setOptions({ inputStyle: ... })` / `.setOptions({ labelStyle: ... })` on each field instance in JS/jQuery; in React/Angular/Vue it's done by updating the bound `inputStyle`/`labelStyle` prop value on re-render.
- Framework differences: React `<Input inputStyle="underline" labelStyle="stacked" startIcon="..." error={true} errorMessage="..." passwordToggle={true} label="..." />`; Vue `<MbscInput inputStyle="underline" labelStyle="stacked" startIcon="..." :error="true" :passwordToggle="true" label="..." />`; Angular `<mbsc-input inputStyle="underline" labelStyle="stacked" startIcon="..." error="true" label="...">`; JS/jQuery `<label>Name<input mbsc-input data-input-style="underline" data-label-style="stacked" data-start-icon="..." data-error="true" /></label>`.

## 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: [Field types](https://demo.mobiscroll.com/react/forms/inputs-text-areas-date-fields.md) - React text field input examples with single-, multi-line, masked, reveal password, disabled, error styling.