NedDev®
EN Get in touch
Home Werk
Diensten
SaaS bouwenAI developmentAPI developmentMobile app developmentGoogle Ads managementHeadless ShopifyLaravel developmentNext.js developmentReact developmentTypeScript engineeringUI/UX designSEO & AEOWebshop bouwen
Oplossingen
AI-oplossingenB2B-platformsE-commerceHorecaLead generationLogistiekOnderwijsProcesautomatiseringSaaS-platformsStartup MVPVastgoedZorg
Branches
JuridischZorgVastgoedFinanceHoreca
Regio
Den HaagRotterdamAmsterdamUtrechtEindhovenAlmereBredaArnhemNijmegenTilburgEnschedeGroningenLeidenDelftZoetermeerDen Bosch
Studio
OverWerkwijzeLabBlogContact

Hero-zoeker: postcode, soort en straal Nieuw

Zoeker als hero voor kinderopvang, sportclub of praktijk met meerdere vestigingen: soort-chips, postcode, straal en een knop die live telt hoeveel locaties er zijn. Chips zijn echte checkboxes (Tab en Spatie werken), de teller meldt zich via aria-live; staten fout, leeg, laden en resultaat zitten erin. In productie koppel je de postcode aan de PDOK Locatieserver voor coördinaten.

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

Zo gebruik je het

  1. Plak de HTML op de plek waar het onderdeel moet komen.
  2. Zet de CSS in je stylesheet. Alle klassen hebben een eigen voorvoegsel, dus niets botst met je eigen opmaak.
  3. Voeg de JavaScript toe en roep init() aan met het element waar de HTML in staat.
<!-- 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>

Meer uit paginasecties

Iets gezien dat je mooi vindt?

Zet het in je selectie en stuur hem op. Dan bouwen we je site eromheen, in jouw huisstijl.

Neem contact op →