Filter elements

In progress

Collection of usable filter and form elements

# Search field example

  <hy-search-field input-id="search" label="Search degree programmes" />

<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": "Dropdown item with longish text", "value": "exam_1"},
  {"id": "2", "label": "Exam 2", "value": "exam_2"},
  {"id": "3", "label": "Dropdown item with very long text to see how this breaks things", "value": "exam_3"}
  ]'
></hy-dropdown>

<hy-dropdown
  single
  dropdown-label="Type"
  default-label="Choose..."
  dropdown-id="example-dropdown-1"
  dropdown-options='[
    {"id": "1", "label": "Exam 1", "value": "exam_1"},
    {"id": "2", "label": "Exam 2 with longer label", "value": "exam_2"},
    {"id": "3", "label": "Exam 3", "value": "exam_3"}
    ]'
></hy-dropdown>
<hy-dropdown
  single
  dropdown-label="Topic"
  dropdown-id="example-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>

# Selected filters example

<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>

# Checkbox example

<hy-box pt="2" pb="2" align="center">
  <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>
  <hy-checkbox checkbox-id="7" checkbox-value="checkbox_7" checkbox-label="Introduction course Auto checked"
            checkbox-checked="true"></hy-checkbox>
</hy-box>
<hy-box>
  <hy-checkbox variant="button" checkbox-id="4" checkbox-value="checkbox_4" checkbox-label="Web pages (204)"></hy-checkbox>
  <hy-checkbox variant="button" checkbox-id="5" checkbox-value="checkbox_5" checkbox-label="People (89)"></hy-checkbox>
  <hy-checkbox variant="button" checkbox-id="6" checkbox-value="checkbox_6" checkbox-label="Faculties and Units (243)"></hy-checkbox>
  <hy-checkbox variant="button" checkbox-id="8" checkbox-value="checkbox_8" checkbox-label="Introduction course Auto checked (11)"
            checkbox-checked="true"></hy-checkbox>
</hy-box>

# Visibility tools example

  <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>

# Search field Properties

Property Attribute Description Type Default
inputId input-id string undefined
isLabelHidden is-label-hidden boolean false
label label string undefined

# Downdown Properties

Property Attribute Description Type Default
single single Set this to use single select boolean false
dropdownItemId dropdown-item-id number \| string undefined
dropdownItemLabel dropdown-item-label string undefined
dropdownItemValue dropdown-item-value number \| string undefined
isLast is-last boolean false

# Selected filter Properties

Property Attribute Description Type Default
filterGroupItemId filter-group-item-id number \| string undefined
filterGroupItemLabel filter-group-item-label string undefined

# Checkbox Properties

Property Attribute Description Type Default
checkboxChecked checkbox-checked Checked attribute boolean false
checkboxId checkbox-id Unique id for checkbox element number \| string undefined
checkboxLabel checkbox-label Label for input to describe string undefined
checkboxValue checkbox-value Value for input element number \| string undefined
variant variant Variant to deifne what style of checkbox to use CheckboxVariants.button \| CheckboxVariants.default CheckboxVariants.default

← Footer action →