React Form GuidelinesPremium
We created this Form Guidelines document to help React developers build gorgeous and functional forms. The knowledge we are sharing here comes from years of experience with building forms, interacting with other developers building forms, and keeping up with industry best practices.
Some concepts that we cover include how to structure horizontal or vertical form layouts, how to handle form validation, how to automatically display content based on the state of a form element, and many, many more.
These examples showcase how to build forms not only with KendoReact components, but also with native HTML elements, so the guidance provided here can be used by anyone.
We hope that you will find this guide useful! Now, let's kick things off by diving into various form controls.
Form Components
Forms consist of form components (such as inputs, buttons, checkboxes, dropdowns, color pickers), their labels, hints and error messages. KendoReact provides comprehensive support for building forms with the Form, and Labels packages. In this article we share valuable best practices.
Here’s an example of the Form and Labels packages in action, so you can get an idea of how they work.
KendoReact Form Package
The React Form package provides components for form state management, form validation and form layout creation. For form state management, the Form package uses the following components:
Form componentandFormRenderPropsinterface.Field componentandFieldRenderPropsinterface.FieldArray componentandFieldArrayRenderPropsinterface.
For creating form layouts, the Form package provides following components:
FormElement componentenables creating horizontal and vertical form layouts. It's designed to work with theFieldWrappercomponent, components from theLabelspackage and any editor.FieldWrapper componentenable you to group, align, and control form-related content, such as KendoReact components, or HTML input elements.
Except for components representing a group (such as radio buttons), each
FieldWrappercomponent can contain a single component element, a label, and multiple hint or error messages.
React Form Inputs
The following example demonstrates the KendoReact Inputs within a form in action:
Checkboxes & RadioButtons
The following example demonstrates the KendoReact Checkbox and RadioGroup components within a form in action:
Uploads
The following example demonstrates the KendoReact Upload within a form in action:
DropDowns
The following example demonstrates the KendoReact DropDowns within a form in action:
DateInputs
The following example demonstrates the KendoReact DateInputs within a form in action:
Sizing
By default, all form components nested in a FormElement will take 100% of their parent element’s width, except for the ColorPicker, Switch and Slider components.
Labeling
Labels are not just visually associated with form elements, but programmatically as well. Assistive technologies will read the label content when the form element is focused. Additionally, on label click, the form element will receive focus and click, providing an increased hit area to activate it.
Labels
The Label component associates a label with a component using its props. When the form component is a plain HTML element or simple component like Input, only the editorId prop of the Label and id prop of the editor is used to associate the pair. For complex components without a form element, additional properties are required to enable screen readers to correctly read the label, forward the focus, and click events. Refer to the Label overview for further details and runnable demos.
Floating Labels
Тhe FloatingLabel is an inline label that moves above the input when the user focuses the form field or enters a value. One of its benefits is that it looks good, and the resolved animation when moving to the next field gives users a sense of completion.
Optional Labels
The way we visualize a form field has a strong implication for how users perceive and complete forms. As an example, instead of marking every field as required, you can only mark the optional fields. This results in less visual noise, since there will be fewer red marks across your user interface. This will lead to users completing the form faster.
Both the Label and FloatingLabel components have an optional Boolean property. When set to true, it renders “(Optional)” text inside the label element of the form component. The text is localizable via the KendoReact Localization package. Refer to the article on Globalization for further details and runnable demos.
Placeholder Texts
The placeholder text typically has a lighter color treatment to indicate that it is a suggestion for what kind of input will be valid.
Hint Messages
Hint messages provide additional context about the expected value of a form component. For example, in a registration form where users have to provide a password containing at least 3 characters, a hint message aligned under the input could avoid any confusion. To associate the Hint message with the editor for screen readers, set the id property of the component to the ariaDescribedBy property of the editor.
React Form Validation
We use form validation to make sure that users provide correct information in terms of format, content length, etc. For example, is the phone number an actual number, did the user put info in all of the required fields, and so on.
How it Works?
KendoReact supports handling user input in the UI, and displays useful validation messages using the Form, Field, and Error components. Refer to the article on form validation for further details and runnable demos.
Field-level Form Validation
Field-level validation ensures that the value entered in the field is in accordance with the application requirements. If the validation rules are not satisfied, error messages for each field are displayed.
To keep the form UI clean, the error messages of an invalid component are usually not shown until specific user interaction. There are several states of the edited field which can be used to display a validation message:
- The component was edited—
modifiedstate - The component was focused—
visitedstate - The component was blurred—
touchedstate - Aways—Show error messages regardless of user interaction
The Field component and its FieldRenderProps enable you to control when and how validation messages are shown.
Error Messages
For instant validation, error messages are the best way to alert users that they have made a mistake while filling out a form. Applying only error-specific styles does not convey enough information about what the user should do to provide valid data. Error messages should specify exactly why the user input is not accepted. Error messages for different fields should appear one by one. KendoReact provides an Error component for that use. To associate it with the editor for screen readers, set the id property of the component to the ariaDescribedBy property of the editor.
Form-level Validation
Form-level validation is used to show validation summary of all fields or complex validation constraints between several fields. It is usually shown when the user is ready to proceed to another step or clicks the Submit button.
Validation Summary
The validation summary displays a list of all validation errors in a single place. You can also use it to display complex validations messages. This approach can be useful when dealing with large forms, especially if the form contains parts that are temporarily hidden.
Read-only & Disabled Components
Rendering the component in a readonly state makes it immutable and the user cannot edit it. The read-only components are still responsive to interaction, participate in constraint validation, and can be focused.
Rendering the component in a disabled state makes it immutable. The disabled components are not responsive to user interaction and do not participate in constraint validation.
Defining a disabled component can be accomplished in KendoReact components by adding disabled property. Making the component readonly can done via readonly property of the component.
Form Layout
When it comes to filling out a form, users want to move through it as quickly as possible without having to overthink anything. A great form layout leads to seamless completion and improves the speed of the submission process. Using a single-column layout has been shown to result in significantly better user understanding, fewer errors and higher overall rates of conversion.
Horizontal & Vertical
By default, most KendoReact components are 100% wide when placed inside the FieldWrapper. As a result, components inside KendoReact FormElement are stacked vertically.
To make a horizontal form layout and position form components along with their labels on the same row, set the horizontal option of the FormElement component to true. Additionally, if you use the Label component to label the editor, you need to wrap the editor and error messages in a div element with a k-form-field-wrap CSS class.
Groups & Separators
Grouping form components in a meaningful way makes for a cleaner and more concise form content. Using the legend and fieldset structures allows showing a relation between form components, which is especially useful when it comes to large and complex forms.
Separators add a line break to the layout and improve the form conversion rate. The separation of sections allows you to make compound forms more approachable. To add a separator, add the k-form-separator class on a span element.
Form Buttons
By default, the buttons placed inside div elements with k-form-buttons are aligned to the left side of the form. Adding the k-buttons-end class to the buttons' wrapper element allows positioning them on the right.