Form Elements

<!-- no layout applied -->
<label class="switch switch switch-round">
	<input type="checkbox" checked="">
	<span class="switch-label" data-on="YES" data-off="NO"></span>
	<span> Subscribe to our newsletter?</span>
</label>

	
	
<!-- primary -->
<label class="switch switch-primary switch-round">
	<input type="checkbox" checked="">
	<span class="switch-label" data-on="YES" data-off="NO"></span>
</label>

<!-- success -->
<label class="switch switch-success switch-round">
	<input type="checkbox" checked="">
	<span class="switch-label" data-on="YES" data-off="NO"></span>
</label>

<!-- danger -->
<label class="switch switch-danger switch-round">
	<input type="checkbox" checked="">
	<span class="switch-label" data-on="YES" data-off="NO"></span>
</label>

<!-- warning -->
<label class="switch switch-warning switch-round">
	<input type="checkbox" checked="">
	<span class="switch-label" data-on="YES" data-off="NO"></span>
</label>

<!-- info -->
<label class="switch switch-info switch-round">
	<input type="checkbox" checked="">
	<span class="switch-label" data-on="YES" data-off="NO"></span>
</label>

<!-- default -->
<label class="switch switch-default switch-round">
	<input type="checkbox" checked="">
	<span class="switch-label" data-on="YES" data-off="NO"></span>
</label>

<!-- no layout applied -->
<label class="switch switch">
	<input type="checkbox" checked="">
	<span class="switch-label" data-on="YES" data-off="NO"></span>
	<span> Subscribe to our newsletter?</span>
</label>



<!-- primary -->
<label class="switch switch-primary">
	<input type="checkbox" checked="">
	<span class="switch-label" data-on="YES" data-off="NO"></span>
</label>

<!-- success -->
<label class="switch switch-success">
	<input type="checkbox" checked="">
	<span class="switch-label" data-on="YES" data-off="NO"></span>
</label>

<!-- danger -->
<label class="switch switch-danger">
	<input type="checkbox" checked="">
	<span class="switch-label" data-on="YES" data-off="NO"></span>
</label>

<!-- warning -->
<label class="switch switch-warning">
	<input type="checkbox" checked="">
	<span class="switch-label" data-on="YES" data-off="NO"></span>
</label>

<!-- info -->
<label class="switch switch-info">
	<input type="checkbox" checked="">
	<span class="switch-label" data-on="YES" data-off="NO"></span>
</label>

<!-- default -->
<label class="switch switch-default">
	<input type="checkbox" checked="">
	<span class="switch-label" data-on="YES" data-off="NO"></span>
</label>

<!-- 
	custom file upload (old style) 
	plugin used for this: assets/plugins/custom.fle_upload.js
-->
<input class="custom-file-upload" type="file" id="file" name="contact[attachment]" id="contact:attachment" data-btn-text="Select a File" />
<small class="text-muted block">Max file size: 10Mb (zip/pdf/jpg/png)</small>




<!-- fancy no style -->
<div class="fancy-file-upload">
	<i class="fa fa-upload"></i>
	<input type="file" class="form-control" name="contact[attachment]" onchange="jQuery(this).next('input').val(this.value);" />
	<input type="text" class="form-control" placeholder="no file selected" readonly="" />
	<span class="button">Choose File</span>
</div>

<!-- fancy primary -->
<div class="fancy-file-upload fancy-file-primary">
	<i class="fa fa-upload"></i>
	<input type="file" class="form-control" name="contact[attachment]" onchange="jQuery(this).next('input').val(this.value);" />
	<input type="text" class="form-control" placeholder="no file selected" readonly="" />
	<span class="button">Choose File</span>
</div>

<!-- fancy success -->
<div class="fancy-file-upload fancy-file-success">
	<i class="fa fa-upload"></i>
	<input type="file" class="form-control" name="contact[attachment]" onchange="jQuery(this).next('input').val(this.value);" />
	<input type="text" class="form-control" placeholder="no file selected" readonly="" />
	<span class="button">Choose File</span>
