Form

Input Fields

Field Labels inside

MemCom will be testing additional input field states, but all other eggs should follow the styling below.

<form class="input-group">
    <input type="text" class="form-control" placeholder="Field label"/>
</form>

Field labels inside error

Invalid email address! 
<form class="input-group">
    <input type="text" class="form-control invalid" placeholder="Field label"/>
    <span class="message">Invalid email address!</span>
</form>

Field labels outside

<form class="input-group">
    <div class="form-group">
        <label class="input-label" for="field-label">
          <span class="primary">Field label</span>
          <span class="secondary">(Secondary label)</span>
        </label>
        <input type="text" id="field-label" class="form-control" placeholder="Placeholder"/>
    </div>
</form>

Field labels outside error

Invalid! 
<form class="input-group">
    <div class="form-group">
        <label class="input-label" for="field-label">
            <span class="primary">Field label</span>
            <span class="secondary">(Secondary label)</span>
        </label>
        <input type="text" id="field-label" class="form-control invalid" placeholder="Placeholder"/>
        <span class="message">Invalid!</span>
    </div>
</form>

Email field

Email fields include email suggestions using mailcheck-js and email validation using a simple email regex.

All features

Activated when js-memberEmailField class is assigned to input field. To get all email features, use the following markup

<form class="input-group">
    <input type="text" class="form-control js-memberEmailField" placeholder="Field label"/>
</form>

Suggestion

Activated when js-memberEmailSuggestion class is assigned to input field. To see suggestion feature, fill the following field with "example@gmal.com" and focus out.

<form class="input-group">
    <input type="text" class="form-control js-memberEmailSuggestion" placeholder="Field label"/>
</form>

Validation

Activated when js-memberEmailValidation class is assigned to input field. To see validation feature, fill the following field with "example@" and focus out.

<form class="input-group">
    <input type="text" class="form-control js-memberEmailValidation" placeholder="Field label"/>
</form>

Input Field Calendar

The calendar gets attached to input fields with data-type="datepicker". The calendar changes to the default OS calendars
on touch devices.
NOTE: To get the date consistency across multiple platforms, the datepicker attaches a hidden input field with the
id "tk-datepicker" for desktop and attaches the tk-datepicker id to datepicker. Get the date value by using
$('#tk-datepicker').val(); will output YYYY-MM-DD format on desktop. Pre-populating the field on page load expects the populated date to be in M-D-YYYY format.

Dependency - input-calendar.js
<form class="input-group">
    <div class="form-group calendar-input">
        <input type="text" data-type="datepicker" class="form-control" placeholder="Placeholder"/>
        <span class="icon icon-general-calendar"></span>
    </div>
</form>

Type Ahead

<div class="btn-group type-ahead">
    <input type="text" class="form-control" data-search="cities" placeholder="Search cities...">
    <ul class="dropdown-menu search-list" role="menu">

    </ul>
</div>

An item.selected event is fired at the .dropdown-menu's parent element.

  //$('.type-ahead').on('item.selected', function(e, item){
  //  console.log(item)
  //});

Vendor Type Ahead (react component)

A component with dependency on React.js for searching the local vendor database with a fallback on Google Places. See documentation here.

Textarea

<textarea class="form-control" rows="3"></textarea>

Form Elements

Checkbox

NOTE: There is a nested <label> tag used for the icon instead of a <span> to fix a click rebinding issue with fastclick. The fastclick library only re-binds events to form labels and this was causing a bug on the mobile where the click event wouldn't get attached to the span, causing the checkbox toggle to not work.

<form action="">
    <input type="checkbox" class="hide" id="inlineCheckbox1" value="option1">
    <label class="checkbox-label checkbox-label-left" for="inlineCheckbox1">
        <label class="fake-checkbox icon icon-checkbox" for="inlineCheckbox1"></label>
        icon left
    </label>
</form>

Radio

<form action="">
    <input type="radio" name="radio-input" class="hide" id="inlineRadio1" value="option1">
    <label class="radio-label radio-label-left" for="inlineRadio1">
        <span class="fake-radio icon icon-radio"></span>icon left
    </label>
</form>

Toggle Buttons

<div data-toggle="checked" class="toggle-switch">
  <span class="toggle-inner-yes"></span>
  <span class="toggle-inner-no"></span>
  <input id="toggle-switch" type="checkbox" name="toggle-switch" class="toggle-switch-checkbox">
  <label for="toggle-switch" class="toggle-switch-btn"></label>
</div>

Drop Downs

