Form Type

Form elements sync with overall styling of evo text and colors. Use <input type="text">, <option>, and <textarea> tags.

evo-form input

<input type="text" placeholder="Text" class="evo-form form-padding form-box"/>

Create a <input type="text"> tag, and place a <label> tag above or below it. Default form styles are set in _variables.scss.

evo-form textarea

<textarea type="text" id="message" required rows="8" spellcheck="true" class="evo-form form-padding form-box" /></textarea>

Create a <textarea type="text"> tag, and place a <label> tag above or below it. Default form styles are set in _variables.scss.

evo-form select

<select id="select" placeholder="choose one" class="evo-form" />
<option value="option1">option 1</option>
<option value="option2">option 2</option>
<option value="option3">option 3</option>
</select>

Create a <input type="button"> tag. Default input button styles are set in _variables.scss. See the "buttons" section for more styles.

evo-form input

<input type="file" id="file" multiple class="evo-form" />

Create a <input type="file"> tag. Default input button styles are set in _variables.scss. See the "buttons" section for more styles.

<label class="evo-button width-auto button-box-none" />
<input type="file" required />
<span>Upload File</span>
</label>

An alternate upload file button. Create a <input type="file"> tag. Default input button styles are set in _variables.scss. See the "buttons" section for more styles.

form-checkbox

<label class="form-checkbox"><input type="checkbox" id="checkbox1" checked /> checkbox 1</label>
<label class="form-checkbox"><input type="checkbox" id="checkbox2" /> checkbox 2</label>
<label class="form-checkbox"><input type="checkbox" id="checkbox3" /> checkbox 3</label>

Create a <label> tag with an form-checkbox class, and place an <input type="checkbox"> element inside. Default input button styles are set in _variables.scss.

form-checkbox-inline

<fieldset class="overflow">
  <div class="form-checkbox-inline">
<label class="form-checkbox"><input type="checkbox" id="checkbox1" checked /> checkbox 1</label>
<label class="form-checkbox"><input type="checkbox" id="checkbox2" /> checkbox 2</label>
<label class="form-checkbox"><input type="checkbox" id="checkbox3" /> checkbox 3</label>
  </div>
</fieldset>

Create a <div> tag with a class of form-checkbox-inline, then place a <label> tag inside, and then an <input type="checkbox"> element inside of the label. The fieldset class of overflow may be optional. Default input button styles are set in _variables.scss.

form-radio

<label class="form-radio"><input type="radio" id="radio1" name="radio" value="value" checked /> radio 1>/label>
<label class="form-radio"><input type="radio" id="radio1" name="radio" value="value"  /> radio 2>/label>
<label class="form-radio"><input type="radio" id="radio3" name="radio" value="value" /> radio 3>/label>

Create a <label> tag with an form-radio class,and place an <input type="radio"> element inside. Default input button styles are set in _variables.scss.

form-radio-inline

<fieldset class="overflow">
  <div class="form-radio-inline">
  <label class="form-radio"><input type="radio" id="radio1" name="radio" value="value" checked /> radio 1>/label>
<label class="form-radio"><input type="radio" id="radio1" name="radio" value="value"  /> radio 2>/label>
<label class="form-radio"><input type="radio" id="radio3" name="radio" value="value" /> radio 3>/label>
  </div>
</fieldset>

Create a <div> tag with a class of form-radio-inline, then place a <label> tag inside, and then a <input type="radio"> element inside of the label. The fieldset class of overflow may be optional. Default input button styles are set in _variables.scss.

button

<input type="submit" class="evo-button" />

Create a <input type="submit"> tag. Default input button styles are set in _variables.scss. See the "buttons" section for more styles.