</div>

<!-- fancy danger -->
<div class="fancy-file-upload fancy-file-danger">
	<i class="fa fa-upload"></i>
	<input type="file" class="form-control" name="contact[attachment]" onchange="jQuery(this).next('input').val(this.value);" />
	<input type="text" class="form-control" placeholder="no file selected" readonly="" />
	<span class="button">Choose File</span>
</div>

<!-- fancy warning -->
<div class="fancy-file-upload fancy-file-warning">
	<i class="fa fa-upload"></i>
	<input type="file" class="form-control" name="contact[attachment]"  onchange="jQuery(this).next('input').val(this.value);" />
	<input type="text" class="form-control" placeholder="no file selected" readonly="" />
	<span class="button">Choose File</span>
</div>

<!-- fancy info -->
<div class="fancy-file-upload fancy-file-info">
	<i class="fa fa-upload"></i>
	<input type="file" class="form-control" name="contact[attachment]" onchange="jQuery(this).next('input').val(this.value);" />
	<input type="text" class="form-control" placeholder="no file selected" readonly="" />
	<span class="button">Choose File</span>
</div>

<!-- fancy default -->
<div class="fancy-file-upload fancy-file-default">
	<i class="fa fa-upload"></i>
	<input type="file" class="form-control" name="contact[attachment]" onchange="jQuery(this).next('input').val(this.value);" />
	<input type="text" class="form-control" placeholder="no file selected" readonly="" />
	<span class="button">Choose File</span>
</div>

<!-- textarea -->
<div class="fancy-form">
	<textarea rows="5" class="form-control word-count" data-maxlength="200" data-info="textarea-words-info" placeholder="Fancy Textarea..."></textarea>

	<i class="fa fa-comments"><!-- icon --></i>

	<span class="fancy-hint size-11 text-muted">
		<strong>Hint:</strong> 200 words allowed!
		<span class="pull-right">
			<span id="textarea-words-info">0/200</span> Words
		</span>
	</span>

</div>


<!-- input -->
<div class="fancy-form">
	<i class="fa fa-user"></i>

	<input type="tel" class="form-control" placeholder="Fancy Input + Dedicated Tooltip">

	<!-- tooltip - optional, bootstrap tooltip can be used instead -->
	<span class="fancy-tooltip top-left"> <!-- positions: .top-left | .top-right -->
		<em>I am a tooltip!</em>
	</span>
</div>


<!-- select -->
<div class="fancy-form fancy-form-select">
	<select class="form-control">
		<option value="">--- Fancy Select ---</option>
		<option value="1">Option 1</option>
		<option value="2">option 2</option>
		<option value="3">option 3</option>
	</select>

	<!--
		.fancy-arrow
		.fancy-arrow-double
	-->
	<i class="fancy-arrow"></i>
</div>


<!-- select2 -->
<div class="fancy-form fancy-form-select">
	<select class="form-control select2">
		<option value="">--- Select 2 ---</option>
		<option value="1">Option 1</option>
		<option value="2">option 2</option>
		<option value="3">option 3</option>
	</select>

	<!--
		.fancy-arrow
		.fancy-arrow-double
	-->
	<i class="fancy-arrow-"></i>
</div>


<!-- radio -->
<label class="radio">
	<input type="radio" name="radio-btn" value="1" checked="checked">
	<i></i> Radio 1
</label>


<!-- checkbox -->
<label class="checkbox">
	<input type="checkbox" value="1">
	<i></i> Checkbox 1
</label>

<!-- classic select2 -->
<select class="form-control select2">
	<option value="">--- Select 2 ---</option>
	<option value="1">Option 1</option>
	<option value="2">option 2</option>
	<option value="3">option 3</option>
</select>


<!-- stepper -->
<input type="text" value="2" min="0" max="1000" class="form-control stepper">