Search Bar

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

<!-- Default -->
<div class="dso-search-bar">
    <div class="dso-search-bar-input">
        <label for="search-bar--default" class="dso-search-icon">Zoek op postcode</label>
        <input type="text" id="search-bar--default" placeholder="Label met icoon" />
        <button type="button">
            Zoekopdracht legen
        </button>
    </div>
    <button type="button" class="btn btn-default">
        Zoeken
    </button>
</div>

<!-- Label Only -->
<div class="dso-search-bar">
    <div class="dso-search-bar-input">
        <label for="search-bar--label-only">Zoek op postcode</label>
        <input type="text" id="search-bar--label-only" placeholder="Alleen label" />
        <button type="button">
            Zoekopdracht legen
        </button>
    </div>
    <button type="button" class="btn btn-default">
        Zoeken
    </button>
</div>

<!-- Icon Only -->
<div class="dso-search-bar">
    <div class="dso-search-bar-input">

        <span class="dso-search-icon" aria-hidden="true"></span><input type="text" placeholder="Alleen icoon" />
        <button type="button">
            Zoekopdracht legen
        </button>
    </div>
    <button type="button" class="btn btn-default">
        Zoeken
    </button>
</div>

<!-- No Icon No Label -->
<div class="dso-search-bar">
    <div class="dso-search-bar-input">

        <input type="text" placeholder="Geen icoon en geen label" />
        <button type="button">
            Zoekopdracht legen
        </button>
    </div>
    <button type="button" class="btn btn-default">
        Zoeken
    </button>
</div>

<!-- With Value -->
<div class="dso-search-bar">
    <div class="dso-search-bar-input">
        <label for="search-bar--with-value" class="dso-search-icon">Zoek op postcode</label>
        <input type="text" id="search-bar--with-value" placeholder="Label met icoon" value="abcdef" />
        <button type="button">
            Zoekopdracht legen
        </button>
    </div>
    <button type="button" class="btn btn-default">
        Zoeken
    </button>
</div>

<!-- Hidden Button -->
<div class="dso-search-bar">
    <div class="dso-search-bar-input">
        <label for="search-bar--hidden-button" class="dso-search-icon">Zoek op postcode</label>
        <input type="text" id="search-bar--hidden-button" placeholder="Verborgen zoekknop" />
        <button type="button">
            Zoekopdracht legen
        </button>
    </div>
    <button type="button" class="btn btn-default sr-only">
        Zoeken
    </button>
</div>

<div class="dso-search-bar">
  <div class="dso-search-bar-input">
    {% if label -%}
      <label for="{{ _self.handle }}" {{ className([icon, 'dso-search-icon']) }}>
        {{- label -}}
      </label>
    {% else %}
      {% if icon -%}
        <span class="dso-search-icon" aria-hidden="true"></span>
      {%- endif -%}
    {%- endif -%}
    <input type="text" {% if label %} id="{{ _self.handle }}"{% endif %} {% if placeholder %} placeholder="{{ placeholder }}"{% endif %} {% if value %} value="{{ value }}"{% endif %} />
    <button type="button">
      Zoekopdracht legen
    </button>
  </div>
  <button type="button" {{ className('btn btn-default', [hideSearchButton, 'sr-only']) }}>
    Zoeken
  </button>
</div>

/* Default */
__title: default
placeholder: Label met icoon
icon: true
label: Zoek op postcode

/* Label Only */
__title: label only
placeholder: Alleen label
icon: false
label: Zoek op postcode

/* Icon Only */
__title: icon only
placeholder: Alleen icoon
icon: true
label: ''

/* No Icon No Label */
__title: 'no icon, no label'
placeholder: Geen icoon en geen label
icon: false
label: ''

/* With Value */
__title: default
placeholder: Label met icoon
icon: true
label: Zoek op postcode
value: abcdef

/* Hidden Button */
__title: default
placeholder: Verborgen zoekknop
icon: true
label: Zoek op postcode
hideSearchButton: true