DSO Component Library

Searchbar: Searchbar Closed 

<div class="dso-searchbar">
    <input type="text" id="searchbarClosed" class="form-control" placeholder="Zoeken" />
    <span class="dso-searchbar-icon" aria-hidden="true"></span>
    <label for="searchbarClosed">Zoeken</label>
    <button type="button">Open zoeken</button>
</div>
 
<div class="dso-searchbar{{#if open }} dso-open{{/if}}">
  <input type="text" id="{{ id }}" class="form-control" placeholder="{{ label }}" />
  <span class="dso-searchbar-icon" aria-hidden="true"></span>
  <label for="{{ id }}">{{ label }}</label>
  <button type="button">Open zoeken</button>
</div>
 
__title: Zoekbalk gesloten
__explanation: >-
  De zoekbalk dient vanuit zichzelf de class <code>.dso-searchbar</code> te
  hebben en kan worden geopend met de modifier classes <code>.dso-open</code>.
  Het toevoegen/verwijderen van deze modifier classes start een animatie die de
  zoekbalk opent of sluit.
__switches: null
id: searchbarClosed
label: Zoeken

There are no notes for this item.

WARNING: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage

This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1.

<label for="state-switch">Open/sluit</label>

NOTICE: WCAG2AA.Principle2.Guideline2_4.2_4_2.H25.2

Check that the title element describes the document.

<title>Searchbar

NOTICE: WCAG2AA.Principle3.Guideline3_2.3_2_1.G107

Check that a change of context does not occur when this input field receives focus.

<input type="checkbox" id="state-switch">