Direct naar hoofdinhoud

Hoofdnavigatie

Platform Beta

Filter

Afstand
Soort wandeling
.filter

The filter component is used in filter applications like Dagje Uit. Its functionality can be found in the Angular 2 application.

Markup

<div class="grid">
    <div class="grid__unit s-4-4 m-6-12 l-4-12">
        <form class="filter ng-untouched ng-pristine ng-valid">
           <div class="filter__field">
              <ns-resetform><button class="button button--native-link">Wis alle filters</button></ns-resetform>
           </div>
           <ns-filter class="filter__field" id="afstanden">
              <fieldset>
                 <legend class="filter__fieldLegend headingXS">Afstand</legend>
                 <ul class="list formfield__inputGroup">
                    <li class="list__item filter__inputGroupItem ng-untouched ng-pristine ng-valid">
                        <ns-filtertype-checkbox>
                          <div class="checkbox checkbox--filter ng-untouched ng-pristine ng-valid">     <input class="checkbox__input ng-untouched ng-pristine ng-valid" type="checkbox" id="kleinerdan11">     <label class="checkbox__label" tabindex="-1" for="kleinerdan11">       Minder dan 10 km        <span class="filter__amount">(8)</span>     </label>    </div>
                        </ns-filtertype-checkbox>
                    </li>
                    <li class="list__item filter__inputGroupItem ng-untouched ng-pristine ng-valid">
                        <ns-filtertype-checkbox>
                            <div class="checkbox checkbox--filter ng-untouched ng-pristine ng-valid">     <input class="checkbox__input ng-untouched ng-pristine ng-valid" type="checkbox" id="van11tot17">     <label class="checkbox__label" tabindex="-1" for="van11tot17">       11 tot 16 km       <span class="filter__amount">(5)</span>     </label>    </div>
                        </ns-filtertype-checkbox>
                    </li>
                 </ul>
              </fieldset>
           </ns-filter>
           <ns-filter class="filter__field" id="soort">
              <fieldset>
                 <legend class="filter__fieldLegend headingXS">Soort wandeling</legend>
                 <ul class="list formfield__inputGroup">
                    <li class="list__item filter__inputGroupItem ng-untouched ng-pristine ng-valid">
                        <ns-filtertype-checkbox>
                            <div class="checkbox checkbox--filter ng-untouched ng-pristine ng-valid">     <input class="checkbox__input ng-untouched ng-pristine ng-valid" type="checkbox" id="duinenenstrand">     <label class="checkbox__label" tabindex="-1" for="duinenenstrand">       Duinen en strand       <span class="filter__amount">(5)</span>     </label>    </div>
                        </ns-filtertype-checkbox>
                    </li>
                    <li class="list__item filter__inputGroupItem ng-untouched ng-pristine ng-valid">
                        <ns-filtertype-checkbox>
                            <div class="checkbox checkbox--filter ng-untouched ng-pristine ng-valid">     <input class="checkbox__input ng-untouched ng-pristine ng-valid" type="checkbox" id="bos">     <label class="checkbox__label" tabindex="-1" for="bos">       Bos       <span class="filter__amount">(4)</span>     </label>    </div>
                        </ns-filtertype-checkbox>
                    </li>
                 </ul>
              </fieldset>
           </ns-filter>
        </form>
    </div>
</div>