Stack | Multipurpose HTML Template with Variant Page Builder
Sign up with Email

Already have an account? Login


Form Elements

These modular elements can be readily used and customized across pages and in different blocks.


Explore all of Stack's modular elements
at the Element Index Page →

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>
					
I have read and agree to the terms and conditions

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>
					
I have read and agree to the terms and conditions

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>
					

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>
					

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>
					
I have read and agree to the terms and conditions

Looking for styled form sections?

or try the live builder ↗