0.8.6 beta

| Axle | 'form elements'

1. input type="text"

This is instructional text

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>	
				

1.1 input type="text" w/error

This is instructional text

This is alert text

This is alert text

This is alert text

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>	
				

1.2 input type="text" disabled field

This is instructional text

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>	
				

2. input type="file"

This is instructional text

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>	
				

2.1 input type="file" w/error

This is instructional text

This is alert text

This is alert text

This is alert text

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>	
				

2.2 input type="file" disabled field

This is instructional text

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>	
				

3. select

This is instructional text

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>	
				

3.1 select w/error

This is instructional text

This is alert text

This is alert text

This is alert text

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>	
				

3.2 select w/disabled field

This is instructional text

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>	
				

4. input type="radio" & input type="checkbox" | horizontal

This is instructional text

This is instructional text

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>	
				

4.1 input type="radio" & input type="checkbox" | horizontal w/error

This is instructional text

This is alert text

This is alert text

This is alert text

This is instructional text

This is alert text

This is alert text

This is alert text

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>	

				

4.2 input type="radio" & input type="checkbox" | horizontal w/disabled field

This is instructional text

This is instructional text

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>	
				

5. input type="radio" & input type="checkbox" | vertical

This is instructional text

This is instructional text

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>

				

5.2 input type="radio" & input type="checkbox" | vertical w/errors

This is instructional text

This is alert text

This is alert text

This is alert text

This is instructional text

This is alert text

This is alert text

This is alert text

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>
				

5.3 input type="radio" & input type="checkbox" | vertical w/disabled fields

This is instructional text

This is instructional text

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>
				

6. input type="text

This is instructional text

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>	
				

6.1 input type="text" w/errors

This is instructional text

This is alert text

This is alert text

This is alert text

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>	
				

6.2 input type="text" w/disabled field

This is instructional text

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>	
				

7 Large inputs

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>