Patterns: Form inputs

<div class="o-grid o-grid--9/3 o-grid--layout">
  <div class="u-flow--m">
    <form class="mp-dynamicform">
      <section class="c-form__section u-flow--m">
        <div>
          <div class="c-input__wrap">
            <label class="c-label" for="text_input">Text</label>
            <input type="text" class="c-input " name="text_input" placeholder="Placeholder" id="text_input"    />
          </div>
        </div>
        <div>
          <div class="c-input__wrap">
            <label class="c-label" for="select">Select</label>
            <select class="c-input c-input--select" name="select" id="select"  >
              <option value="">Placeholder</option>
              <option value="option-1" >Option 1</option>
              <option value="Option 2" >Option 2</option>
              <option value="option-3" >Option 3</option>
            </select>
          </div>
        </div>
        <div>
          <label class="c-label" for="textarea">Textarea</label>
          <textarea class="c-input c-input--textarea" name="textarea" placeholder="Placeholder" id="textarea"  ></textarea>
        </div>
        <label class="c-label">Checkboxes</label>
        <div>
          <input type="checkbox" class="c-checkbox" name="tenets" id="Live" value="Live"     />
          <label for="Live">Live</label>
        </div>
        <div>
          <input type="checkbox" class="c-checkbox" name="tenets" id="Laugh" value="Laugh"     />
          <label for="Laugh">Laugh</label>
        </div>
        <div>
          <input type="checkbox" class="c-checkbox" name="tenets" id="Love" value="Love"     />
          <label for="Love">Love</label>
        </div>
        <label class="c-label">Radio buttons</label>
        <div>
          <input type="radio" class="c-radio" name="facts" id="Bears" value="Bears"     />
          <label for="Bears">Bears</label>
        </div>
        <div>
          <input type="radio" class="c-radio" name="facts" id="Beets" value="Beets"     />
          <label for="Beets">Beets</label>
        </div>
        <div>
          <input type="radio" class="c-radio" name="facts" id="Battlestar Galactica" value="Battlestar Galactica"     />
          <label for="Battlestar Galactica">Battlestar Galactica</label>
        </div>
        <label class="c-label">Toggle</label>
        <label for="toggle" class="c-toggle">
          <input type="checkbox" class="c-toggle__checkbox" id="toggle" value="" role="switch" aria-checked="false" aria-label="Toggle"     />
          <span class="c-toggle__slider"></span>
          <span class="c-toggle__label">Toggle</span>
        </label>
      </section>
      <section class="c-form__section u-flow--m">
        <legend id="variations"><code>&lt;input&gt;</code> variations</legend>
        <div>
          <div class="c-input__wrap">
            <label class="c-label" for="email_input">Email</label>
            <input type="email" class="c-input " name="email_input" placeholder="Placeholder" id="email_input"    />
          </div>
        </div>
        <div>
          <div class="c-input__wrap">
            <label class="c-label" for="password_input">Password</label>
            <input type="password" class="c-input " name="password_input" placeholder="" id="password_input"    />
          </div>
        </div>
        <div>
          <div class="c-input__wrap">
            <label class="c-label" for="date_input">Date</label>
            <input type="date" class="c-input " name="date_input" placeholder="Placeholder" id="date_input"    />
          </div>
        </div>
        <div>
          <div class="c-input__wrap">
            <label class="c-label" for="search_input">Search</label>
            <input type="search" class="c-input " name="search_input" placeholder="Placeholder" id="search_input"    />
          </div>
        </div>
        <div>
          <div class="c-input__wrap">
            <label class="c-label" for="tel_input">Telephone</label>
            <input type="tel" class="c-input " name="tel_input" placeholder="Placeholder" id="tel_input"    />
          </div>
        </div>
        <div>
          <div class="c-input__wrap">
            <label class="c-label" for="number_input">Number</label>
            <input type="number" class="c-input " name="number_input" placeholder="Placeholder" id="number_input"    />
          </div>
        </div>
        <div>
          <div class="c-input__wrap">
            <label class="c-label" for="file_input">File</label>
            <input type="file" class="c-input c-input--file" name="file_input" placeholder="" id="file_input"    />
          </div>
        </div>
        <div>
          <div class="c-input__wrap">
            <label class="c-label" for="range_input">Range</label>
            <input type="range" class="c-input " name="range_input" placeholder="Placeholder" id="range_input"    />
          </div>
        </div>
        <div>
          <div class="c-input__wrap">
            <label class="c-label" for="url_input">URL</label>
            <input type="url" class="c-input " name="url_input" placeholder="Placeholder" id="url_input"    />
          </div>
        </div>
        <div>
          <div class="c-input__wrap">
            <label class="c-label" for="color_input">Color</label>
            <input type="color" class="c-input " name="color_input" placeholder="Placeholder" id="color_input"    />
          </div>
        </div>
      </section>
      <section class="c-form__section u-flow--m">
        <legend id="disabled">Disabled</legend>
        <div>
          <div class="c-input__wrap">
            <label class="c-label" for="text_input">Text</label>
            <input type="text" class="c-input " name="text_input" placeholder="Placeholder" id="text_input"  disabled  />
          </div>
        </div>
        <div>
          <div class="c-input__wrap">
            <label class="c-label" for="select">Select</label>
            <select class="c-input c-input--select" name="select" id="select"  disabled>
              <option value="">Placeholder</option>
              <option value="option-1" >Option 1</option>
              <option value="Option 2" >Option 2</option>
              <option value="option-3" >Option 3</option>
            </select>
          </div>
        </div>
        <div>
          <label class="c-label" for="textarea">Textarea</label>
          <textarea class="c-input c-input--textarea" name="textarea" placeholder="Placeholder" id="textarea"  disabled></textarea>
        </div>
        <label class="c-label">Checkboxes</label>
        <div>
          <input type="checkbox" class="c-checkbox" name="tenets--disabled" id="Live--disabled" value=""   disabled  />
          <label for="Live--disabled">Live</label>
        </div>
        <div>
          <input type="checkbox" class="c-checkbox" name="tenets--disabled" id="Laugh--disabled" value=""   disabled  />
          <label for="Laugh--disabled">Laugh</label>
        </div>
        <div>
          <input type="checkbox" class="c-checkbox" name="tenets--disabled" id="Love--disabled" value=""   disabled  />
          <label for="Love--disabled">Love</label>
        </div>
        <label class="c-label">Radio buttons</label>
        <div>
          <input type="radio" class="c-radio" name="facts--disabled" id="Bears--disabled" value=""   disabled  />
          <label for="Bears--disabled">Bears</label>
        </div>
        <div>
          <input type="radio" class="c-radio" name="facts--disabled" id="Beets--disabled" value=""   disabled  />
          <label for="Beets--disabled">Beets</label>
        </div>
        <div>
          <input type="radio" class="c-radio" name="facts--disabled" id="Battlestar Galactica--disabled" value=""   disabled  />
          <label for="Battlestar Galactica--disabled">Battlestar Galactica</label>
        </div>
        <label class="c-label">Toggle</label>
        <label for="toggle--disabled" class="c-toggle">
          <input type="checkbox" class="c-toggle__checkbox" id="toggle--disabled" value="" role="switch" aria-checked="false" aria-label="Toggle"   disabled  />
          <span class="c-toggle__slider"></span>
          <span class="c-toggle__label">Toggle</span>
        </label>
        <div>
          <div class="c-input__wrap">
            <label class="c-label" for="email_input">Email</label>
            <input type="email" class="c-input " name="email_input" placeholder="Placeholder" id="email_input"  disabled  />
          </div>
        </div>
        <div>
          <div class="c-input__wrap">
            <label class="c-label" for="password_input">Password</label>
            <input type="password" class="c-input " name="password_input" placeholder="" id="password_input"  disabled  />
          </div>
        </div>
        <div>
          <div class="c-input__wrap">
            <label class="c-label" for="date_input">Date</label>
            <input type="date" class="c-input " name="date_input" placeholder="Placeholder" id="date_input"  disabled  />
          </div>
        </div>
        <div>
          <div class="c-input__wrap">
            <label class="c-label" for="search_input">Search</label>
            <input type="search" class="c-input " name="search_input" placeholder="Placeholder" id="search_input"  disabled  />
          </div>
        </div>
        <div>
          <div class="c-input__wrap">
            <label class="c-label" for="tel_input">Telephone</label>
            <input type="tel" class="c-input " name="tel_input" placeholder="Placeholder" id="tel_input"  disabled  />
          </div>
        </div>
        <div>
          <div class="c-input__wrap">
            <label class="c-label" for="number_input">Number</label>
            <input type="number" class="c-input " name="number_input" placeholder="Placeholder" id="number_input"  disabled  />
          </div>
        </div>
        <div>
          <div class="c-input__wrap">
            <label class="c-label" for="file_input">File</label>
            <input type="file" class="c-input c-input--file" name="file_input" placeholder="" id="file_input"  disabled  />
          </div>
        </div>
        <div>
          <div class="c-input__wrap">
            <label class="c-label" for="range_input">Range</label>
            <input type="range" class="c-input " name="range_input" placeholder="Placeholder" id="range_input"  disabled  />
          </div>
        </div>
        <div>
          <div class="c-input__wrap">
            <label class="c-label" for="url_input">URL</label>
            <input type="url" class="c-input " name="url_input" placeholder="Placeholder" id="url_input"  disabled  />
          </div>
        </div>
        <div>
          <div class="c-input__wrap">
            <label class="c-label" for="color_input">Color</label>
            <input type="color" class="c-input " name="color_input" placeholder="Placeholder" id="color_input"  disabled  />
          </div>
        </div>
      </section>
    </form>
    <div class="mp c-alert c-alert--info">
      <h3>To do:</h3>
      <ul>
        <li>Allow extra attributes for some input types (e.g. "step" on number inputs)</li>
        <li>Allow state attribute, e.g. disabled, error, prefilled</li>
        <li>Show/hide control on password input (optional)</li>
        <li>Better design for range input</li>
        <li>Better design for color input</li>
      </ul>
      <svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--info">
        <use xlink:href="/static/svg/sprite.svg#info"></use>
      </svg>
    </div>
  </div>
</div>