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>
Checkbox & radio input
CSS only styled checkboxes and radio boxes
<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>
Feedback states
<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>
Static form label
Styled like a <label>
Static form control
<p class="k-static-form-label">Static form control</p>
Input group
<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>
Form group
<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>
Inline form group
Label 1
<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>
Form row group
<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 row
<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>
Form field info
Additional info to add to the bottom of form fields
Addition info to add to the above field
Addition info to add to the above field
<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>
Need Help?
Let our developers personally assist you. You can ask development related questions in our Support Center. Only for Business or Agency subscribers.