Search Bar

Component preview opent in nieuw tabblad

Technische opmerkingen

Pas bij een waarde toont de reset-knop, initieel is deze knop er niet.

Toegankelijkheid

Een input, en dus ook deze search-bar, dient volgens WCAG succescriterium 1.3.1 te worden voorzien van een label. Een label wordt aan een specifieke input gekoppeld door het gebruik van het for-attribuut. De waarde van het for attribuut moet gelijk zijn aan de waarde van het id attribuut van de input.

NB. zie ook Search bar in form waar het label wordt verstrekt als onderdeel van de .form-group.

Bronvermelding

<!-- 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>
<!-- Huge Placeholder -->
<div class="dso-search-bar">
    <div class="dso-search-bar-input">

        <label for="search-bar--huge-placeholder">Label</label>

        <input type="text" id="search-bar--huge-placeholder" placeholder="Placeholder met lange tekst, lange tekst, langere tekst. Placeholder met lange tekst, lange tekst, langere tekst. Placeholder met lange tekst, lange tekst, langere tekst." />

    </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>
<!-- 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"
      {{ attributes([ariaDescribedBy, 'aria-describedby', ariaDescribedBy]) }}
      {% 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 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
/* Huge Placeholder */
__title: Lange tekst in placeholder
placeholder: >-
  Placeholder met lange tekst, lange tekst, langere tekst. Placeholder met lange
  tekst, lange tekst, langere tekst. Placeholder met lange tekst, lange tekst,
  langere tekst.
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
/* 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