Evo

Form Element

Form elements sync with overall styling of evo text and colors. Use <input>, <select>, and <textarea> tags. Add attributes to the HTML tags as needed, such as autofocus, required, or multiple.

input

<label>Input Label</label>
<div class="evo-space-1"></div>
<input name="input" placeholder="Input Placeholder" />

These are unstyled inputs, intended as a foundation for your own custom styling. Create an <input type="text"> tag, and place a <label> tag above or below it. If a browser does not support a particular input type, it will default to basic text input. The basic <input> tag is generally unstyled, so that you might style it using classes. Typically, using an input type will trigger a related keyboard behavior on iOS devices. Form elements will stretch across their continer unless the width is constrained. Default form styles are set in _global.scss or _form.scss.

evo-form input

This sets the border radius, width, and background color.

<label class="display-block margin-bottom-8 text-uppercase text-size-3 text-tracking-10">Input Label</label>
<input name="input" placeholder="Evo Input Placeholder" class="evo-form evo-form-padding evo-form-box" />

For styled inputs, create an <input> tag, and place a <label> tag above or below it. Apply the evo-form, form-padding, and form-box classes. Default form styles are set in _evo_variables.scss.

evo-form-inverse input

This sets the border radius, width, and background color.

<label class="display-block margin-bottom-8 text-uppercase text-size-3 text-tracking-10">Input Label</label>
<input name="input" placeholder="Evo Input Placeholder" class="evo-form-inverse evo-form-padding evo-form-box" />

For inverse styled inputs, create an <input> tag, and place a <label> tag above or below it. Apply the evo-form-inverse, form-padding, and form-box classes. Default form styles are set in _evo_variables.scss.

select

<label for="select">Choose one</label>
<select name="select" />
<option value="option1">option 1</option>
<option value="option2">option 2</option>
<option value="option3">option 3</option>
</select>

Create an <select> tag with nested <option> and/or <optgroup> tags. Default select styles are set in _evo_variables.scss.

evo-form select

<label for="select" class="display-block margin-bottom-8 text-uppercase text-size-3 text-tracking-10">Choose one</label>
<select id="select" class="evo-form evo-form-padding evo-form-box form-icon form-icon-triangle">
<option value="option1">option 1</option>
<option value="option2" selected>option 2</option>
<option value="option3">option 3</option>
<optgroup label="more options">
<option value="option4">option 4</option>
<option value="option5">option 5</option>
</optgroup>
</select>

For a styled select, create an <select> tag with nested <option> and/or <optgroup> tags. Apply a desired icon by combining form-icon, form-icon-size-5, and form-icon-triangle classes. Default select styles are set in _evo_variables.scss.

<select id="select" class="evo-form evo-form-padding evo-form-box form-icon form-icon-chevron-down" />
<option value="option1">option 1</option>
</select>

Add the form-icon-chevron-down tag for an alternative icon. Default styles are set in _evo_variables.scss. 

<label for="select" class="display-block margin-bottom-8 text-uppercase text-size-3 text-tracking-10">Choose one</label>
<select id="select" class="evo-form evo-form-padding evo-form-box" multiple>
<option value="option1">option 1</option>
<option value="option2" selected>option 2</option>
<option value="option3">option 3</option>
<optgroup label="more options">
<option value="option4">option 4</option>
<option value="option5">option 5</option>
</optgroup>
</select>

Example of select element with the 'multiple' attribute, and one of the options with a 'selected' attribute.

evo-form-inverse select

<label for="select" class="display-block margin-bottom-8 text-uppercase text-size-3 text-tracking-10 text-inverse">Choose one</label>
<select id="select" class="evo-form-inverse evo-form-padding evo-form-box form-icon form-icon-triangle-white text-inverse evo-form-placeholder-inverse" />
<option value="option1">option 1</option>
<option value="option2" selected>option 2</option>
<option value="option3">option 3</option>
<optgroup label="more options">
<option value="option4">option 4</option>
<option value="option5">option 5</option>
</optgroup>
</select>

For a styled select, create an <select> tag with nested <option> and/or <optgroup> tags. Apply a desired icon by combining form-icon, form-icon-size-5, and form-icon-triangle-white classes. Default select styles are set in _evo_variables.scss.

<select id="select" class="evo-form-inverse evo-form-padding evo-form-box form-icon form-icon-chevron-down-white text-inverse" />
<option value="option1">option 1</option>
</select>

Add the form-icon-chevron-down-white tag for an alternative icon. Default styles are set in _evo_variables.scss. 

<label for="select" class="display-block margin-bottom-8 text-uppercase text-size-3 text-tracking-10">Choose one</label>
<select id="select" class="evo-form-inverse evo-form-padding evo-form-box text-inverse" multiple>
<option value="option1">option 1</option>
<option value="option2" selected>option 2</option>
<option value="option3">option 3</option>
<optgroup label="more options">
<option value="option4">option 4</option>
<option value="option5">option 5</option>
</optgroup>
</select>

Example of select element with the 'multiple' attribute, and one of the options with a 'selected' attribute.

textarea

<label>Textarea Label</label>
<div class="evo-space-1"></div>
<textarea ame="message" placeholder="Textarea Placeholder"></textarea>

Create a <textarea> tag, and place a <label> tag above or below it. Default form styles are set in _evo_variables.scss.. Default form styles are set in _evo_variables.scss.

evo-form textarea

<label class="display-block margin-bottom-8 text-uppercase text-size-3 text-tracking-10">Textarea Label</label>
<textarea type="text" name="message" required rows="8" spellcheck="true" placeholder="Textarea Placeholder" class="evo-form evo-form-padding evo-form-box"></textarea>

