<li class="form__field">

Form fields are styled in lists and include a label class="form__label" and input class="form__input"

									
										<h3><code>&lt;li class="form__field"&gt;</code></h3>
<p>Form fields are styled in lists and include a <code>label class="form__label"</code> and <code>input class="form__input"</code></p>

<form class="form" role="form">
    <ul>
        <li class="form__field">
            <label class="form__label" for="text">Text Input</label>
            <input class="form__input" id="text" type="text" placeholder="Text Input">
        </li>
        <li class="form__field">
            <label class="form__label" for="password">Password</label>
            <input class="form__input" id="password" type="password" placeholder="Type your Password">
        </li>
        <li class="form__field">
            <label class="form__label" for="webaddress">Web Address</label>
            <input class="form__input" id="webaddress" type="url" placeholder="http://yoursite.com">
        </li>
        <li class="form__field">
            <label class="form__label" for="emailaddress">Email Address</label>
            <input class="form__input" id="emailaddress" type="email" placeholder="name@email.com">
        </li>
        <li class="form__field">
            <label class="form__label" for="search">Search</label>
            <input class="form__input" id="search" type="search" placeholder="Enter Search Term">
        </li>
        <li class="form__field">
            <label class="form__label" for="number">Number Input <abbr title="Required">*</abbr></label>
            <input class="form__input" id="number" type="number" placeholder="Enter a Number" pattern="[0-9]*">
        </li>
        <li class="form__field">
            <label class="form__label" for="textarea">Textarea</label>
            <textarea class="form__input textarea" id="textarea" rows="8" cols="48" placeholder="Enter your message here"></textarea>
        </li>
        <li class="form__field form__field--danger">
            <label class="form__label">Error Condition</label>
            <input class="form__input" type="text" placeholder="Text Input">
        </li>
        <li class="form__field form__field--warning">
            <label class="form__label">Warning Condition</label>
            <input class="form__input" type="text" placeholder="Text Input">
        </li>
        <li class="form__field form__field--success">
            <label class="form__label">Success Condition</label>
            <input class="form__input" type="text" placeholder="Text Input">
        </li>
    </ul>
</form>
									
								

<div class="form__select">

									
										<h3><code>&lt;div class="form__select"&gt;</code></h3>
<form class="form" role="form">
  <ul>
      <li class="form__field">
        <label class="form__label" for="select">Select</label>

        <div class="form__select">
          <select id="select">
            <option value="#" disabled>Favorite Doctor…</option>
            <option>Colin Baker</option>
            <option>Sylvester McCoy</option>
            <option>Paul McGann</option>
            <option>Christopher Eccleston</option>
            <option>David Tennant</option>
            <option>Matt Smith</option>
          </select>
        </div>
      </li>
  </ul>
</form>
									
								

<input type="checkbox">

									
										<h3><code>&lt;input type="checkbox"&gt;</code></h3>
<form action="#" class="form" role="form">

    <ul>
        <li><label for="checkbox1"><input id="checkbox1" name="checkbox" type="checkbox" checked="checked"> Choice A</label></li>
        <li><label for="checkbox2"><input id="checkbox2" name="checkbox" type="checkbox"> Choice B</label></li>
        <li><label for="checkbox3"><input id="checkbox3" name="checkbox" type="checkbox"> Choice C</label></li>
    </ul>

</form>
									
								

<input type="radio" class="radio">

									
										<h3><code>&lt;input type="radio" class="radio"&gt;</code></h3>
<form action="#" class="form" role="form">
	<ul>
	    <li><label for="radio1"><input id="radio1" name="radio" type="radio" class="radio" checked="checked"> Option 1</label></li>
	    <li><label for="radio2"><input id="radio2" name="radio" type="radio" class="radio"> Option 2</label></li>
	    <li><label for="radio3"><input id="radio3" name="radio" type="radio" class="radio"> Option 3</label></li>
	</ul>
</form>