Dropdown Menu

<div class="btn-group drop-down">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    <span class="label">Dropdown</span>
    <span class="icon icon-general-caret-down"></span>
    <span class="icon icon-general-caret-up"></span>
  </button>
  <ul class="list-unstyled xs-divider dropdown-menu search-list" role="menu">
    <li class="icon icon-vendor-rdp">
      <span>This is a very long dropdown menu item with an icon</span>
    </li>
    <li class="icon icon-vendor-bwp">
      <span>Short text with icon</span>
    </li>
    <li>
      <span>A very long dropdown item without icon</span>
    </li>
    <li class="">
      <span>Short text option</span>
    </li>
    <li class="icon icon-vendor-mfw">
      <span>Tuxedos and Formal Wear</span>
    </li>
    <li>
      <span>Ceremony Musicians</span>
    </li>
    <li class="icon icon-vendor-brg">
      <span>Gifts &amp; Registries</span>
    </li>
    <li>
      <span>Travel &amp; Honeymoons</span>
    </li>
    <li class="icon icon-vendor-gac">
      <span>Guest Accommodations</span>
    </li>
    <li class="icon icon-vendor-bch">
      <span>Bachelor(ette) Parties</span>
    </li>
    <li class="icon icon-vendor-dnc">
      <span>Dance Lessons</span>
    </li>
    <li class="icon icon-vendor-lad">
      <span>Lighting &amp; Decor</span>
    </li>
    <li class="icon icon-vendor-cal">
      <span>Calligraphy</span>
    </li>
    <li class="divider"></li>
    <li>
      <span>Gown Cleaning &amp; Preservation</span>
    </li>
    <li>
      <span>Fashion Jewelry and Accessories</span>
    </li>
    <li>
      <span>House &amp; Home</span>
    </li>
    <li>
      <span>Wine, Champagne, &amp; Liquor</span>
    </li>
  </ul>
</div>

Dropdown with search

<div class="btn-group drop-down">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    <span class="label">Dropdown</span>
    <span class="icon icon-general-caret-down"></span>
    <span class="icon icon-general-caret-up"></span>
  </button>
  <div class="search">
    <input type="text" class="form-control" placeholder="Search...">
  </div>
  <ul class="list-unstyled xs-divider dropdown-menu search-list" role="menu">
    <li class="icon icon-vendor-rdp">
      <span>This is a very long dropdown menu item with an icon</span>
    </li>
    <li class="icon icon-vendor-bwp">
      <span>Short text with icon</span>
    </li>
    <li>
      <span>A very long dropdown item without icon</span>
    </li>
    <li class="">
      <span>Short text option</span>
    </li>
    <li class="icon icon-vendor-mfw">
      <span>Tuxedos and Formal Wear</span>
    </li>
    <li>
      <span>Ceremony Musicians</span>
    </li>
    <li class="icon icon-vendor-brg">
      <span>Gifts &amp; Registries</span>
    </li>
    <li>
      <span>Travel &amp; Honeymoons</span>
    </li>
    <li class="icon icon-vendor-gac">
      <span>Guest Accommodations</span>
    </li>
    <li class="icon icon-vendor-bch">
      <span>Bachelor(ette) Parties</span>
    </li>
    <li class="icon icon-vendor-dnc">
      <span>Dance Lessons</span>
    </li>
    <li class="icon icon-vendor-lad">
      <span>Lighting &amp; Decor</span>
    </li>
    <li class="icon icon-vendor-cal">
      <span>Calligraphy</span>
    </li>
    <li class="divider"></li>
    <li>
      <span>Gown Cleaning &amp; Preservation</span>
    </li>
    <li>
      <span>Fashion Jewelry and Accessories</span>
    </li>
    <li>
      <span>House &amp; Home</span>
    </li>
    <li>
      <span>Wine, Champagne, &amp; Liquor</span>
    </li>
  </ul>
</div>

Search List

Use the .search-list class to style lists for dropdowns and typeaheads. Note: the inline styles in the example are normally added by javascript in the typeahead scripts.

<div class="container" style="height: 280px;"><div class="row"><div class="col-xs-6">
  <ul class="dropdown-menu search-list" role="menu" style="display: block;">
    <li><a>Canton, OH</a></li>
    <li><a>Canton, GA</a></li>
    <li><a>Canton, MA</a></li>
    <li><a>Canby, OR</a></li>
    <li><a>Canton, IL</a></li>
    <li><a>Canyon, TX</a></li>
  </ul>
</div></div></div>