All Components

Forms Overview

Kendo UI for Angular provides comprehensive support for building forms.

Forms Support by Components

The following components fully integrate with the Angular Reactive and Template-Driven Forms.

Styling of Forms

The following example demonstrates the default styling of forms in action.

<div class="row example-wrapper">
    <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
        <div class="card">
            <div class="card-block">
                <form class="k-form">
                    <fieldset>
                        <legend>User Details</legend>

                        <label class="k-form-field">
                            <span>First Name</span>
                            <input class="k-textbox" placeholder="Your Name" />
                        </label>
                        <label class="k-form-field">
                            <span>Last Name</span>
                            <input class="k-textbox" value="Batista" placeholder="Your Last Name" />
                        </label>
                        <div class="k-form-field">
                            <span>Gender</span>

                            <input type="radio" name="gender" id="female" class="k-radio">
                            <label class="k-radio-label" for="female">Female</label>

                            <input type="radio" name="gender" id="male" class="k-radio" checked="checked">
                            <label class="k-radio-label" for="male">Male</label>
                        </div>
                        <label class="k-form-field">
                            <span>Email <span class="k-required">*</span></span>
                            <input type="email" class="k-textbox" value="bernardo.batista@progress.com" placeholder="Your Email" />
                        </label>
                        <label class="k-form-field">
                            <span>Company<span class="k-field-info">optional</span></span>
                            <input class="k-textbox" placeholder="Your Company" />
                        </label>
                    </fieldset>

                    <fieldset>
                        <legend>Credentials</legend>
                        <label class="k-form-field">
                            <span>Username</span>
                            <input class="k-textbox" value="bbatista" placeholder="Your username" />
                        </label>
                        <label class="k-form-field">
                            <span>Password</span>
                            <input type="password" class="k-textbox" value="123456" placeholder="Your password"/>
                        </label>
                        <label class="k-form-field">
                            <input type="checkbox" id="auth-2fa" class="k-checkbox" checked="checked">
                            <label class="k-checkbox-label" for="auth-2fa">Enable two-factor authentication</label>
                        </label>
                    </fieldset>

                    <div class="text-right">
                      <button type="button" class="k-button">Cancel</button>
                      <button type="button" class="k-button k-primary">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

Basic and Inline Forms

To get the width of its elements stretched to 100%, use the k-form class against a <form> element. To make its label and input elements render on the same row, use the k-form-inline class against a <form> element. To add a space after the separate sections in a form, use the k-form-field class.

<div class="row example-wrapper">
    <div class="col-xs-12 col-sm-6 example-col">
        <p>.k-form</p>
        <div class="card">
            <div class="card-block">
                <form class="k-form">
                    <label class="k-form-field">
                        <span>First Name</span>
                        <input class="k-textbox" placeholder="Your Name" />
                    </label>
                    <label class="k-form-field">
                        <span>Last Name</span>
                        <input class="k-textbox" placeholder="Your Last Name" />
                    </label>
                </form>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-6 example-col">
        <p>.k-form-inline</p>
        <div class="card">
            <div class="card-block">
                <form class="k-form-inline">
                    <label class="k-form-field">
                        <span>First Name</span>
                        <input class="k-textbox" placeholder="Your Name" />
                    </label>
                    <label class="k-form-field">
                        <span>Last Name</span>
                        <input class="k-textbox" placeholder="Your Last Name" />
                    </label>
                </form>
            </div>
        </div>
    </div>
</div>

Required Fields and Field info

The Kendo UI forms provide styling options for rendering additional information to the user. For example, if the field input is required or optional.

To add additional information about the field, use the k-field-info class. To highlight that the user input is mandatory, use the k-required class. Use the classes together to describe the field and highlight its description.

<form class="k-form">
    <label class="k-form-field">
        <span>
          Required field <span class="k-required">*</span>
        </span>
        <input class="k-textbox" placeholder="Your Name" />
    </label>

    <label class="k-form-field">
        <span>
          Field info<span class="k-field-info">optional</span>
        </span>
        <input class="k-textbox" placeholder="Your Company" />
    </label>

    <label class="k-form-field">
        <span>
          Required field with field info<span class="k-field-info k-required">required</span>
        </span>
        <input class="k-textbox" placeholder="Your PIN" />
    </label>
</form>

Form Elements

The Kendo UI themes provide styles for the following form elements:

Button

The <button> and <a> HTML elements can be styled with the k-button class to look like Kendo UI buttons, without the kendoButton directive. To apply primary styling, use the k-primary class.

<button class="k-button">Regular button</button>
<br />
<button class="k-button k-primary">Primary button</button>

FieldSet

The <fieldset> HTML element is styled automatically when used inside a <form> with the class k-form or k-form-inline.

<form class="k-form">
    <fieldset>
        <legend>User Details</legend>

        <label class="k-form-field">
            <span>First Name</span>
            <input class="k-textbox" placeholder="Your Name" />
        </label>
        <label class="k-form-field">
            <span>Last Name</span>
            <input class="k-textbox" placeholder="Your Last Name" />
        </label>
    </fieldset>
</form>

TextBox

To set the color for the border, text, and background, use the k-textbox class on a regular <input> element. The class provides the same look and height as the look and height of the Kendo UI Inputs, DropDowns, and DateInputs components for Angular.

<input class="k-textbox" value="Batista" />

TextArea

To set the color for the border, minimum height, text, and background, use the k-textarea class on a <textarea> element. The class provides a similar appearance to match the rest Kendo UI components for Angular.

<textarea class="k-textarea">
Lorem Ipsum is simply dummy text.
</textarea>

CheckBoxes

Kendo UI themes provide customized appearance for checkboxes through the k-checkbox class. The styles rely that the <input> element is immediately followed by a <label> element with the k-checkbox-label class.

<form class="k-form">
    <div class="k-form-field">
        <input type="checkbox" id="ch1" class="k-checkbox" checked />
        <label class="k-checkbox-label" for="ch1">Checkbox 1</label>

        <input type="checkbox" id="ch2" class="k-checkbox" checked disabled />
        <label class="k-checkbox-label" for="ch2">Checkbox 2</label>

        <input type="checkbox" id="ch3" class="k-checkbox">
        <label class="k-checkbox-label" for="ch3">Checkbox 3</label>
    </div>
</form>

RadioButtons

Kendo UI themes provide customized appearance for checkboxes through the k-radio class. The styles rely that the <input> element is immediately followed by a <label> element with the k-radio-label class.

<form class="k-form">
    <div class="k-form-field">
       <input type="radio" name="group" id="radio1" class="k-radio" checked />
       <label class="k-radio-label" for="radio1">RadioButton 1</label>

       <input type="radio" name="group" id="radio2" class="k-radio" disabled />
       <label class="k-radio-label" for="radio2">RadioButton 2</label>

       <input type="radio" name="group" class="k-radio" id="radio3" />
       <label class="k-radio-label" for="radio3">RadioButton 3</label>
    </div>
</form>
In this article