Additionally, it provides the option to mark it as an Optional form field. When the form control is a plain HTML element, a simple ID is used to associate the pair. The Label component associates a label tag with an Angular component by a template reference.
Additionally, on label click, the form element will receive focus, providing an increased hit area to activate it. Assistive technologies will read the label content when the form element is focused. Labels are associated with form control elements not only visually, but also programmatically. k-form class will take 100% of the width of their parent element, except for the ColorPicker, Switch, and Slider components. The following example demonstrates Kendo Inputs within a form in action.īy default, all form controls nested in a form with the. As a result, screen readers can read out the messages when the user focuses the form control, making it easier for assistive technology users to understand what data has to be entered. The FormField component associates the control and its visible hint and error messages by assigning the aria-describedby attribute to the focusable element. The only exception to this rule is а RadioButton group. For more information, refer to the API Reference of the FormField article.Įach kendo-formfield element can contain a single form control element, a label, and multiple hint or error messages. The component provides a way to configure the visibility of the hints through HintComponent, and errors through ErrorComponent depending on the form-bound control state. 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.
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. Form Controlsįorms consist of form controls, such as text fields, buttons, checkboxes, range controls, dropdowns, color pickers, and so on. To see any of the examples in action, click the Open in StackBlitz link at the top of each sample. As a result, the guidance can be used by anyone.
The included examples showcase how to build Angular forms in two ways: with Kendo UI for Angular components and with native HTML elements.
New to Kendo UI for Angular? Start a free 30-day trial Forms Guideline