# Filter

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <div class="demo demo--accented">
        <auto-submit-form>
            <form class="filter-group">
                <div class="filter-group__item">
                    <label class="filter-label" for="filter">Tag wählen:</label>
                    <select name="filter" id="filter" class="filter-select">
                        <option value="all">All</option>
                        <option value="category1">Category 1</option>
                        <option value="category2">Category 2</option>
                        <option value="category3">Category 3</option>
                    </select>
                </div>
                <button type="submit" class="btn btn--xsmall">Filtern</button>
            </form>
        </auto-submit-form>
        <auto-submit-form>
            <form class="filter-group">
                <div class="filter-group__item">
                    <label class="filter-label" for="filter">Tag wählen:</label>
                    <select name="filter" id="filter" class="filter-select">
                        <option value="all">All</option>
                        <option value="category1">Category 1</option>
                        <option value="category2">Category 2</option>
                        <option value="category3">Category 3</option>
                    </select>
                </div>
                <div class="filter-group__item">
                    <label class="filter-label" for="filter">Tag wählen:</label>
                    <select name="filter" id="filter" class="filter-select">
                        <option value="all">All</option>
                        <option value="category1">Category 1</option>
                        <option value="category2">Category 2</option>
                        <option value="category3">Category 3</option>
                    </select>
                </div>
                <div class="filter-group__item">
                    <label class="filter-label" for="filter">Tag wählen:</label>
                    <select name="filter" id="filter" class="filter-select">
                        <option value="all">All</option>
                        <option value="category1">Category 1</option>
                        <option value="category2">Category 2</option>
                        <option value="category3">Category 3</option>
                    </select>
                </div>
                <button type="submit" class="btn btn--xsmall">Filtern</button>
            </form>
        </auto-submit-form>
    </div>

`
`

    <div class="demo demo--accented">
        <auto-submit-form>
            <form class="filter-group">
                <div class="filter-group__item">
                    <label class="filter-label" for="filter">Tag wählen:</label>
                    <select name="filter" id="filter" class="filter-select">
                        <option value="all">All</option>
                        <option value="category1">Category 1</option>
                        <option value="category2">Category 2</option>
                        <option value="category3">Category 3</option>
                    </select>
                </div>
                <button type="submit" class="btn btn--xsmall">Filtern</button>
            </form>
        </auto-submit-form>
        <auto-submit-form>
            <form class="filter-group">
                <div class="filter-group__item">
                    <label class="filter-label" for="filter">Tag wählen:</label>
                    <select name="filter" id="filter" class="filter-select">
                        <option value="all">All</option>
                        <option value="category1">Category 1</option>
                        <option value="category2">Category 2</option>
                        <option value="category3">Category 3</option>
                    </select>
                </div>
                <div class="filter-group__item">
                    <label class="filter-label" for="filter">Tag wählen:</label>
                    <select name="filter" id="filter" class="filter-select">
                        <option value="all">All</option>
                        <option value="category1">Category 1</option>
                        <option value="category2">Category 2</option>
                        <option value="category3">Category 3</option>
                    </select>
                </div>
                <div class="filter-group__item">
                    <label class="filter-label" for="filter">Tag wählen:</label>
                    <select name="filter" id="filter" class="filter-select">
                        <option value="all">All</option>
                        <option value="category1">Category 1</option>
                        <option value="category2">Category 2</option>
                        <option value="category3">Category 3</option>
                    </select>
                </div>
                <button type="submit" class="btn btn--xsmall">Filtern</button>
            </form>
        </auto-submit-form>
    </div>

`
`

    /* No context defined. */

`
File:

- Content:
  `

      .filter-label {
        @extend %heading-font-bold;

        display: block;
        width: 100%;
        font-size: $font-size-base;
        color: $filter-label-color;
      }

      .filter-select {
        @extend %heading-font-bold;

        cursor: pointer;

        display: inline-block;

        width: 100%;
        margin-top: $spacer-xs;
        padding: $spacer-xs;

        font-size: $font-size-base;
        color: $filter-select-text-color;
        text-align: center;

        appearance: none;
        background-color: $filter-select-background-color;
        background-image: asset-url('icons/chevron-down.svg');
        background-repeat: no-repeat;
        background-position: right 0.75rem center;
        background-size: 14px 10px;
        border: 4px solid $brand-white;
      }

      auto-submit-form {
        display: block;
        width: 100%;
      }

      auto-submit-form.enhanced {
        [type='submit'] {
          display: none;
        }
      }

      .filter-group {
        display: flex;
        flex-wrap: wrap;
        gap: $spacer-xs;
        justify-content: center;
      }

      .filter-group__item {
        flex-grow: 1;
        min-width: 15rem;
        max-width: 50%;
        margin-top: 0;
      }

  `
- URL: /components/raw/filter/_filter.scss
- Filesystem Path: components/04-molecules/filter/_filter.scss
- Size: 990 Bytes

- Content:
  `

      export default class AutoSubmitForm extends HTMLElement {
        connectedCallback() {
          let form = this.querySelector('form')
          form.addEventListener('change', form.submit)
          this.classList.add('enhanced')
        }
      }

  `
- URL: /components/raw/filter/filter.js
- Filesystem Path: components/04-molecules/filter/filter.js
- Size: 214 Bytes

- Handle: @filter
- Preview:
  - With layout
  - Component only
- Filesystem Path: components/04-molecules/filter/filter.html

No notes defined.