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

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>
					

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>
					

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>
					

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-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>