<form>
<div class="row">
<div class="col-sm-6">
<label for="exampleEmailInput">Your email</label>
<input class="u-full-width"
placeholder="test@mailbox.com" id="exampleEmailInput"
type="email">
</div>
<div class="col-sm-6">
<label for="exampleRecipientInput">
Reason for contacting</label>
<select class="u-full-width" id="exampleRecipientInput">
<option value="Option 1">Questions</option>
<option value="Option 2">Admiration</option>
<option value="Option 3">Can I get your number?
</option>
</select>
</div>
</div>
<label for="exampleMessage">Message</label>
<textarea class="u-full-width" placeholder="Hi Dave …"
id="exampleMessage"></textarea>
<label class="example-send-yourself-copy">
<label class="switch">
<input class="switch" type="checkbox">
<span class="slider round"></span>
</label>
<span class="label-body">Send a copy to yourself</span>
</label>
<div class="row">
<div class="col-sm-6">
<p>
<label class="label">Select an option:</label>
<select class="selectpicker"
placeholder="Pease select an option:">
<option>One</option>
<option>Two</option>
<option>Three</option>
<option>Four</option>
</select>
</p>
</div>
<div class="col-sm-6">
<p>
<label class="label">Here you can search the option:</label>
<select class="selectpicker search"
placeholder="Please select an option:">
<option>Ketchup</option>
<option>Mustard</option>
<option>Barbecue</option>
<option>Mayonnaise</option>
</select>
</p>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<p>
<label class="label">Select multiple options:</label>
<select class="selectpicker"
placeholder="Select options:"
multiple>
<option>One</option>
<option>Two</option>
<option>Three</option>
<option>Four</option>
</select>
</p>
</div>
<div class="col-sm-6">
<p>
<label class="label">Here you can search the option and select multiple:</label>
<select class="selectpicker search"
placeholder="Please select options:"
multiple>
<option>Ketchup</option>
<option>Mustard</option>
<option>Barbecue</option>
<option>Mayonnaise</option>
</select>
</p>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<label>Checkboxes</label>
<label class="checkcontainer">One
<input type="checkbox" checked="checked">
<span class="check mark"></span>
</label>
<label class="checkcontainer">Two
<input type="checkbox">
<span class="check mark"></span>
</label>
<label class="checkcontainer">Three
<input type="checkbox">
<span class="check mark"></span>
</label>
<label class="checkcontainer">Four
<input type="checkbox">
<span class="check mark"></span>
</label>
</div>
<div class="col-sm-6">
<label>Radiobuttons</label>
<label class="checkcontainer">One
<input type="radio" checked="checked" name="radio">
<span class="radio mark"></span>
</label>
<label class="checkcontainer">Two
<input type="radio" name="radio">
<span class="radio mark"></span>
</label>
<label class="checkcontainer">Three
<input type="radio" name="radio">
<span class="radio mark"></span>
</label>
<label class="checkcontainer">Four
<input type="radio" name="radio">
<span class="radio mark"></span>
</label>
</div>
</div>
<input class="button-primary" value="Submit" type="submit">
</form>
<script type="text/javascript">
createSelectpickers(document.getElementsByTagName('select'));
</script>
<form>
<div class="row">
<div class="col-sm-6">
<label for="exampleDisabledInput">Disabled input</label>
<input class="u-full-width" id="exampleDisabledInput"
type="text" placeholder="Disabled input" disabled>
</div>
<div class="col-sm-6">
<label for="exampleDisabledOption">
Disabled option</label>
<select class="u-full-width"
id="exampleDisabledOption" disabled>
<option value="Option 1">Disabled option</option>
</select>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<label class="disabledSwitch">
<label class="switch">
<input class="switch" type="checkbox" disabled>
<span class="slider round"></span>
</label>
<span class="label-body">Disabled not checked</span>
</label>
</div>
<div class="col-sm-6">
<label class="disabledSwitch">
<label class="switch">
<input class="switch" type="checkbox"
disabled checked>
<span class="slider round"></span>
</label>
<span class="label-body">Disabled checked</span>
</label>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<p>
<label class="label">Select an option:</label>
<select class="selectpicker"
placeholder="Pease select an option:"
disabled>
<option>One</option>
<option>Two</option>
<option>Three</option>
<option>Four</option>
</select>
</p>
</div>
<div class="col-sm-6">
<p>
<label class="label">Here you can search the option:</label>
<select class="selectpicker search"
placeholder="Please select an option:"
disabled>
<option>Ketchup</option>
<option>Mustard</option>
<option>Barbecue</option>
<option>Mayonnaise</option>
</select>
</p>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<label>Disabled Checkboxes</label>
<label class="checkcontainer">One
<input type="checkbox" checked="checked" disabled>
<span class="check mark"></span>
</label>
<label class="checkcontainer">Two
<input type="checkbox" disabled>
<span class="check mark"></span>
</label>
<label class="checkcontainer">Three
<input type="checkbox" disabled>
<span class="check mark"></span>
</label>
<label class="checkcontainer">Four
<input type="checkbox" disabled>
<span class="check mark"></span>
</label>
</div>
<div class="col-sm-6">
<label>Disabled Radiobuttons</label>
<label class="checkcontainer">One
<input type="radio" checked="checked" name="radio"
disabled>
<span class="radio mark"></span>
</label>
<label class="checkcontainer">Two
<input type="radio" name="radio" disabled>
<span class="radio mark"></span>
</label>
<label class="checkcontainer">Three
<input type="radio" name="radio" disabled>
<span class="radio mark"></span>
</label>
<label class="checkcontainer">Four
<input type="radio" name="radio" disabled>
<span class="radio mark"></span>
</label>
</div>
</div>
<input class="button-primary" value="Submit" type="submit"
disabled>
</form>
<script type="text/javascript">
createSelectpickers(document.getElementsByTagName('select'));
</script>