Search user interface

In progress

Search user interface

# Example

<div style="margin: 0 16px 32px;">
  <hy-search-field input-id="search" label="Search degree programmes" />
</div>
<div style="margin: 0 16px 32px;">
  <hy-dropdown
          dropdown-label="Dropdown 1"
          dropdown-options='[
{"id": "1", "label": "Exam 1", "value": "exam_1"},
{"id": "2", "label": "Exam 2", "value": "exam_2"},
{"id": "3", "label": "Exam 3", "value": "exam_3"}
]'
  ></hy-dropdown>
  <hy-dropdown
          dropdown-label="Dropdown 2"
          dropdown-options='[
{"id": "1", "label": "Exam 1", "value": "exam_1"},
{"id": "2", "label": "Exam 2", "value": "exam_2"},
{"id": "3", "label": "Exam 3", "value": "exam_3"}
]'
  ></hy-dropdown>
  <hy-dropdown
          dropdown-label="Dropdown 3"
          dropdown-options='[
{"id": "1", "label": "Exam 1", "value": "exam_1"},
{"id": "2", "label": "Exam 2", "value": "exam_2"},
{"id": "3", "label": "Exam 3", "value": "exam_3"}
]'
  ></hy-dropdown>
  <hy-dropdown
          dropdown-label="Dropdown 4"
          dropdown-options='[
{"id": "1", "label": "Exam 1", "value": "exam_1"},
{"id": "2", "label": "Exam 2", "value": "exam_2"},
{"id": "3", "label": "Exam 3", "value": "exam_3"}
]'
  ></hy-dropdown>
</div>
<div style="margin: 0 16px 32px;">
  <hy-checkbox checkbox-id="1" checkbox-value="checkbox_1" checkbox-label="Introduction course"></hy-checkbox>
  <hy-checkbox checkbox-id="2" checkbox-value="checkbox_2" checkbox-label="Open online course"></hy-checkbox>
  <hy-checkbox checkbox-id="3" checkbox-value="checkbox_3" checkbox-label="Flexible start"></hy-checkbox>
</div>
<div style="margin: 0 16px 32px;">
  <hy-filter-group
          filter-group-label="Method of study"
          filter-group-filters='[
{"id": "1", "label": "Exam 1"},
{"id": "2", "label": "Exam 2"},
{"id": "3", "label": "Exam 3"}
]'
  ></hy-filter-group>
  <hy-filter-group
          filter-group-label="Start month"
          filter-group-filters='[
{"id": "1", "label": "September"},
{"id": "2", "label": "October"}
]'
  ></hy-filter-group>
  <hy-filter-group
          filter-group-label="Language"
          filter-group-filters='[
{"id": "1", "label": "Finnish"}
]'
  ></hy-filter-group>
</div>
<div style="margin: 0 16px 32px;">
  <hy-filter-visibility-tool filter-visibility-tool-type="toggle"></hy-filter-visibility-tool>
  <hy-filter-visibility-tool filter-visibility-tool-type="reset"></hy-filter-visibility-tool>
</div>

← Site Header →