NedDev®
NL Get in touch
Home Work
Services
SaaS developmentAI developmentAPI developmentMobile app developmentGoogle Ads managementHeadless ShopifyLaravel developmentNext.js developmentReact developmentTypeScript engineeringUI/UX designSEO & AEOEcommerce development
Solutions
AI solutionsB2B platformsE-commerceHospitalityLead generationLogisticsEducationProcess automationSaaS platformsStartup MVPReal estateHealthcare
Industries
LegalHealthcareReal estateFinanceHospitality
Regions
The HagueRotterdamAmsterdamUtrechtEindhovenAlmereBredaArnhemNijmegenTilburgEnschedeGroningenLeidenDelftZoetermeerDen Bosch
Studio
AboutProcessLabBlogContact

Hero-zoeker: postcode, soort en straal New

Search-as-hero for childcare, sports clubs or multi-location practices: type chips, postcode, radius and a button that live-counts matching locations. Chips are real checkboxes (Tab and Space work), the count is announced via aria-live; error, empty, loading and result states included. In production, resolve postcodes via the PDOK Locatieserver.

Kinderopvang Klavertje · 14 locaties rond Amersfoort

Opvang dichtbij huis, met vaste gezichten op de groep

Kinderdagverblijf, peuteropvang en BSO in Amersfoort, Hoogland, Leusden en Soest. Zoek een locatie en plan een rondleiding.

Soort opvang

Probeer 3811, 3828 of 3768.

Pedagogisch medewerker speelt met twee peuters in de tuin van een kinderdagverblijf

Rondleiding elke woensdag en vrijdag, 9:30 of 15:00

Demo

How to use it

  1. Paste the HTML where the page sections should appear.
  2. Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
  3. Add the JavaScript and call init() with the element that contains the HTML.
<!-- Hero-zoeker: postcode, soort en straal · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="kzo">
  <div class="kzo__in">
    <div class="kzo__copy">
      <p class="kzo__eyebrow">Kinderopvang Klavertje · 14 locaties rond Amersfoort</p>
      <h2 class="kzo__h">Opvang dichtbij huis, met vaste gezichten op de groep</h2>
      <p class="kzo__lead">Kinderdagverblijf, peuteropvang en BSO in Amersfoort, Hoogland, Leusden en Soest. Zoek een locatie en plan een rondleiding.</p>
      <form class="kzo__card" novalidate>
        <fieldset class="kzo__set">
          <legend class="kzo__lbl">Soort opvang</legend>
          <div class="kzo__chips">
            <label class="kzo__chip is-on"><input type="checkbox" name="kzo-soort" value="kdv" checked><span><b>Kinderdagverblijf</b><small>0 tot 4 jaar</small></span></label>
            <label class="kzo__chip"><input type="checkbox" name="kzo-soort" value="po"><span><b>Peuteropvang</b><small>2 tot 4 jaar</small></span></label>
            <label class="kzo__chip"><input type="checkbox" name="kzo-soort" value="bso"><span><b>BSO</b><small>4 tot 13 jaar</small></span></label>
          </div>
        </fieldset>
        <div class="kzo__row">
          <div class="kzo__field kzo__field--pc">
            <label class="kzo__lbl" for="kzo-pc">Postcode</label>
            <input id="kzo-pc" class="kzo__input" type="text" maxlength="7" placeholder="3811 AB" autocomplete="postal-code" spellcheck="false" aria-describedby="kzo-hint">
          </div>
          <div class="kzo__field kzo__field--r">
            <label class="kzo__lbl" for="kzo-r">Afstand</label>
            <select id="kzo-r" class="kzo__select"><option value="2">binnen 2 km</option><option value="5" selected>binnen 5 km</option><option value="10">binnen 10 km</option><option value="15">binnen 15 km</option></select>
          </div>
          <button class="kzo__go" type="submit"><span class="kzo__spin" aria-hidden="true"></span><span class="kzo__go-t">Toon <b class="kzo__n">9</b> locaties</span><svg class="kzo__arr" viewBox="0 0 20 20" aria-hidden="true"><path d="M4 10h11M11 5l5 5-5 5"/></svg></button>
        </div>
        <p id="kzo-hint" class="kzo__hint">Probeer 3811, 3828 of 3768.</p>
        <p class="kzo__sr" aria-live="polite"></p>
        <div class="kzo__res" hidden></div>
      </form>
    </div>
    <div class="kzo__media">
      <img src="https://neddev.com/lab-media/hero-zoeker-1.webp" alt="Pedagogisch medewerker speelt met twee peuters in de tuin van een kinderdagverblijf" loading="lazy">
      <p class="kzo__stamp"><b>Rondleiding</b> elke woensdag en vrijdag, 9:30 of 15:00</p>
    </div>
  </div>
  <div class="kzo__demo" aria-label="Demo-staten"><span>Demo</span><button type="button" data-kzo-demo="fout">Toon fout</button><button type="button" data-kzo-demo="leeg">Toon leeg</button><button type="button" data-kzo-demo="laden">Toon laden</button><button type="button" data-kzo-demo="ok">Toon resultaat</button></div>
</div>
</div>

More page sections

Seen something you like?

Add it to your selection and send it over. We build your site around it, in your brand.

Get in touch →