Form inputs

Form inputs.

Text field

Name This is hint text This is a validation message

<div class="ch-form__group">
  <label for="example1" class="ch-form__control-label">Name</label>
  <span class="ch-form__control-hint">This is hint text</span>
  <span class="ch-form__control-validation">This is a validation message</span>
  <input type="text" id="example1" name="example1" class="ch-form__control" />
</div>

Select box

What would you like to see?

<div class="ch-form__group">
  <label for="example2" class="ch-form__control-label">What would you like to see?</label>
  <select id="example2" name="example2" class="ch-form__control">
    <option value="">All Cars</option>
    <option value="">Used Cars</option>
    <option value="">New Cars</option>
    <option value="">Nearly New Cars</option>
  </select>
</div>

Textarea

Your comments Let us know any additional requirements

<div class="ch-form__group">
  <label for="example3" class="ch-form__control-label">Your comments</label>
  <span class="ch-form__control-hint">Let us know any additional requirements</span>
  <textarea class="ch-form__control" id="example3" name="example3" rows="3"></textarea>
</div>

Validation states

To add validation you need to add a class to the ch-form__group.

Name This is an error validation message

Name This is a warning validation message

Name This is a success validation message

<div class="ch-form__group ch-form__group--[error, warning, success]">
  <label for="first-name" class="ch-form__control-label">Name</label>
  <span class="ch-form__control-validation">This is a validation message</span>
  <input type="text" id="first-name" name="first-name" class="ch-form__control" />
</div>