KendoReact Form LayoutPremium
The Form component provides comprehensive layout control to create professional, user-friendly forms. You can arrange form fields using a flexible grid system, control spacing, choose label orientations, and organize content with groupings and separators.
With form layouts, you can transform basic single-column forms into sophisticated, responsive, and user-friendly interfaces that adapt to your content and users' needs. You can use the available layout capabilities to create various forms—from compact registration forms and multi-section data entry screens, to mobile-friendly surveys.
Multi-Column Layout
The column system uses CSS Grid and involves two key properties working together:
cols—Sets the number of columns in a container (Form or FormFieldSet)colSpan—Controls how many columns an element spans (FormFieldSet or Field)
The following example demonstrates the column system with Form, FormFieldSet, and Field components working together.
The column system works hierarchically as follows:
Formlevel—The Form'scolsproperty defines the main grid structure.FormFieldSetlevel—Can define its owncols(internal columns) andcolSpan(how many Form columns it spans).Fieldlevel—UsescolSpanto span across columns within its container.
All column-related properties (cols and colSpan) support responsive behavior that adapts to different screen sizes. For detailed information on creating responsive layouts, see the Form Responsiveness documentation.
Setting the Gutters
You can control the space between the form fields using the Form's gutters and FormFieldSet's gutters properties.
The gutters can be set to any of the following options:
- Fixed pixels—Set a fixed gutter size by providing a number that represents the size in pixels.
- Responsive pixels—Allowing you to set gutters that adapt to different screen sizes. See the Form Responsiveness documentation article.
The following example demonstrates the supported gutter configurations in the Form component.
Setting the Orientation
The KendoReact Form package provides the FormElement and FieldWrapper components that allow creating horizontal and vertical form orientations. They are designed to work with the components from the Label package and any editors.
Vertical Orientation
To enable vertical orientation, wrap the form content inside the FormElement component and each of the editors inside the FieldWrapper component. The following example uses the components from the Labels package to enhance the editor with label, error, and hint texts.
Horizontal Orientation
Horizontal orientation can be enabled by using the setup from the vertical orientation and setting the horizontal option of the FormElement component to true. Additionally, if you use the Label component to label the edtor, you need to wrap the editor and error messages in a div element with the k-form-field-wrap CSS class.