| Axle | 'form elements'

Example code:

<label for="text_field">This is a label<span>(optional)</span></label>
<input type="text" class="" name="" id="text_field" value="" />
<p class="instructional">This is instructional text</p>
<p class="alert" style="display:none;">This is alert text</p>	
				

Add .fail class to <input> tag.

Example code:

<label for="text_field">This is a label<span>(optional)</span></label>
<input type="text" class="fail" name="" id="text_field" value="" />
<p class="instructional">This is instructional text</p>
<p class="alert" style="display:block;">This is alert text</p>	
				

Append the disabled attribute to the <input> tag.

Example code:

<label for="text_field">This is a label<span>(optional)</span></label>
<input type="text" class="" name="" id="text_field" value="" disabled="disabled" />
<p class="instructional">This is instructional text</p>
<p class="alert" style="display:none;">This is alert text</p>	
				

Example code:

<label for="file">This is a label<span>(optional)</span></label>
<input type="file" class="" name="" id="file" value="" />
<p class="instructional">This is instructional text</p>
<p class="alert" style="display:none;">This is alert text</p>	
				

Add .fail class to <input> tag.

Example code:

<label for="file">This is a label<span>(optional)</span></label>
<input type="file" class="fail" name="" id="file" value="" />
<p class="instructional">This is instructional text</p>
<p class="alert" style="display:block;">This is alert text</p>	
				

Example code:

<label for="file">This is a label<span>(optional)</span></label>
<input type="file" class="" name="" id="file" value="" disabled="disabled" />
<p class="instructional">This is instructional text</p>
<p class="alert" style="display:none;">This is alert text</p>	
				

Example code:

<label for="select_list">This is a label<span>(optional)</span></label>
<span class="custom-select">
  <select id="select_list">
    <option value="">text</option>
    <option value="">text</option>
    <option value="">text</option>
    <option value="">text</option>
  </select>
</span>
<p class="instructional">This is instructional text</p>
<p class="alert" style="display:none;">This is alert text</p>	
				

Add .fail class to <span> tag.

Example code:

<label for="select_list_error">This is a label<span>(optional)</span></label>
<span class="custom-select fail">
  <select id="select_list_error">
    <option value="">text</option>
    <option value="">text</option>
    <option value="">text</option>
    <option value="">text</option>
  </select>
</span>
<p class="instructional">This is instructional text</p>
<p class="alert" style="display:block;">This is alert text</p>	
				

Add attribute disabled="disabled" to <select> tag and the class .disabled to the parent <span> tag.

Example code:

<label for="select_list_disabled">This is a label<span>(optional)</span></label>
<span class="custom-select disabled">
  <select id="select_list_disabled" disabled="disabled">
    <option value="">text</option>
    <option value="">text</option>
    <option value="">text</option>
    <option value="">text</option>
  </select>
</span>
<p class="instructional">This is instructional text</p>
<p class="alert" style="display:none;">This is alert text</p>	
				

Add .horizontal_selectors to the parent <ul> tag

Example code: horizontal selectors

<label for="option_one">This is a label<span>(optional)</span></label>
<ul class="horizontal_selectors">
  <li>
    <input type="radio" name="option" id="option_one" value=""/>
    <label for="option_one">option one</label>
  </li>
  <li>
    <input type="radio" name="option" id="option_two" value=""/>
    <label for="option_two">option one</label>
  </li>
</ul>
<p class="instructional">This is instructional text</p>
<p class="alert" style="display:none;">This is alert text</p>	

<label for="option_one_checkbox">This is a label<span>(optional)</span></label>
<ul class="horizontal_selectors">
  <li>
    <input type="checkbox" name="option" id="option_one_checkbox" value=""/>
    <label for="option_one_checkbox">option one</label>
  </li>
  <li>
    <input type="checkbox" name="option" id="option_two_checkbox" value=""/>
    <label for="option_two_checkbox">option two</label>
  </li>
</ul>
<p class="instructional">This is instructional text</p>
<p class="alert" style="display:none;">This is alert text</p>	
				

Add .fail class to parent <li> tag.

Example code: horizontal selectors

<label for="option_one">This is a label<span>(optional)</span></label>
<ul class="horizontal_selectors">
  <li class="fail">
    <input type="radio" name="option" id="option_one" value=""/>
    <label for="option_one">option one</label>
  </li>
  <li class="fail">
    <input type="radio" name="option" id="option_two" value=""/>
    <label for="option_two">option one</label>
  </li>
</ul>
<p class="instructional">This is instructional text</p>
<p class="alert" style="display:block;">This is alert text</p>	

<label for="option_one_checkbox">This is a label<span>(optional)</span></label>
<ul class="horizontal_selectors">
  <li class="fail">
    <input type="checkbox" name="option" id="option_one_checkbox" value=""/>
    <label for="option_one_checkbox">option one</label>
  </li>
  <li class="fail">
    <input type="checkbox" name="option" id="option_two_checkbox" value=""/>
    <label for="option_two_checkbox">option two</label>
  </li>
</ul>
<p class="instructional">This is instructional text</p>
<p class="alert" style="display:block;">This is alert text</p>	

				

Insert attribute disabled="disabled" to the disabled <input> tag

Example code: horizontal selectors

<label for="option_one">This is a label<span>(optional)</span></label>
<ul class="horizontal_selectors">
  <li>
    <input type="radio" name="option" id="option_one" value="" disabled="disabled"/>
    <label for="option_one">option one</label>
  </li>
  <li>
    <input type="radio" name="option" id="option_two" value=""disabled="disabled"/>
    <label for="option_two">option one</label>
  </li>
