Form Elements

Standard Inputs

Common inputs such as text, email, telephone, password, address etc. Add the class .validate-requiredif 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-sitekeyattribute on the <form>element.

Alternatively, add your own div with class recaptchaif 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-iconwrapper.

Alternatively, use the input-icon--rightmodifier 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--switchto the .input-checkboxelement 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 .datepickerto 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-numberelement to render theme-consistent quantity controls. Use the data-stepattribute on the .input-numberelement 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>