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>

<div class="k-file-input-container">
    <div class="k-file-input">
        <input class="k-js-file-input" type="file" id="input-styled-file-input-1" data-multiple-caption="{count} files selected" multiple />
        <label for="input-styled-file-input-1">
            <span class="k-file-input__button">
                <span class="k-icon-data-transfer-upload" aria-hidden="true"></span>
                Choose a file&hellip;
            </span>
            <span class="k-file-input__files"></span>
        </label>
    </div>
</div>

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