Form elements
/scss/main/_variables.scss
/scss/controls/*.scss

Form elements (plain CSS)

Loader (plain CSS)

<div class="loader load"></div>

Checkbox

<div class="checkbox">
	<label>
		<input type="checkbox" value="1" checked>
		<span class="check"></span>
		Checked checkbox
	</label>
</div>

<div class="checkbox">
	<label>
		<input type="checkbox" value="1" checked disabled>
		<span class="check"></span>
		Disabled checked
	</label>
</div>

<div class="checkbox">
	<label>
		<input type="checkbox" value="1" disabled>
		<span class="check"></span>
		Disabled unchecked
	</label>
</div>
<div class="switch">
	<label>
		<input type="checkbox" value="1" checked>
		<span class="toggle"></span>
		Checked switch
	</label>
</div>

<div class="switch">
	<label>
		<input type="checkbox" value="1" checked disabled>
		<span class="toggle"></span>
		Disabled checked
	</label>
</div>

<div class="switch">
	<label>
		<input type="checkbox" value="1" disabled>
		<span class="toggle"></span>
		Disabled unchecked
	</label>
</div>

Radio button

<div class="radio">
	<label>
		<input name="radio1" type="radio" checked>
		<span class="circle"></span>
		Checked radio
	</label>
</div>

<div class="radio">
	<label>
		<input name="radio1" type="radio">
		<span class="circle"></span>
		Unchecked radio
	</label>
</div>

<div class="radio">
	<label>
		<input name="radio2" type="radio" checked disabled>
		<span class="circle"></span>
		Disabled checked radio
	</label>
</div>

<div class="radio">
	<label>
		<input name="radio2" type="radio" disabled>
		<span class="circle"></span>
		Disabled unchecked radio
	</label>
</div>

Simple input

<div class="form-group">
	<label>Label text <sup>*</sup></label>
	<input class="full" type="text" placeholder="Placeholder">
</div>

<div class="form-group">
	<label>Label text <sup>*</sup></label>
	<input class="default full" type="text" placeholder="Placeholder">
</div>

Simple inverted input

<div class="form-group">
	<label>Label text <sup>*</sup></label>
	<input class="transparent full" type="text" placeholder="Placeholder">
</div>
<div class="form-group">
	<label>Label text <sup>*</sup></label>
	<input class="mtr white full" type="text" placeholder="Placeholder">
</div>

Material effects

<div class="form-group">
	<label>Animated underline <sup>*</sup></label>
	<input class="mtr full" type="text" placeholder="Placeholder">
</div>

<!-- JS required -->
<div class="form-group floating-label">
	<label>Floating label</label>
	<input class="full mtr" type="text">
</div>

With error

Field is required
Field is required
<div class="form-group has-error">
	<label>Label text<sup>*</sup></label>
	<input class="full" type="text" placeholder="Placeholder">
	<div class="help-block error-msg">Field is required</div>
</div>

<div class="form-group has-error">
	<label>Label text<sup>*</sup></label>
	<input class="default full" type="text" placeholder="Placeholder">
	<div class="help-block error-msg">Field is required</div>
</div>

With icon

<div class="form-group">
	<label>Label text</label>
	<div class="input-icon">
		<input class="full" type="text" placeholder="Placeholder">
		<i class="icon mdi mdi-calendar"></i>
	</div>
</div>

<div class="form-group">
	<label>Label text</label>
	<div class="input-icon input-icon-aside">
		<input class="full" type="text" placeholder="Placeholder">
		<i class="icon mdi mdi-calendar"></i>
	</div>
</div>

<div class="form-group">
	<label>Label text</label>
	<div class="input-icon default">
		<input class="default full" type="text" placeholder="Placeholder">
		<i class="icon mdi mdi-calendar"></i>
	</div>
</div>

<div class="form-group">
	<label>Label text</label>
	<div class="input-icon icon-left default">
		<input class="default full" type="text" placeholder="Placeholder">
		<i class="icon mdi mdi-calendar"></i>
	</div>
</div>

Disabled input

<div class="form-group">
	<label>Label text</label>
	<input class="full" type="text" placeholder="Disabled" disabled>
</div>

<div class="form-group">
	<label>Label text</label>
	<input class="default full" type="text" placeholder="Disabled" disabled>
</div>

Simple select

<div class="form-group">
	<label>Label text</label>
	<select class="full">
		<option value="">First</option>
		<option value="">Second</option>
		<option value="">Third</option>
	</select>
</div>

<div class="form-group">
	<label>Label text</label>
	<select class="default full">
		<option value="">First</option>
		<option value="">Second</option>
		<option value="">Third</option>
	</select>
</div>

Textarea

<div class="form-group">
	<label>Label text</label>
	<textarea class="full" rows="3" placeholder="Placeholder"></textarea>
</div>

<div class="form-group">
	<label>Label text</label>
	<textarea class="default full" rows="3" placeholder="Placeholder"></textarea>
</div>

Inline group

Add new
Add new 
<div class="form-group form-group-inline">
	<select class="">
		<option value="" selected disabled>Select option</option>
		<option value="">Option</option>
	</select>
	<a href="#" class="btn btn-mt btn-success ripple">Add new</a>
</div>

<div class="row">
	<div class="col-md-8">
		<div class="form-group">
			<label>Label text <sup>*</sup></label>
			<input class="full" type="text" placeholder="Placeholder">
		</div>
	</div>
	<div class="col-md-4">
		<div class="form-group no-label">
			<a href="#" class="btn btn-mt btn-success ripple">Add new</a>
		</div>
	</div>
</div>

Sizes

JavaScript required

Fileinput

Choose file 
<div class="form-group">
	<label>File input</label>
	<span class="fileinput full">
		<input type="file" name="upload">
		<input type="text" name="filename" placeholder="Выберите файл">
	</span>
</div>

<div class="form-group">
	<label>File input</label>
	<div class="row fileinput-btn">
		<div class="col-xs-8">
			<input type="text" class="full" name="filename" placeholder="Выберите файл" readonly>
		</div>
		<div class="col-xs-4">
			<div class="btn btn-primary full">
				<input type="file" name="upload">
				Choose file
			</div>
		</div>
	</div>
</div>

Select autocomplete

<div class="form-group">
	<label>Label text</label>
	<select name="country" class="imf-select full" data-search-placeholder="Search..." placeholder="Select country...">
		<!-- repeat -->
		<option value="value">Name</option>
		<!-- /repeat -->
	</select>
</div>
<div class="form-group">
	<label>Label text</label>
	<select name="country" class="imf-select default full" data-search-placeholder="Search..." placeholder="Select country..." data-show-search="false">
		<!-- repeat -->
		<option value="value">Name</option>
		<!-- /repeat -->
	</select>
</div>
<div class="form-group">
	<label>Label text</label>
	<select name="country" class="imf-select full" data-search-placeholder="Search..." placeholder="Select country..." multiple>
		<!-- repeat -->
		<option value="value">Name</option>
		<!-- /repeat -->
	</select>
</div>
<div class="form-group">
	<label>Label text</label>
	<select name="country" class="imf-select default full" data-search-placeholder="Search..." placeholder="Select country..." multiple>
		<!-- repeat -->
		<option value="value">Name</option>
		<!-- /repeat -->
	</select>
</div>