React Forms Field types Example

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

Get started with this example

Inputs

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

Javascript jQuery Angular React Vue

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

Javascript jQuery Angular React Vue

                        <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 or calendar.

Javascript jQuery Angular React Vue

                        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.

Javascript jQuery Angular React Vue

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

Javascript jQuery Angular React Vue

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