DSO Toolkit | Component Library

Search Bar 

<!-- Default -->
<div class="dso-search-bar">
    <div class="dso-search-bar-input">
        <span class="dso-search-icon" aria-hidden="true"></span>
        <input type="text" placeholder="Voorbeeld tekst" />
        <button type="button">
            Zoekopdracht legen
        </button>
    </div>
    <button type="button" class="btn btn-default">
        Zoeken
    </button>
</div>


<!-- Without Icon -->
<div class="dso-search-bar">
    <div class="dso-search-bar-input">
        <input type="text" placeholder="Voorbeeld tekst" />
        <button type="button">
            Zoekopdracht legen
        </button>
    </div>
    <button type="button" class="btn btn-default">
        Zoeken
    </button>
</div>


<div class="dso-search-bar">
  <div class="dso-search-bar-input">
    {{#if icon }}
      <span class="dso-search-icon" aria-hidden="true"></span>
    {{/if}}
    <input type="text" placeholder="Voorbeeld tekst" />
    <button type="button">
      Zoekopdracht legen
    </button>
  </div>
  <button type="button" class="btn btn-default">
    Zoeken
  </button>
</div>
 
/* Default */
icon: true



/* Without Icon */
icon: null

Pas bij een waarde toont de reset-knop, initieel is deze knop verborgen