Layout

Form package provides FormElement and FieldWrapper components that allow creating horizontal and vertical form layouts. They are designed to work with the components from the Label package and any editors.

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

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 edtor, you need to wrap the editor and error messages in div element with k-form-field-wrap CSS class.

Example
View Source
Edit In Stackblitz  
Change Theme:

In this article

Not finding the help you need?