Form inputs

Form inputs.

Text field

Name This is a 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 a hint text</span>
  <span class="ch-form__control-validation">This is a validation message</span>
  <input type="text" 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">Label</label>
  <select 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>

Validation states

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

Name This is a 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" name="first-name" class="ch-form__control" />
</div>