Filters: With Select

Ready

HTML
View
Context
Assets
Notes


        
        <form class="filters">
      <div class="filters__list">
          <div class="filters__list-item">

              <div class="text-field--light date-picker--light is-initialized" data-disable-text-field-js data-language="" data-format="" data-min-date="" data-max-date="">
                  <div class="text-field__wrapper date-picker__wrapper">
                      <input class="text-field__input date-picker__input" id="orderDateFrom" type="text" name="orderDateFrom" />
                      <label class="text-field__label date-picker__label" for="orderDateFrom">Bestelldatum von</label>
                      <button type="reset" class="date-picker__reset"></button>
                  </div>

              </div>
          </div>
          <div class="filters__list-item">

              <div class="text-field--light date-picker--light is-initialized" data-disable-text-field-js data-language="" data-format="" data-min-date="" data-max-date="">
                  <div class="text-field__wrapper date-picker__wrapper">
                      <input class="text-field__input date-picker__input" id="orderDateTo" type="text" name="orderDateTo" />
                      <label class="text-field__label date-picker__label" for="orderDateTo">Bestelldatum bis</label>
                      <button type="reset" class="date-picker__reset"></button>
                  </div>

              </div>
          </div>
          <div class="filters__list-item">
              <div class="text-field--light is-initialized">
                  <div class="text-field__wrapper">
                      <input class="text-field__input" id="orderNumber" type="text" name="orderNumber" />
                      <label class="text-field__label" for="orderNumber">Bestellnummer
                      </label>
                  </div>

              </div>
          </div>
          <div class="filters__list-item">
              <div class="select--light is-initialized with-label">
                  <div class="select__wrapper">
                      <select class="select__select" id="cartType" name="cartType">

                          <option value="" disabled selected>Please choose</option>
                          <option value="option1">Endkunde</option>
                          <option value="option2">Vororder</option>
                          <option value="option3">Händler</option>
                      </select>
                      <label class="select__label" for="cartType">Warenkorb-Typ
                      </label>
                  </div>

              </div>
          </div>
          <div class="filters__list-buttons">
              <div class="filters__list-button--reset">
                  <button class="button--tertiary-light-small" value="yes" type="reset">Zurücksetzen</button>
              </div>
              <div class="filters__list-button--submit">
                  <button class="button--primary-small" value="yes" type="submit">Suchen</button>
              </div>
          </div>
      </div>
  </form>


        {% include '@SharedComponents/modules/shared-account/components/filters/filters.twig' %}


        
            
            {
  "resetButton": {
    "variant": "tertiary-light-small",
    "type": "button",
    "role": "reset",
    "title": "Zurücksetzen",
    "value": "yes",
    "disabled": false
  },
  "submitButton": {
    "variant": "primary-small",
    "type": "button",
    "role": "submit",
    "title": "Suchen",
    "value": "yes",
    "disabled": false
  },
  "filters": [
    {
      "path": "modules/shared/components/form-components/date-picker/date-picker",
      "data": {
        "variant": "light",
        "language": "",
        "format": "",
        "minDate": "",
        "maxDate": "",
        "id": "orderDateFrom",
        "name": "orderDateFrom",
        "label": "Bestelldatum von",
        "required": false,
        "value": "",
        "disabled": false,
        "type": "text",
        "autocomplete": "",
        "error": "",
        "helper": ""
      }
    },
    {
      "path": "modules/shared/components/form-components/date-picker/date-picker",
      "data": {
        "variant": "light",
        "language": "",
        "format": "",
        "minDate": "",
        "maxDate": "",
        "id": "orderDateTo",
        "name": "orderDateTo",
        "label": "Bestelldatum bis",
        "required": false,
        "value": "",
        "disabled": false,
        "type": "text",
        "autocomplete": "",
        "error": "",
        "helper": ""
      }
    },
    {
      "path": "modules/shared/components/form-components/text-field/text-field",
      "data": {
        "variant": "light",
        "id": "orderNumber",
        "name": "orderNumber",
        "label": "Bestellnummer",
        "required": false,
        "value": "",
        "disabled": false,
        "type": "text",
        "autocomplete": "",
        "error": "",
        "helper": ""
      }
    },
    {
      "path": "modules/shared/components/form-components/select/select",
      "data": {
        "variant": "light",
        "id": "cartType",
        "name": "cartType",
        "label": "Warenkorb-Typ",
        "required": false,
        "disabled": false,
        "selected": false,
        "options": {
          "option1": "Endkunde",
          "option2": "Vororder",
          "option3": "Händler"
        },
        "choose": "Please choose"
      }
    }
  ]
}

File:

Content:
import './filters.scss';
URL: /components/raw/filters/filters.js
Filesystem Path: src/components/modules/shared-account/components/filters/filters.js
Size: 24 Bytes

Content:


                                @import "~shared/base";
@import "~cando-cx-components-library/components/modules/shared-account/components/filters/filters";

URL: /components/raw/filters/filters.scss
Filesystem Path: src/components/modules/shared-account/components/filters/filters.scss
Size: 124 Bytes

No notes defined.