Layout
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.
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 (FormElement 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:
FormElementlevel—Thecolsproperty defines the main grid structure.FormFieldSetlevel—Can define its owncols(internal columns) andcolSpan(how many FormElement columns it spans).Fieldlevel—UsescolSpanto span across columns within its container.
All column-related properties support responsive behavior. For detailed information, see the Responsive Design article.
Setting the Gutters
You can control the space between the form fields using the gutters property of FormElement and FormFieldSet.
The gutters prop accepts:
- A
Guttersobject withrowsandcolskeys (e.g.{ rows: 5, cols: 10 }) - A number — applies to both row and column gaps (in pixels)
- A
ResponsiveFormBreakPointarray for responsive gutters
The following example demonstrates custom gutter configurations.
Vertical Layout
Vertical layout can be enabled by wrapping 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 Layout
Horizontal layout can be enabled by using the setup from the vertical layout and setting 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 div element with k-form-field-wrap CSS class.