< DHTMLX Suite 8.3: Colorpicker Transparency Scale, Extended Functionality of Columns’ Header and Footer in Grid/TreeGrid, and More

React Form Library

Adjustable React form components with a large range of controls, flexible form validation, and rich customization options.
Part of the advanced Suite UI library.

Product Features

  • Cross-browser compatibility
  • Support for IE11+
  • Rich JavaScript API
  • Flexible customization
  • 14 form controls (input, combo, checkbox, etc.)
  • Ability to attach a datepicker, timepicker, and colorpicker
  • Built-in file upload control
  • Multilanguage support
  • Form validation
  • Accessibility support

How to Create Forms in React

The following are 5 simple steps to integrate a basic DHTMLX form with React:
1
Create a Form.js file and import files and styles of Form
2
Create Form class, which extends the Component class
3
Add an empty container for Form with the reference to it in the el property using the ref property
4
When the component is initialized, initialize Form and attach the instance of Form to the container with the reference to it in the el property
5
Specify a set of configuration properties if needed

Why Choose DHTMLX React Form Library

Advanced React form components library

dhtmlxForm is a basic form widget that supports data validation. Our users can arrange labels in a desirable manner, add any number of adjustable controls and organize them in semantic groups (blocks). React form controls include various buttons, checkboxes, combo boxes, input fields, etc. You can also attach other DHTMLX widgets like Slider, TimePicker, ColorPicker, and DatePicker.

Friendly React form validation

A validation API method allows verifying whether the user has filled the form correctly. To validate a form, developers should specify the required fields and apply predefined validation rules to a particular input or text area. Thus, for e.g., your web app will check if a user provides a phone number or email address correctly. You can also add a set of messages to notify users about errors or successful validation.

Rich React JS forms customization

DHTMLX forms allow modifications in the look and feel. By default only the English locale is supported, however, you can apply different languages to the widget interface. Plus, our users have numerous options for styling React form components via CSS. Customize dhtmlxForm by adding new CSS classes with desired settings.

Extra wrappers for Angular and Vue.js

As a part of the Suite UI library, dhtmlxForm component can be smoothly integrated into web apps based not only on React, but also on Angular and Vue.js. Any developer can download a free 30-day trial version and evaluate dhtmlxSuite UI library possibilities along with professional technical support, thorough documentation and samples.

Support & Learning Resources

We provide comprehensive documentation with technical samples. Moreover, our dedicated support team is fast and qualified. Find the suitable way to get support:

Other Suite Components

demo-screenshot

File manager built with the help of Suite components: Layout, Grid, DataView, Toolbar, etc.

Try All UI Components for Free

All UI components for React are part of the dhtmlxSuite library. You can download the free trial version of Suite andbenefit from:

30 days of free evaluation

Official technical support

Full toolkit of 21 components

Compatibility with React, Angular, and Vue.js

Need help with dhtmlxForm integration into your app? Contact us