Form

<p> <input class="k-form-control" type="text" /> </p> <p> <select class="k-form-control"> <option>Option</option> </select> </p> <p> <textarea class="k-form-control"></textarea> </p>

<div class="k-form-group"> <input type="checkbox" id="input-1" /> <label for="input-1">Label 1</label> </div> <div class="k-form-group"> <input type="radio" id="input-2" /> <label for="input-2">Label 2</label> </div> <div class="k-form-group"> <label><input type="checkbox" id="input-3" /> Label 1</label> </div> <div class="k-form-group"> <label><input type="radio" id="input-4" /> Label 2</label> </div>

<div class="k-form-group k-has-success"> <label for="input-k-has-success">Default input</label> <input class="k-form-control" type="text" id="input-k-has-success" /> </div> <div class="k-form-group k-has-warning"> <label for="input-k-has-warning">Default input</label> <input class="k-form-control" type="text" id="input-k-has-warning" /> </div> <div class="k-form-group k-has-error"> <label for="input-k-has-error">Default input</label> <input class="k-form-control" type="text" id="input-k-has-error" /> </div>

<p class="k-static-form-label">Static form control</p>

<div class="k-input-group"> <label for="input-k-input-group-1" class="k-input-group__addon">Addon</label> <input class="k-form-control" type="text" id="input-k-input-group-1" /> <div class="k-input-group__button"> <button type="button" class="k-button k-button--default">Button</button> </div> </div> <div class="k-input-group k-input-group--small"> <label for="input-k-input-group-2" class="k-input-group__addon">Addon</label> <input class="k-form-control" type="text" id="input-k-input-group-2" /> <div class="k-input-group__button"> <button type="button" class="k-button k-button--default">Button</button> </div> </div> <div class="k-input-group k-input-group--large"> <label for="input-k-input-group-3" class="k-input-group__addon">Addon</label> <input class="k-form-control" type="text" id="input-k-input-group-3" /> <div class="k-input-group__button"> <button type="button" class="k-button k-button--default">Button</button> </div> </div>

<div class="k-form-group"> <label for="input-form-group-1">Label</label> <input class="k-form-control" type="text" id="input-form-group-1" /> </div> <div class="k-form-group k-form-group--small"> <label for="input-form-group-2">Label</label> <input class="k-form-control" type="text" id="input-form-group-2" /> </div> <div class="k-form-group k-form-group--large"> <label for="input-form-group-3">Label</label> <input class="k-form-control" type="text" id="input-form-group-3" /> </div>

<div class="k-inline-form-group"> <label for="input-inline-form-group-1">Label</label> <input class="k-form-control" type="text" id="input-inline-form-group-1" /> </div> <div class="k-inline-form-group"> <p class="k-static-form-label">Label 1</p> <div class="k-button-group"> <button type="button" class="k-button k-button--default k-button--tiny"> <span class="k-icon-plus" aria-hidden="true"></span> <span class="k-visually-hidden">Plus icon</span> </button> <button type="button" class="k-button k-button--default k-button--tiny"> <span class="k-icon-minus" aria-hidden="true"></span> <span class="k-visually-hidden">Minus icon</span> </button> </div> </div>

<div class="k-form-row-group"> <form class="k-form-row"> <div class="k-form-row__item k-form-row__item--button"> <button class="k-button k-button--default k-button--small"> <span class="k-icon-minus k-icon--error" aria-hidden="true"></span> <span class="k-visually-hidden">Remove</span> </button> </div> <div class="k-form-row__item k-form-row__item--label"> <label for="input-form-row-group-1">File name:</label> </div> <div class="k-form-row__item k-form-row__item--input"> <input class="k-form-control" type="text" id="input-form-row-group-1" value="{value}" disabled="" /> </div> <div class="k-form-row__item k-form-row__item--label"> <label for="input-form-row-group-2">Title:</label> </div> <div class="k-form-row__item k-form-row__item--input"> <input class="k-form-control" type="text" id="input-form-row-group-2" name="title" value="{value}" /> </div> </form> <form class="k-form-row"> <div class="k-form-row__item k-form-row__item--button"> <button class="k-button k-button--default k-button--small"> <span class="k-icon-minus k-icon--error" aria-hidden="true"></span> <span class="k-visually-hidden">Remove</span> </button> </div> <div class="k-form-row__item k-form-row__item--label"> <label for="input-form-row-group-3">File name:</label> </div> <div class="k-form-row__item k-form-row__item--input"> <input class="k-form-control" type="text" id="input-form-row-group-3" value="{value}" disabled="" /> </div> <div class="k-form-row__item k-form-row__item--label"> <label for="input-form-row-group-4">Title:</label> </div> <div class="k-form-row__item k-form-row__item--input"> <input class="k-form-control" type="text" id="input-form-row-group-4" name="title" value="{value}" /> </div> </form> </div>

<form class="k-form-row"> <div class="k-form-row__item k-form-row__item--button"> <button class="k-button k-button--default k-button--small"> <span class="k-icon-minus k-icon--error" aria-hidden="true"></span> <span class="k-visually-hidden">Remove</span> </button> </div> <div class="k-form-row__item k-form-row__item--label"> <label for="input-form-row-1">File name:</label> </div> <div class="k-form-row__item k-form-row__item--input"> <input class="k-form-control" type="text" id="input-form-row-1" value="{value}" disabled="" /> </div> <div class="k-form-row__item k-form-row__item--label"> <label for="input-form-row-2">Title:</label> </div> <div class="k-form-row__item k-form-row__item--input"> <input class="k-form-control" type="text" id="input-form-row-2" name="title" value="{value}" /> </div> </form>

<p class="k-form-info">
    Addition info to add to the above field
</p> <div class="k-form-group"> <label for="input-form-field-info-1">Label</label> <input class="k-form-control" type="text" id="input-form-field-info-1" /> <p class="k-form-info">
        Addition info to add to the above field
    </p> </div>