Forms

Form Example

    <form>
      <div class="form-group">
        <label class="required">Name</label>
        <input type="text" placeholder="e.g. Mighty Pirate&trade;" />
      </div>
      <div class="form-group">
        <label class="required">Email</label>
        <input type="email" placeholder="e.g. guybrush@skullisland.mi" />
      </div>
      <div class="form-group">
        <label class="required">Password</label>
        <input type="password" placeholder="Password" />
      </div>
      <div class="form-group">
        <div class="checkbox">
          <input id="checkbox-example-1" type="checkbox">
          <label for="checkbox-example-1">Checkbox</label>
        </div>
      </div>
      <div class="form-group">
        <button class="button" type="submit">Submit</button>
      </div>
    </form>

Inputs

Text

  <div class="form-group">
    <label class="required">First Name</label>
    <input type="text" />
  </div>

Text Area

  <div class="form-group">
    <label class="required">Label</label>
    <input type="text" />
  </div>

Select

    <div class="form-group">
      <select>
        <option>Select Option &hellip;</option>
        <option>Option</option>
        <option>Option</option>
        <option>Option</option>
        <option>Option</option>
      </select>
    </div>

Checkboxes & Radios

  <div class="form-group">
    <div class="checkbox">
      <input id="checkbox-example-2" type="checkbox">
      <label for="checkbox-example-2">Checkbox</label>
    </div>
    <div class="checkbox">
      <input id="checkbox-example-3" type="checkbox" disabled>
      <label for="checkbox-example-3">Checkbox (Disabled)</label>
    </div>
  </div>
  <div class="form-group">
    <div class="radio">
      <input id="radio-example-1" type="radio" name="radio-group">
      <label for="radio-example-1">Radio</label>
    </div>
    <div class="radio">
      <input id="radio-example-2" type="radio" name="radio-group">
      <label for="radio-example-2">Radio</label>
    </div>
    <div class="radio">
      <input id="radio-example-3" type="radio" name="radio-group" disabled>
      <label for="radio-example-3">Radio (Disabled)</label>
    </div>

Validation - Form Group

Validation can be applied to form groups. There are success and alert styles which can be applied. 

  <div class="form-group form-group--success">
    <label for="input-success">Input Success Example</label>
    <input id="input-success" type="text">
  </div>

  <div class="form-group form-group--error">
    <label for="input-error">Input Error Example</label>
    <input id="input-error" type="text">
  </div>

Validation Message

Validation Messages can give the user specific feedback to when inputting data.

Success validation message
Warning validation message
Error validation message
  <div class="input-validation input-validation--success">Success validation message</div>
  <div class="input-validation input-validation--warning">Warning validation message</div>
  <div class="input-validation input-validation--error">Error validation message</div>