FormFilter Forms

---
// FormFilter, recovered from blurr-components.pages.dev
---

<section class="ffl"> <div class="ffl__inner"> <h2 class="ffl__headline">Filter resultaten</h2> <form class="ffl__form" novalidate> <div class="ffl__search-wrap"> <input class="ffl__search" type="search" placeholder="Zoek op trefwoord…"> <button class="ffl__search-btn" type="submit" aria-label="Zoeken"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line> </svg> </button> </div> <div class="ffl__filters"> <div class="ffl__group"> <span class="ffl__group-label">Dienst</span> <div class="ffl__checkboxes"> <label class="ffl__checkbox"> <input type="checkbox" name="filter-0" value="SEO"> <span>SEO</span> </label><label class="ffl__checkbox"> <input type="checkbox" name="filter-0" value="Google Ads"> <span>Google Ads</span> </label><label class="ffl__checkbox"> <input type="checkbox" name="filter-0" value="Social Media"> <span>Social Media</span> </label><label class="ffl__checkbox"> <input type="checkbox" name="filter-0" value="Webdesign"> <span>Webdesign</span> </label><label class="ffl__checkbox"> <input type="checkbox" name="filter-0" value="Branding"> <span>Branding</span> </label> </div> </div><div class="ffl__group"> <span class="ffl__group-label">Budget</span> <div class="ffl__checkboxes"> <label class="ffl__checkbox"> <input type="checkbox" name="filter-1" value="< € 500 / mnd"> <span>&lt; € 500 / mnd</span> </label><label class="ffl__checkbox"> <input type="checkbox" name="filter-1" value="€ 500–1.000"> <span>€ 500–1.000</span> </label><label class="ffl__checkbox"> <input type="checkbox" name="filter-1" value="€ 1.000–2.500"> <span>€ 1.000–2.500</span> </label><label class="ffl__checkbox"> <input type="checkbox" name="filter-1" value="> € 2.500"> <span>&gt; € 2.500</span> </label> </div> </div><div class="ffl__group"> <span class="ffl__group-label">Branche</span> <div class="ffl__checkboxes"> <label class="ffl__checkbox"> <input type="checkbox" name="filter-2" value="E-commerce"> <span>E-commerce</span> </label><label class="ffl__checkbox"> <input type="checkbox" name="filter-2" value="B2B"> <span>B2B</span> </label><label class="ffl__checkbox"> <input type="checkbox" name="filter-2" value="Horeca"> <span>Horeca</span> </label><label class="ffl__checkbox"> <input type="checkbox" name="filter-2" value="Zorg"> <span>Zorg</span> </label><label class="ffl__checkbox"> <input type="checkbox" name="filter-2" value="Technologie"> <span>Technologie</span> </label> </div> </div> </div> <div class="ffl__actions"> <button class="ffl__btn" type="submit">Resultaten tonen</button> <button class="ffl__reset" type="reset">Filters wissen</button> </div> </form> </div> </section>

<style>
.ffl{background:#f9f9fb;padding:3rem 1.5rem}
.ffl__inner{max-width:860px;margin:0 auto}
.ffl__headline{font-size:1.5rem;font-weight:700;color:var(--color-primary, #0a0a0a);margin:0 0 1.5rem}
.ffl__form{display:flex;flex-direction:column;gap:1.5rem}
.ffl__search-wrap{position:relative;max-width:520px}
.ffl__search{width:100%;box-sizing:border-box;padding:.75rem 3rem .75rem 1rem;border:1.5px solid #e0e0e0;border-radius:8px;font-size:.95rem;background:#fff;outline:none;font-family:inherit;transition:border-color .2s}
.ffl__search:focus{border-color:var(--color-accent, #6366f1)}
.ffl__search-btn{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:#888;display:flex;align-items:center}
.ffl__filters{display:flex;flex-wrap:wrap;gap:1.5rem}
.ffl__group{display:flex;flex-direction:column;gap:.5rem;min-width:160px}
.ffl__group-label{font-size:.78rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#555}
.ffl__checkboxes{display:flex;flex-direction:column;gap:.4rem}
.ffl__checkbox{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:var(--color-primary, #0a0a0a);cursor:pointer}
.ffl__checkbox input[type=checkbox]{accent-color:var(--color-accent, #6366f1);width:15px;height:15px;cursor:pointer}
.ffl__actions{display:flex;gap:1rem;align-items:center}
.ffl__btn{padding:.8rem 1.75rem;background:var(--color-accent, #6366f1);color:#fff;border:none;border-radius:8px;font-size:.93rem;font-weight:600;cursor:pointer;transition:opacity .2s}
.ffl__btn:hover{opacity:.88}
.ffl__reset{background:none;border:none;font-size:.88rem;color:#888;cursor:pointer;text-decoration:underline;font-family:inherit}
.ffl__reset:hover{color: #e8e8e8}
</style>