</ul>
<p class="instructional">This is instructional text</p>
<p class="alert" style="display:none;">This is alert text</p>	

<label for="option_one_checkbox">This is a label<span>(optional)</span></label>
<ul class="horizontal_selectors">
  <li>
    <input type="checkbox" name="option" id="option_one_checkbox" value=""disabled="disabled"/>
    <label for="option_one_checkbox">option one</label>
  </li>
  <li>
    <input type="checkbox" name="option" id="option_two_checkbox" value=""disabled="disabled"/>
    <label for="option_two_checkbox">option two</label>
  </li>
</ul>
<p class="instructional">This is instructional text</p>
<p class="alert" style="display:none;">This is alert text</p>	
				

Add .vertical_selectors to the parent <ul> tag

Example code: horizontal selectors

<label for="option_three">This is a label<span>(optional)</span></label>
<ul class="vertical_selectors">
  <li>
    <input type="radio" name="option_vert" id="option_three" value=""/>
    <label for="option_three">option one</label>
  </li>
  <li>
    <input type="radio" name="option_vert" id="option_four" value=""/>
    <label for="option_four">option two</label>
  </li>
</ul>
<p class="instructional">This is instructional text</p>
<p class="alert" style="display:none;">This is alert text</p>

<label for="option_three_checkbox">This is a label<span>(optional)</span></label>
<ul class="vertical_selectors">
  <li>
    <input type="checkbox" name="option_vert" id="option_three_checkbox" value=""/>
    <label for="option_three_checkbox">option one</label>
  </li>
  <li>
    <input type="checkbox" name="option_vert" id="option_four_checkbox" value=""/>
    <label for="option_four_checkbox">option two</label>
  </li>
</ul>
<p class="instructional">This is instructional text</p>
<p class="alert" style="display:none;">This is alert text</p>

				

Add .fail class to parent <li> tags.

Example code: horizontal selectors

<label for="option_three">This is a label<span>(optional)</span></label>
<ul class="vertical_selectors">
  <li class="fail">
    <input type="radio" name="option_vert" id="option_three" value=""/>
    <label for="option_three">option one</label>
  </li>
  <li class="fail">
    <input type="radio" name="option_vert" id="option_four" value=""/>
    <label for="option_four">option two</label>
  </li>
</ul>
<p class="instructional">This is instructional text</p>
<p class="alert" style="display:block;">This is alert text</p>
<p class="alert" style="display:block;">This is alert text</p>
<p class="alert" style="display:block;">This is alert text</p>

<label for="option_three_checkbox">This is a label<span>(optional)</span></label>
<ul class="vertical_selectors">
  <li class="fail">
    <input type="checkbox" name="option_vert" id="option_three_checkbox" value=""/>
    <label for="option_three_checkbox">option one</label>
  </li>
  <li class="fail">
    <input type="checkbox" name="option_vert" id="option_four_checkbox" value=""/>
    <label for="option_four_checkbox">option two</label>
  </li>
</ul>
<p class="instructional">This is instructional text</p>
<p class="alert" style="display:block;">This is alert text</p>
<p class="alert" style="display:block;">This is alert text</p>
<p class="alert" style="display:block;">This is alert text</p>
				

Example code: vertical selectors

<label for="option_three">This is a label<span>(optional)</span></label>
<ul class="vertical_selectors">
  <li>
    <input type="radio" name="option_vert" id="option_three" value="" disabled="disabled"/>
    <label for="option_three">option one</label>
  </li>
  <li>
    <input type="radio" name="option_vert" id="option_four" value="" disabled="disabled"/>
    <label for="option_four">option two</label>
  </li>
</ul>
<p class="instructional">This is instructional text</p>
<p class="alert" style="display:none;">This is alert text</p>

<label for="option_three_checkbox">This is a label<span>(optional)</span></label>
<ul class="vertical_selectors">
  <li>
    <input type="checkbox" name="option_vert" id="option_three_checkbox" value="" disabled="disabled"/>
    <label for="option_three_checkbox">option one</label>
  </li>
  <li>
    <input type="checkbox" name="option_vert" id="option_four_checkbox" value="" disabled="disabled"/>
    <label for="option_four_checkbox">option two</label>
  </li>
</ul>
<p class="instructional">This is instructional text</p>
<p class="alert" style="display:none;">This is alert text</p>
				

Example code: textarea

<label for="textarea">This is a label<span>(optional)</span></label>
<textarea id="textarea">hello, I am text</textarea>
<p class="instructional";>This is instructional text</p>
<p class="alert" style="display:none;">This is alert text</p>	
				

Add .fail class to the <textarea> tag.

Example code: textarea

<label for="textarea">This is a label<span>(optional)</span></label>
<textarea id="textarea" class="fail">hello, I am text</textarea>
<p class="instructional";>This is instructional text</p>
<p class="alert" style="display:block;">This is alert text</p>
<p class="alert" style="display:block;">This is alert text</p>
<p class="alert" style="display:block;">This is alert text</p>	
				

Example code: textarea

<label for="textarea">This is a label<span>(optional)</span></label>
<textarea id="textarea" disabled="disabled">hello, I am text</textarea>
<p class="instructional">This is instructional text</p>
<p class="alert" style="display:none;">This is alert text</p>	
				

Note: Larger form UI is created when appending the mixin of .large_form to the class of the parent container.

Example code:

<style>
  .foo_form {
    .large_form
  }
</style>

<fieldset class="foo_form" style="">
  <label for="text_field">This is a label<span>(optional)</span></label>
  <input type="text" class="" name="" id="text_field" value="" />
</fieldset>