Forms

<!-- Name -->
<label>Name
<input type="text" placeholder="Name">
</label>

<!-- Email -->
<label>Email
<input type="email" placeholder="Email">
</label>

<!-- Password -->
<label>Password
<input type="password" placeholder="Password">
</label>

<!-- Phone -->
<label>Phone
<input type="tel" pattern="(?:\(\d{3}\)|\d{3})[- ]?\d{3}[- ]?\d{4}" title=""Phone Number" placeholder="Phone">
</label>

<!-- Date -->
<label>Date
<input type="text" class="datepicker-here" data-language="en" placeholder="MM/DD/YYYY">
</label>

<!-- Date & Time-->
<label>Date
<input type="text" class="datepicker-here" data-language="en" placeholder="MM/DD/YYYY" data-timepicker="true">
</label>

<!-- Address -->
<form class="col-sm-6 col-xs-12">
<label id="locationField">Address
<input id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text"></input>
</label>
</form>
<div class="row col-sm-12">
<div class="col-sm-6 col-xs-12 address-fields">
<div class="col-xs-12">
<label>Street</label>
<input class="col-xs-3 street1" id="street_number" disabled="true"></input>
<input class="col-xs-9 street2" id="route" disabled="true"></input>
</div>
<div class="col-xs-8">
<label>City</label>
<input id="locality" disabled="true"></input>
</div>
<div class="col-xs-8">
<label>State</label>
<input id="administrative_area_level_1" disabled="true"></input>
</div>
<div class="col-xs-8">
<label>Zip</label>
<input id="postal_code" disabled="true"></input>
</div>
<div class="col-xs-8">
<label>Country</label>
<input id="country" disabled="true"></input>
</div>
</div>
</div>

<!-- Color Picker -->
<label>Color
<input type="color">
</label>

<!-- Text Area -->
<label>Text Area</label>
<textarea placeholder="Type your comments here..."></textarea>

<!-- Selector -->
<label>Selector</label>
<div class="select">
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<div class="select__arrow"></div>
</div>

<!-- Selector Disabled -->
<label>Selector</label>
<div class="select">
<select disabled="disabled">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<div class="select__arrow"></div>
</div>

<!-- First Radio -->
<label class="control radio">First Radio
<input type="radio" name="radio" checked="checked">
<div class="indicator"></div>
</label>

<!-- Second Radio -->
<label class="control radio">Second Radio
<input type="radio" name="radio">
<div class="indicator"></div>
</label>

<!-- Disabled -->
<label class="control radio">Disabled
<input type="radio" name="radio2" disabled="disabled">
<div class="indicator"></div>
</label>

<!-- Disabled & Selected -->
<label class="control radio">Disabled & Selected
<input type="radio" name="radio2" disabled="disabled" checked="checked">
<div class="indicator"></div>
</label>

<!-- First Checkbox -->
<label class="control checkbox">First Checkbox
<input type="checkbox" checked="checked">
<div class="indicator"></div>
</label>

<!-- Second Checkbox -->
<label class="control checkbox">Second Checkbox
<input type="checkbox">
<div class="indicator"></div>
</label>

<!-- Disabled -->
<label class="control checkbox">Disabled
<input type="checkbox" disabled="disabled">
<div class="indicator"></div>
</label>

<!-- Disabled & Checked -->
<label class="control checkbox">Disabled & Checked
<input type="checkbox" disabled="disabled" checked="checked">
<div class="indicator"></div>
</label>

<!-- Toggle Off -->
<input type="checkbox" id="unchecked" class="cbx hidden">
<label for="unchecked" class="lbl"></label>

<!-- Toggle On -->
<input type="checkbox" id="checked" class="cbx hidden">
<label for="checked" class="lbl"></label>

<!-- Disabled -->
<input type="checkbox" id="unchecked_disabled" class="cbx hidden">
<label for="unchecked_disabled" class="lbl"></label>