Vue 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

                        <MbscInput label="Label" placeholder="Text field label" />
<MbscInput
  label="Password"
  type="password"
  placeholder="Password field with icon"
  startIcon="lock2"
/>
<MbscInput
  label="Password Toggle"
  type="password"
  placeholder="Password field with icon"
  startIcon="lock2"
  :passwordToggle="true"
/>
<MbscInput placeholder="Text field with right icon" endIcon="pencil" />
<MbscInput placeholder="Text field disabled" :disabled="true" />
<MbscInput placeholder="Text field with error style" :error="true" />
<MbscInput
  placeholder="Text field with error style and message"
  :error="true"
  errorMessage="Error message!"
/>
<MbscInput 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

                        <MbscTextarea label="Label" />
<MbscTextarea endIcon="pencil" />
<MbscTextarea label="Label" startIcon="bubble" />
<MbscTextarea placeholder="disabled" :disabled="true" />
<MbscTextarea :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

                        <MbscInput type="date" label="Date field" placeholder="Please Select..." />
<MbscDatepicker :controls="['calendar']" label="Calendar" placeholder="Please Select..." />
<MbscDatepicker :controls="['date']" label="Date scroller" placeholder="Please Select..." />
                

Numeric fields

Use it with native numeric inputs.

Javascript jQuery Angular React Vue

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

                        <MbscDropdown 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>
</MbscDropdown>
<MbscDropdown 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>
</MbscDropdown>
<MbscDropdown 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>
</MbscDropdown>
<MbscDropdown :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>
</MbscDropdown>
<MbscDropdown :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>
</MbscDropdown>
                