<div class="form-item form-item--select form-item--required">
    <label for="form-example-inquiry-reason" class="label label--required">Reason of inquiry</label>
    <div class="select-wrapper">
        <select id="form-example-inquiry-reason" name="inquiry-reason" class="select js-select">
      <option value="">Select</option>
      <option value="repair">Repair</option>
      <option value="order">Order Status</option>
      <option value="returns">Returns</option>
      <option value="general">General Questions</option>
    </select>
    </div>
</div>
<div class="form-item form-item--select{{#if required}} form-item--required{{/if}}{{#if error}} form-item--error{{/if}}{{#if locked}} form-item--locked{{/if}}">
  {{#if label}}
  {{> @label required=required value=label id=id }}
  {{/if}}
  {{#if sublabel}}
  <span class="sublabel">{{sublabel}}</span>
  {{/if}}
  <div class="select-wrapper">
    <select id="{{id}}"{{#if name}} name="{{name}}"{{/if}} class="select js-select{{#each selectClasses}} {{this}}{{/each}}"{{#if autocomplete}} autocomplete="{{autocomplete}}"{{/if}}>
      {{#each options}}
      <option value="{{@key}}">{{this}}</option>
      {{/each}}
      {{#if selected}}
      <option value="{{selected.value}}" selected>{{selected.option}}</option>
      {{/if}}
    </select>
  </div>
  {{#if error}}
  <span class="input-error">{{error}}</span>
  {{/if}}
</div>
{
  "id": "form-example-inquiry-reason",
  "name": "inquiry-reason",
  "label": "Reason of inquiry",
  "required": true,
  "options": {
    "": "Select",
    "repair": "Repair",
    "order": "Order Status",
    "returns": "Returns",
    "general": "General Questions"
  }
}
  • Content:
    (function (window) {
      'use strict';
    
      const emptySelectClass = 'js-select--empty';
    
      // Adds/removes a class when the empty option is selected, for styling.
      function handleOptionChange(e) {
        const select = e.target;
    
        if (select.value == '') {
          select.classList.add(emptySelectClass);
        }
        else {
          select.classList.remove(emptySelectClass);
        }
      }
    
      function init() {
        const selects = document.querySelectorAll('.js-select');
    
        for (let i = 0; i < selects.length; i++) {
          if (!selects[i].classList.contains('js-component-init')) {
            selects[i].addEventListener('change', handleOptionChange);
            triggerNativeEvent(selects[i], 'change');
    
            selects[i].classList.add('js-component-init');
          }
        }
      }
    
      // Allow application JS to reinitialize any instances added with Ajax, etc.
      if (typeof componentEvents !== 'undefined') {
        componentEvents.on('component-init', init);
      }
    
      init();
    
    })(this);
    
  • URL: /components/raw/select-normal/select-normal.js
  • Filesystem Path: src/components/01-elements/form-items/select/select-normal/select-normal.js
  • Size: 964 Bytes
  • Content:
    // Note: This entire stylesheet is served as critical CSS.
    /* critical:start */
    .select-wrapper {
      position: relative;
    
      select {
        width: 100%;
        height: 50px;
        padding: 10px 40px 10px 20px;
        border: 1px solid $color-medium-dark;
        border-radius: 0;
        background: $color-white;
        font-size: 1.4rem;
        letter-spacing: 1px;
        cursor: pointer;
        box-sizing: border-box;
        appearance: none;
    
        &:active,
        &:focus {
          border-color: $color-primary;
        }
    
        &.js-select--empty {
          color: $color-medium-dark;
        }
    
        // Hides native arrow in IE11.
        &::-ms-expand {
          display: none;
        }
    
        .form-item--error & {
          border: 1px solid $color-error;
        }
    
        .form-item--locked & {
          pointer-events: none;
        }
      }
    
      &::after {
        display: block;
        position: absolute;
        top: 23px;
        right: 20px;
        width: 11px;
        height: 5px;
        background-image: url('../icons/individual/arrow-down.svg');
        content: '';
        pointer-events: none;
      }
    
      .form-item--locked & {
        &::after {
          display: none;
        }
      }
    }
    /* critical:end */
    
  • URL: /components/raw/select-normal/select-normal.scss
  • Filesystem Path: src/components/01-elements/form-items/select/select-normal/select-normal.scss
  • Size: 1.1 KB

There are no notes for this item.