<div class="powerTools ss-form js-powerTools is-open" data-select="#Categories" data-from-date="#From" data-to-date="#To">
    <div class="powerTools_form">
        <form action="#">
            <fieldset>
                <div class="form_field ">
                    <label class="form_label" for="Search">
    Search
  </label>
                    <input id="Search" placeholder="Type keywords" class="form_input " type="">
                </div>

                <div class="form_field">
                    <label class="form_label" for="Categories">
      Categories
    </label>

                    <select class="form_select" name="Categories" id="Categories" data-placeholder="Filter by category" multiple>
        <option value="option-1" selected>
          Option 1
        </option>
        <option value="option-2">
          Option 2
        </option>
        <option value="option-3">
          Option 3
        </option>
    </select>
                </div>

                <div class="g-row">
                    <div class="g g-6">
                        <div class="form_field ">
                            <label class="form_label" for="From">
    From date
  </label>
                            <input id="From" placeholder="" class="form_input " type="">
                        </div>

                    </div>
                    <div class="g g-6">
                        <div class="form_field ">
                            <label class="form_label" for="To">
    To date
  </label>
                            <input id="To" placeholder="" class="form_input " type="">
                        </div>

                    </div>
                </div>
            </fieldset>

            <div class="form_field form_field-actions">
                <button class="btn js-comForm_submit" type&#x3D;&quot;submit&quot;>
  Search
</button>

                <button class="btn btn-close js-comForm_close" type&#x3D;&quot;submit&quot;>
  Cancel search
</button>

            </div>
        </form>
    </div>
</div>
<div
  class="powerTools ss-form js-powerTools {{ class }}"
  data-select="#Categories"
  data-from-date="#From"
  data-to-date="#To"
>
  <div class="powerTools_form">
    <form action="#">
      <fieldset>
        {{ render '@form--text-input' search }}
        {{ render '@form--select' keywords }}
        <div class="g-row">
          <div class="g g-6">
            {{ render '@form--text-input' fromDate }}
          </div>
          <div class="g g-6">
            {{ render '@form--text-input' toDate }}
          </div>
        </div>
      </fieldset>

      <div class="form_field form_field-actions">
        {{ render '@btn' submit }}
        {{ render '@btn' cancel }}
      </div>
    </form>
  </div>
</div>
{
  "label": "Lorem ipsum",
  "labelLong": "Lorem ipsum dolor sit amet",
  "htmlText": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>",
  "htmlTextMedium": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt.</p>",
  "htmlTextShort": "<p>Integer varius tincidunt purus at laoreet. Sed congue sollicitudin.</p>",
  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus. Integer convallis maximus odio.",
  "url": "#",
  "videoUrl": "https://www.youtube.com/embed/roS6oFjCDhc",
  "search": {
    "id": "Search",
    "label": "Search",
    "placeholder": "Type keywords"
  },
  "keywords": {
    "id": "Categories",
    "label": "Categories",
    "attr": "data-placeholder=\"Filter by category\" multiple",
    "options": [
      {
        "value": "option-1",
        "label": "Option 1",
        "selected": true
      },
      {
        "value": "option-2",
        "label": "Option 2"
      },
      {
        "value": "option-3",
        "label": "Option 3"
      }
    ]
  },
  "fromDate": {
    "id": "From",
    "label": "From date",
    "placeholder": null
  },
  "toDate": {
    "id": "To",
    "label": "To date",
    "placeholder": null
  },
  "submit": {
    "label": "Search",
    "class": "js-comForm_submit",
    "el": "button",
    "attr": "type=\"submit\""
  },
  "cancel": {
    "label": "Cancel search",
    "class": "btn-close js-comForm_close",
    "el": "button",
    "attr": "type=\"submit\""
  },
  "class": "is-open"
}

By default the form is hidden on small / mobile devices and toggled via a button (added the .is-open class to the module, the button is not displayed here).

For demonstration purposes the .is-open class is added in this example.

To see a working implementation visit https://www.unibz.it/en/news/?topics=2