Forms Guideline

We created this Forms Guideline document to help Angular 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:

  • structure horizontal or vertical form layouts
  • separate form components into logical groups with separators
  • handle hint and validation messages
  • automatically display content, based on the state of a form element
  • and many, many more

These examples showcase how to build Angular forms in two ways: with Kendo UI for Angular components and with native HTML elements. As a result, the guidance can be used by anyone. To see any of the examples in action, click on the "Open in StackBlitz" link at the top of each sample.

We hope that you find this guide useful! Now, let's kick things off by diving in to various form controls.

Form Controls

Forms consist of form controls, such as text fields, buttons, checkboxes, range controls, dropdowns, color pickers, etc. Building forms with Kendo UI for Angular allows you to take full advantage of the Angular features and use Kendo components and/or native HTML controls.

Example
View Source
Edit In Stackblitz  
Change Theme:

FormField Component

The FormField enables you to group, align and control form-related content, such as hint and error messages associated with Kendo components or HTML input elements.

The component provides a way to configure the visibility of the hints - HintComponent and errors - ErrorComponent depending on the form-bound control state. See more at the API Reference of the FormField article.

Each kendo-formfield element can contain a single form control element, a label and multiple hint or error messages. The only exception to this rule is а RadioButton group.

The FormField component associates the control and its visible hint and error messages by assigning the aria-describedby attribute to the focusable element. As a result, screen readers will read out the messages when the user focuses the form control, making it easier for assistive technology users to understand what data should be entered.

Inputs

The following example demonstrates Kendo Inputs within a form in action:

Example
View Source
Edit In Stackblitz  
Change Theme:

Checkboxes & RadioButtons

The following example demonstrates Kendo Checkboxes and RadioButtons within a form in action:

Example
View Source
Edit In Stackblitz  
Change Theme:

Uploads

The following example demonstrates Kendo Upload and FileSelect within a form in action:

Example
View Source
Edit In Stackblitz  
Change Theme:

The following example demonstrates Kendo DropDowns within a form in action:

Example
View Source
Edit In Stackblitz  
Change Theme:

DateInputs

The following example demonstrates Kendo DateInputs within a form in action:

Example
View Source
Edit In Stackblitz  
Change Theme:

Readonly & Disabled Controls

Rendering the control in a readonly state makes it immutable and the user cannot edit it. The readonly controls are still responsive to interaction, participate in constraint validation, and can be focused.

Rendering the control in a disabled state makes it immutable. By default, in both Reactive and Template-driven Angular Forms, the disabled form field values are excluded from the FormGroup value object. The disabled controls are not responsive to user interaction and do not participate in constraint validation.

Defining a disabled control in Reactive Angular forms can be accomplished by adding Validator functions directly to the form control model in the component class.

Example
View Source
Edit In Stackblitz  
Change Theme:

Sizing

By default, all form controls nested in a form with .k-form class 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 control 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, providing an increased hit area to activate it.

Labels

The Label component associates a label tag with Angular component by template reference.When the form control is a plain HTML element, a simple ID is used to associate the pair. Additionally, it provides the option to mark it as an “Optional” form field.

Floating Labels

Тhe Floating label is an inline label which moves above the input when the user focuses the form field or enters a value. It looks good and provides better user experience. The resolved animation when moving to the next field gives users a sense of completion.

The FloatingLabel component supports both Template-driven and Reactive Forms and can contain a Kendo UI for Angular Input or an HTML input element.

Example
View Source
Edit In Stackblitz  
Change Theme:

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 our user interface. This will help users complete forms faster.

Both the Label and FloatingLabel components have an optional Boolean property. When set to true, it renders the text “(Optional)” inside the label element of the form control. The text is customizable via custom messages or the Angular i18n framework. Refer to the article on Globalization for further details and runnable demos.

Example
View Source
Edit In Stackblitz  
Change Theme:

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 control. 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.

Example
View Source
Edit In Stackblitz  
Change Theme:

Validation

We use form validation to make sure the users provide correct information in terms of format, content length, etc. For example, is the Email in actual email format, did the user put info in all of the required fields, and so on.

How it Works?

Kendo UI for Angular components support handling user input in the UI and display useful validation messages using both Reactive and Template-driven Angular forms. The validation rules refer to specific checks, managed client-side. Server-side validation is not handled by the components, but is still an essential part of the application security, and should be addressed by the developer.

Field-level 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 control are usually not shown until specific user interaction. There are several common factors when to display a validation message:

  • The control was editeddirty
  • The control was blurredtouched
  • AlwaysShow error messages regardless of user interaction

The FormField component enables you to control when and how validation messages will be shown in compliance with the Angular form validation guide.

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 and should be shown one field at a time.

Example
View Source
Edit In Stackblitz  
Change Theme:

Form-level Validation

Form-level validation is the process of validating all fields in a form at once. It is usually called 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 the validation errors in a single place. You can also use it to display complex validation messages. This approach can be useful when dealing with large forms, especially if the form contains parts that are temporarily hidden.

Example
View Source
Edit In Stackblitz  
Change Theme:

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 Kendo components are 100% wide when placed inside a kendo-formfield. As a result, kendo forms are stacked vertically.

To make a horizontal form layout and position form controls along with their labels on the same row, assign the k-form-horizontal class to the form element and set the orientation property of the FormField to horizontal.

Example
View Source
Edit In Stackblitz  
Change Theme:

Groups & Separators

Grouping form controls in a meaningful way makes for a cleaner and more concise form content. The legend and fieldset elements can be used to show a relation between form controls, 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 long forms easier to handle. To add a separator, add the k-form-separator class on a span element.

Example
View Source
Edit In Stackblitz  
Change Theme:

Form Buttons

By default, the 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.

Example
View Source
Edit In Stackblitz  
Change Theme: