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:</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"></>
					

Google reCAPTCHA

Automatically implement the "I'm not a robot" checkbox by adding your recaptcha site key in the data-recaptcha-sitekey attribute on the <form> element.

Alternatively, add your own div with class recaptcha if you need to control the positioning and width of the wrapping div.

<form data-recaptcha-sitekey="6LewhCIUAAAAACSwFvBDhgtTbw6EnW6e9dip8o2u">
    <div class="col-md-12">
        <div class="recaptcha">
    </div>
</form>
					

For more details and options, see the Stack documentation.

Inputs with Icons

Use any of Stack's icons to help give form inputs context. Simply wrap the <input> tag alongside an <i> icon element inside a .input-icon wrapper.

Alternatively, use the input-icon--right modifier class to make the icon appear on the right-hand side.

<div class="input-icon">
	<i class="material-icons">person</i>
	<input type="text" name="input" placeholder="Enter your name" />
</div>
					
person

visibility

Checkbox Inputs

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

<div class="input-checkbox">
	<input id="checkbox" type="checkbox" name="agree" />
	<label for="checkbox"></label>
</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">
	<input id="checkbox-switch" type="checkbox" name="agree" />
	<label for="checkbox-switch"></label>
</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 with a child input and proceeding label element for a more stylish option.

<div class="input-radio">
	<span class="input__label">Option 1</span>
	<input id="radio-1" type="radio" name="radio" value="radio1" />
	<label for="radio-1"></label>
</div>
					
Option 1
Option 2
Option 3

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">
	<input id="radio-1" type="radio" name="radio" value="radio1" />
	<label for="radio-1">Label Text</label>
</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-md-6">
		<label>Your Name:</label>
		<input type="text" name="name" placeholder="Type Name Here" />
	</div>
	<div class="col-md-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
Goji Berries
Fennel
Flaxseed

Looking for styled form sections?

or try the live builder ↗