Create a <textarea> tag, and place a <label> tag above or below it. Apply the evo-form class along with form-padding and form box, as in the above example. Default form styles are set in _evo_variables.scss.

evo-form-inverse textarea

<label class="display-block margin-bottom-8 text-uppercase text-size-3 text-tracking-10">Textarea Label</label>
<textarea type="text" name="message" required rows="8" spellcheck="true" placeholder="Textarea Placeholder" class="evo-form evo-form-padding evo-form-box"></textarea>

Create a <textarea> tag, and place a <label> tag above or below it. Apply the evo-form class along with form-padding and form box, as in the above example. Default form styles are set in _evo_variables.scss.

File

<label>File Label</label>
<div class="evo-space-1"></div>
<input type="file" name="file" placeholder="File Placeholder" />

Create an <input type="file"> tag. Add the 'multiple' attribute to permit uploading of multiple files.

<input type="file" name="file" class="evo-form evo-form-padding evo-form-box" />

Create an <input type="file"> tag, then apply the evo-form, form-padding, and form-box classes.

<label class="evo-button ghost-color-to-ghost width-auto button-box-thin button-padding-medium box-dashed evo-icon-button button-upload cursor-pointer">
<input type="file" multiple />
<span>Upload File</span>
</label>

An alternate upload file button. Create a <input type="file"> tag. To remove the icon, delete the evo-icon-button and button-upload classes. Default input button styles are set in _evo_variables.scss. See the "buttons" section for more styles.

File inverse

<label class="text-inverse">File Label</label>
<div class="evo-space-1"></div>
<input type="file" name="file" placeholder="File Placeholder" class="text-inverse" />

Create an <input type="file"> tag. Add the 'multiple' attribute to permit uploading of multiple files.

<input type="file" name="file" class="evo-form-inverse evo-form-padding evo-form-box" />

Create an <input type="file"> tag, then apply the evo-form, form-padding, and form-box classes.

<label class="evo-button ghost-color-to-ghost-inverse width-auto button-box-thin button-padding-medium box-dashed evo-icon-button button-upload-white cursor-pointer">
<input type="file" multiple />
<span>Upload File</span>
</label>

An alternate upload file button. Create a <input type="file"> tag. To remove the icon, delete the evo-icon-button and button-upload-white classes. Default input button styles are set in _evo_variables.scss. See the "buttons" section for more styles.

form-checkbox

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

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

form-checkbox inverse

<fieldset>
<label class="form-checkbox"><input type="checkbox" id="checkbox1inverse" checked /> checkbox 1</label>
<label class="form-checkbox"><input type="checkbox" id="checkbox2inverse" /> checkbox 2</label>
<label class="form-checkbox"><input type="checkbox" id="checkbox3inverse" /> checkbox 3</label>
</fieldset>

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

form-checkbox-inline

<fieldset class="overflow-hidden">
  <div class="form-checkbox-inline">
<label class="form-checkbox"><input type="checkbox" id="checkbox1inline" checked /> checkbox 1</label>
<label class="form-checkbox"><input type="checkbox" id="checkbox2inline" /> checkbox 2</label>
<label class="form-checkbox"><input type="checkbox" id="checkbox3inline" /> 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-hidden may be optional. Default input button styles are set in _evo_variables.scss.

form-radio

<fieldset>
<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="radio2" name="radio" value="value"  /> radio 2</label>
<label class="form-radio"><input type="radio" id="radio3" name="radio" value="value" /> radio 3</label>
</fieldset>

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

form-radio inverse

<fieldset>
<label class="form-radio text-inverse"><input type="radio" id="radio1inverse" name="radioInverse" value="value" checked /> radio 1</label>
<label class="form-radio text-inverse"><input type="radio" id="radio2inverse" name="radioInverse" value="value"  /> radio 2</label>
<label class="form-radio text-inverse"><input type="radio" id="radio3inverse" name="radioInverse" value="value" /> radio 3</label>
</fieldset>

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

form-radio-inline

<fieldset class="overflow-hidden">
  <div class="form-radio-inline">
  <label class="form-radio"><input type="radio" id="radio1inline" name="radio1inline" value="value" checked /> radio 1</label>
<label class="form-radio"><input type="radio" id="radio2inline" name="radio2inline" value="value"  /> radio 2</label>
<label class="form-radio"><input type="radio" id="radio3inline" name="radio3inline" 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-hidden may be optional. Default input button styles are set in _evo_variables.scss.

submit

<input type="submit" />

Create a <input type="submit"> tag. By default, this button spans the width of the container. Default input button styles are set in _evo_variables.scss. See the "buttons" section for more styles.

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

Create a <input type="submit"> tag and apply the evo-button class. The width-auto class will callapse the button around the text. Default input button styles are set in _evo_variables.scss. Default input button styles are set in _evo_variables.scss. See the button section for more styles.

<input type="submit" class="evo-button button-box-none ghost-to-ghost-color transparent-bg width-auto" />

Create a <input type="reset"> tag to offer a way to clear form data.

submit inverse

<input type="submit" />

Create a <input type="submit"> tag. By default, this button spans the width of the container. Default input button styles are set in _evo_variables.scss. See the "buttons" section for more styles.

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

Create a <input type="submit"> tag and apply the evo-button-inverse class. The width-auto class will callapse the button around the text. Default input button styles are set in _evo_variables.scss. Default input button styles are set in _evo_variables.scss. See the button section for more styles.

<input type="submit" class="evo-button-inverse button-box-none ghost-to-ghost-color-inverse transparent-bg width-auto" />

Create a <input type="reset"> tag to offer a way to clear form data.