Search Bar

Component preview

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

        <label for="search-bar--default">Label</label>
        <span class="dso-search-icon" aria-hidden="true"></span>

        <input type="text" id="search-bar--default" placeholder="Placeholder" />

    </div>
    <button type="button" class="dso-secondary">
        Button

    </button>
</div>

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

        <label for="search-bar--label-no-icon">Label</label>

        <input type="text" id="search-bar--label-no-icon" placeholder="Placeholder" />

    </div>
    <button type="button" class="dso-secondary">
        Button

    </button>
</div>

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

        <label for="search-bar--hidden-label-icon" class="dso-search-icon">Label</label>

        <input type="text" id="search-bar--hidden-label-icon" placeholder="Placeholder" />

    </div>
    <button type="button" class="dso-secondary">
        Button

    </button>
</div>

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

        <label for="search-bar--hidden-label-no-icon" class="sr-only">Label</label>

        <input type="text" id="search-bar--hidden-label-no-icon" placeholder="Placeholder" />

    </div>
    <button type="button" class="dso-secondary">
        Button

    </button>
</div>

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

        <span class="dso-search-icon" aria-hidden="true"></span><input type="text" placeholder="Placeholder" />

    </div>
    <button type="button" class="dso-secondary">
        Button

    </button>
</div>

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

        <input type="text" placeholder="Placeholder" />

    </div>
    <button type="button" class="dso-secondary">
        Button

    </button>
</div>

<!-- With Value -->
<div class="dso-search-bar">
    <div class="dso-search-bar-input">

        <label for="search-bar--with-value">Label</label>
        <span class="dso-search-icon" aria-hidden="true"></span>

        <input type="text" id="search-bar--with-value" placeholder="Placeholder" value="Waarde" />

        <button type="button">
            Zoekopdracht legen
        </button>

    </div>
    <button type="button" class="dso-secondary">
        Button

    </button>
</div>

<!-- Invalid -->
<div class="dso-search-bar dso-invalid">
    <div class="dso-search-bar-input">

        <label for="search-bar--invalid">Label</label>
        <span class="dso-search-icon" aria-hidden="true"></span>

        <input type="text" id="search-bar--invalid" placeholder="Placeholder" />

    </div>
    <button type="button" class="dso-secondary">
        Button

    </button>
</div>

<!-- Hidden Button -->
<div class="dso-search-bar">
    <div class="dso-search-bar-input">

        <label for="search-bar--hidden-button">Label</label>
        <span class="dso-search-icon" aria-hidden="true"></span>

        <input type="text" id="search-bar--hidden-button" placeholder="Placeholder" />

    </div>
    <button type="button" class="dso-secondary sr-only">
        Button

    </button>
</div>

<!-- With Results -->
<div class="dso-search-bar">
    <div class="dso-search-bar-input">

        <label for="search-bar--with-results">Label</label>
        <span class="dso-search-icon" aria-hidden="true"></span>

        <input type="text" id="search-bar--with-results" placeholder="Placeholder" value="Activiteit" />

    </div>
    <button type="button" class="dso-secondary sr-only">
        Button

    </button>
</div>
<div class="dso-results" aria-live="polite">
    7 gevonden resultaten
</div>

<!-- With Hidden Results -->
<div class="dso-search-bar">
    <div class="dso-search-bar-input">

        <label for="search-bar--with-hidden-results">Label</label>
        <span class="dso-search-icon" aria-hidden="true"></span>

        <input type="text" id="search-bar--with-hidden-results" placeholder="Placeholder" value="Activiteit" />

    </div>
    <button type="button" class="dso-secondary sr-only">
        Button

    </button>
</div>
<div class="dso-results sr-only" aria-live="polite">
    7 gevonden resultaten
</div>

<div {{ className('dso-search-bar', modifier) }}>
  <div class="dso-search-bar-input">
    {# zichtbaar label met icon #}
    {% if not noLabel and label and icon and not hiddenLabel -%}
      <label for="{{ id or _self.handle }}">
        {{- label -}}
      </label>
      <span class="dso-search-icon" aria-hidden="true"></span>
    {# zichtbaar label zonder icon #}
    {% elif label and not icon and not hiddenLabel -%}
      <label for="{{ _self.handle }}">
        {{- label -}}
      </label>
    {# verborgen label met icon #}
    {% elif label and hiddenLabel and icon -%}
      <label for="{{ _self.handle }}" {{ className('dso-search-icon') }}>
        {{- label -}}
      </label>
    {# verborgen label zonder icon #}
    {% elif label and hiddenLabel and not icon -%}
      <label for="{{ _self.handle }}" {{ className([hiddenLabel, 'sr-only']) }}>
        {{- label -}}
      </label>
    {# geen label met icon #}
    {% elif not label and not hiddenLabel and icon -%}
      <span class="dso-search-icon" aria-hidden="true"></span>
    {%- endif -%}
    <input type="text"
      {% if id or label %} id="{{ id or _self.handle }}"{% endif %}
      {% if placeholder %} placeholder="{{ placeholder }}"{% endif %}
      {% if value %} value="{{ value }}"{% endif %}
      {% if state == "invalid" %} aria-invalid="true"{% endif %}
      {% if ariaDescribedBy %} aria-describedby="{{ ariaDescribedBy }}" {% endif %} />
    {% if clearButton %}
      <button type="button">
        Zoekopdracht legen
      </button>
    {% endif %}
  </div>
  <button type="button" {{ className('dso-secondary', [hideSearchButton, 'sr-only']) }}>
    {% if buttonLabel -%}
      { buttonLabel }
    {% else -%}
      Button
    {% endif %}
  </button>
</div>
{% if resultsMessage -%}
  <div {{ className('dso-results', [resultsHidden, 'sr-only']) }} aria-live="polite">
    {{ resultsMessage }}
  </div>
{% endif %}

/* Default */
__title: Zichtbaar label met icoon
placeholder: Placeholder
icon: true
label: Label

/* Label No Icon */
__title: Zichtbaar label, geen icon
placeholder: Placeholder
icon: false
label: Label

/* Hidden Label Icon */
__title: Verborgen label met icon
placeholder: Placeholder
icon: true
label: Label
hiddenLabel: true

/* Hidden Label No Icon */
__title: verborgen label, geen icon
placeholder: Placeholder
icon: false
label: Label
hiddenLabel: true

/* No Label Icon */
__title: Geen label, wel icon
placeholder: Placeholder
icon: true
label: ''

/* No Label No Icon */
__title: Geen label, geen icon
placeholder: Placeholder
icon: false
label: false

/* With Value */
__title: Met waarde
placeholder: Placeholder
icon: true
label: Label
value: Waarde
clearButton: true

/* Invalid */
__title: Invalid
placeholder: Placeholder
icon: true
label: Label
modifier: dso-invalid

/* Hidden Button */
__title: Verborgen knop
placeholder: Placeholder
icon: true
label: Label
hideSearchButton: true

/* With Results */
__title: Met resultaten-melding
placeholder: Placeholder
icon: true
label: Label
hideSearchButton: true
value: Activiteit
resultsMessage: 7 gevonden resultaten

/* With Hidden Results */
__title: Met verborgen resultaten-melding
placeholder: Placeholder
icon: true
label: Label
hideSearchButton: true
value: Activiteit
resultsMessage: 7 gevonden resultaten
resultsHidden: true