Inputs & fields for React
General purpose input fieds, text areas and select controls for single- and multi-line text input. Use typed fields for date, number input with native controls or advanced Mobiscroll UI components.
Provide platform specific look and feel for the web, mobile and desktop apps.
With useful features and rendering modes for any use-case:
- Single and multiline text
- Select styling
- Disabled styling
- Error messages and validation support
- Inline, stacked and floating labels
- Standard, box and outline input variants
- Inset fields
Interested in form controls? Other demos that could be useful:
Input demos available for other frameworks.
Viewing demos & code for
Inputs & fields - Text Fields
Use the input styling in desktop and mobile webapps/websites. The inputs feature three styles:
- Underline
- Box
- Outline
Besides that, you can pick from three label types: inline, stacked and floating labels.
Explore the different input types and label positioning 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.
Inputs & fields - Date fields
Use the input styling for date fields. Use it with an in-browser picker, like input type="date" or any date picker component.
For advanced functionality take a look at the customizable calendar, date scroller and numpad.
Inputs & fields - Number fields
Use the same consistent input styling for numeric fields. You can set input type="number" or use any of the customizable pickers, like the
numeric keypad, number scroller or measurement controls.
Inputs & fields - Select
Use the form field/input styling with the native html select or the customizable single and multiselect dropdown/scroller component. Icons, error and disabled styling is supported out of the box.
Inputs & fields - Input types
Inputs & fields - Label types
Looking for something you didn't see or have a sales question?
Ask us about it, we're here to help.