Form Elements

Standard Inputs

Common inputs such as text, email, telephone, password, address etc. Add the class .validate-required if the input is required in the form.

Alternatively use the <label> tag before an input for greater user assistance.

<label>Input Label:<>
<input class="validate-required" type="text" name="My Input" placeholder="Name" />
					

<label>Textarea Label:<>
<textarea class="validate-required" name="My Text" rows="4" placeholder="Text"></>
					

Checkbox Inputs

Wrap checkbox inputs in the input-checkbox element for a more stylish option. Alternatively, place a span directly after to group the two for visual usability

<div class="input-checkbox">
	<div class="inner"></div>
	<input type="checkbox" name="agree" />
</div>
<span>Helper text for checkbox</span>
					

Switch Inputs

Add the class .input-checkbox--switch to the .input-checkbox element to change its appearance to that of a toggle switch.

<div class="input-checkbox input-checkbox--switch">
	<div class="inner"></div>
	<input type="checkbox" name="agree" />
</div>
<span>Helper text for checkbox</span>
					

Radio Inputs

Wrap radio inputs in the input-radio element for a more stylish option. Use in conjunction with the <label> tag.

<div class="input-radio">
	<label>Label</label>
	<div class="inner"></div>
	<input type="radio" name="radio" value="radio1" />
</div>
					

Radio Inputs (Text Inside)

Wrap radio inputs in the input-radio element and add the class .input-radio--innerlabel

<div class="input-radio input-radio--innerlabel">
	<label>Label</label>
	<div class="inner"></div>
	<input type="radio" name="radio" value="radio1" />
</div>
					

Select Inputs

Wrap radio inputs in the input-select element for a more theme-consistent stylish option.

<div class="input-select">
	<select>
		<option selected="" value="Default">Select An Option</option>
		<option value="Small">Small</option>
		<option value="Medium">Medium</option>
		<option value="Larger">Large</option>
	</select>
</div>
					

Date Inputs

Add the class .datepicker to an input[type="text"] element to render a theme-consistent date picker when the user clicks or touches.

<input type="text" name="date" class="datepicker" placeholder="Choose a date" />
					

Number Inputs

Useful for quantities and more, wrap the input[type="number"] in an .input-number element to render theme-consistent quantity controls. Use the data-step attribute on the .input-number element to control the step amount.

<div class="input-number">
	<input type="number" name="quantity" placeholder="Quantity" value="1" min="1" max="10" />
	<div class="input-number__controls">
		<span class="input-number__increase"><i class="stack-up-open"></i></span>
		<span class="input-number__decrease"><i class="stack-down-open"></i></span>
	</div>
</div>
					

Formatting Forms

Using the Bootstrap column classes, you can easily control the widths of the inputs in your form.

The below code would render a form with two equally sized (six columns) inputs in two adjacent columns.

<form>
	<div class="col-sm-6">
		<label>Your Name:</label>
		<input type="text" name="name" placeholder="Type Name Here" />
	</div>
	<div class="col-sm-6">
		<label>Email Address:</label>
		<input type="email" name="email" placeholder="Email Address" />
	</div>
</form>