<form class="o-form">
<div class="m-form-group">
<div class="row">
<div class="col-24">
<div class="position-relative jq_valid_input">
<label class="m-form-group__label a-form-label" for="frm-pc-form-text"> Text field </label>
<input type="text" name="text" id="frm-pc-form-text" class="a-form-input m-form-group__input">
</div>
</div>
</div>
</div>
<div class="m-form-group">
<div class="row">
<div class="col-sm-12">
<div class="position-relative jq_valid_input">
<label class="m-form-group__label a-form-label" for="frm-pc-form-email"> E-mail field </label>
<input type="text" name="email" id="frm-pc-form-email" class="a-form-input m-form-group__input">
</div>
</div>
<div class="col-sm-12">
<div class="position-relative jq_valid_input">
<label class="m-form-group__label a-form-label" for="frm-pc-form-tel"> Tel field </label>
<input type="text" name="tel" id="frm-pc-form-tel" class="a-form-input m-form-group__input">
</div>
</div>
</div>
</div>
<div class="m-form-group">
<div class="row">
<div class="col-24">
<div class="position-relative jq_valid_input">
<label class="m-form-group__label a-form-label" for="frm-pc-form-select"> Select field </label>
<select class="a-form-select" name="select" id="frm-pc-form-select">
<option>-- Select an Option --</option>
<option val="1">Option 01</option>
<option val="2">Option 02</option>
<option val="3">Option 03</option>
<option val="4">Option 04</option>
<option val="5">Option 05</option>
<option val="6">Option 06</option>
</select>
</div>
</div>
</div>
</div>
<div class="m-form-group">
<div class="row">
<div class="col-sm-12">
<div class="position-relative jq_valid_input">
<label class="m-form-group__label a-form-label" for="frm-pc-form-date_1"> Date field </label>
<label class="m-form-date" for="frm-pc-form-date_1">
<span class="w-100">
<input type="text" name="date_1" id="frm-pc-form-date_1" class="m-form-date__input a-form-input jq_datepicker">
</span>
<i class="m-form-date__icon a-icon-calendar" aria-hidden="true"></i>
</label>
</div>
</div>
</div>
</div>
<div class="m-form-group">
<div class="row">
<div class="col-24">
<div class="position-relative jq_valid_input">
<label class="m-form-group__label a-form-label" for="frm-pc-form-number_1"> Number field </label>
<div class="m-form-number">
<input type="number" name="number_1" id="frm-pc-form-number_1" min="0" step="1" class="m-form-number__input a-form-input jq_number_field">
</div>
</div>
</div>
<div class="col-24">
<div class="position-relative jq_valid_input">
<label class="m-form-group__label a-form-label" for="frm-pc-form-file"> Upload field </label>
<div class="m-form-upload jq_upload">
<input type="file" name="file" id="frm-pc-form-file" class="m-form-upload__input jq_upload_file">
<span class="m-form-upload__control a-button jq_upload_control"> Upload </span>
<span class="m-form-upload__note">maximum size 2 MB</span>
<span class="m-form-upload__path jq_upload_path" data-text="Selected file: "></span>
</div>
</div>
</div>
</div>
</div>
<div class="m-form-group">
<div class="row">
<div class="col-sm-12">
<div class="position-relative jq_valid_input">
<label class="m-form-group__label a-form-label" for="frm-pc-form-checkbox"> Checkbox list </label>
<input type="checkbox" name="checkbox[]" id="frm-pc-form-checkbox-list-1" class="m-form-checkbox">
<label class="m-form-checkbox__label" for="frm-pc-form-checkbox-list-1">Checkbox list 01</label>
<input type="checkbox" name="checkbox[]" id="frm-pc-form-checkbox-list-2" class="m-form-checkbox">
<label class="m-form-checkbox__label" for="frm-pc-form-checkbox-list-2">Checkbox list 02</label>
<input type="checkbox" name="checkbox[]" id="frm-pc-form-checkbox-list-3" class="m-form-checkbox">
<label class="m-form-checkbox__label" for="frm-pc-form-checkbox-list-3">Checkbox list 03</label>
</div>
</div>
<div class="col-sm-12">
<div class="position-relative jq_valid_input">
<label class="m-form-group__label a-form-label" for="frm-pc-form-radio"> Radio list </label>
<input type="radio" name="radio" id="frm-pc-form-radio-list-1" class="m-form-radio">
<label class="m-form-radio__label" for="frm-pc-form-radio-list-1">Radio list 01</label>
<input type="radio" name="radio" id="frm-pc-form-radio-list-2" class="m-form-radio">
<label class="m-form-radio__label" for="frm-pc-form-radio-list-2">Radio list 02</label>
<input type="radio" name="radio" id="frm-pc-form-radio-list-3" class="m-form-radio">
<label class="m-form-radio__label" for="frm-pc-form-radio-list-3">Radio list 03</label>
</div>
</div>
</div>
</div>
<div class="m-form-group">
<div class="row">
<div class="col-24">
<div class="position-relative jq_valid_input">
<label class="m-form-group__label a-form-label" for="frm-pc-form-slide_1"> Slide field </label>
<div class="m-form-slide row jq_range">
<div class="m-form-slide__column col-24 col-sm-auto order-sm-2">
<input type="number" name="slide_1" id="frm-pc-form-slide_1" min="0" max="80" step="5" value="50" class="m-form-slide__control jq_range_control">
</div>
<div class="m-form-slide__column col-24 col-sm order-sm-1">
<div class="m-form-slide__slider jq_range_slider"></div>
</div>
</div>
</div>
</div>
<div class="col-24">
<div class="position-relative jq_valid_input">
<label class="m-form-group__label a-form-label" for="frm-pc-form-range_1"> Range field </label>
<div class="m-form-slide row jq_range">
<div class="m-form-slide__column col-12 col-md-auto order-md-1">
<input type="number" name="range_1[]" id="frm-pc-form-range_1-'1'" min="0" max="80" step="5" value="0" class="m-form-slide__control jq_range_control">
</div>
<div class="m-form-slide__column col-12 col-md-auto order-md-3 text-right">
<input type="number" name="range_1[]" id="frm-pc-form-range_1-'2'" min="0" max="80" step="5" value="80" class="m-form-slide__control jq_range_control">
</div>
<div class="m-form-slide__column col-24 col-md order-md-2">
<div class="m-form-slide__slider jq_range_slider"></div>
</div>
</div>
</div>
</div>
<div class="col-24">
<div class="position-relative jq_valid_input">
<label class="m-form-group__label a-form-label" for="frm-pc-form-textarea"> Textarea field </label>
<textarea rows="4" cols="50" class="a-form-textarea m-form-group__input" name="textarea" id="frm-pc-form-textarea"></textarea>
</div>
</div>
<div class="col-24">
<div class="position-relative jq_valid_input">
<div class="jq_valid_message position-relative">
<div>
<input type="checkbox" name="accept" id="frm-pc-form-accept" class="m-form-checkbox">
<label class="m-form-checkbox__label" for="frm-pc-form-accept">Checkbox to accept terms & conditions.</label> </div>
</div>
</div>
</div>
</div>
</div>
<div class="m-form-group">
<div class="row">
<div class="col-24">
<div class="position-relative jq_valid_input">
<input value="Submit" type="submit" name="submit" id="frm-pc-form-submit" class="a-button">
</div>
</div>
</div>
</div>
</form>@import "atoms/button/index";
@import "atoms/form-description/index";
@import "atoms/form-error/index";
@import "atoms/form-input/index";
@import "atoms/form-label/index";
@import "atoms/form-select/index";
@import "atoms/form-textarea/index";
@import "molecules/form-checkbox/index";
@import "molecules/form-date/index";
@import "molecules/form-group/index";
@import "molecules/form-number/index";
@import "molecules/form-radio/index";
@import "molecules/form-slide/index";
@import "molecules/form-upload/index";import 'molecules/form-date';
import 'molecules/form-number';
import 'molecules/form-slide';
import 'molecules/form-upload';