DSO Component Library

Searchbar: Default 

<form class="dso-search">
    <div class="dso-searchbar dso-animate ">
        <input type="text" id="searchbar" class="form-control" placeholder="Zoeken" />
        <span class="dso-searchbar-icon" aria-hidden="true"></span>
        <label for="searchbar">Zoeken</label>
        <button type="button">Open zoeken</button>
    </div>
    <button type="submit">Zoeken</button>
</form>
 
<form class="dso-search">
  <div class="dso-searchbar dso-animate {{#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>
  <button type="submit">{{ label }}</button>
</form>
 
__title: 'Example: Open/Close'
__explanation: >-
  Animatie demo. Animates moeten aangezet worden dmv.
  <code>.dso-searchbar.dso-animate</code>
__switches:
  - name: state
    label: Open/sluit
id: searchbar
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">

NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_1.G83,G84,G85

If an input error is automatically detected in this form, check that the item(s) in error are identified and the error(s) are described to the user in text.

<form class="dso-search"> <div class="dso-searchbar dso-animate "> <input type="text" id="searchbar" class="form-control" placeholder="Zoeken"> <span class="dso-searchbar-icon" aria-hidden="true"></span> <label for="searchbar">Zoeken</label> <button type="button">Open zoeken</button> </div> <button type="submit">Zoeken</button> </form>

NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_2.G131,G89,G184,H90

Check that descriptive labels or instructions (including for required fields) are provided for user input in this form.

<form class="dso-search"> <div class="dso-searchbar dso-animate "> <input type="text" id="searchbar" class="form-control" placeholder="Zoeken"> <span class="dso-searchbar-icon" aria-hidden="true"></span> <label for="searchbar">Zoeken</label> <button type="button">Open zoeken</button> </div> <button type="submit">Zoeken</button> </form>

NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_3.G177

Check that this form provides suggested corrections to errors in user input, unless it would jeopardize the security or purpose of the content.

<form class="dso-search"> <div class="dso-searchbar dso-animate "> <input type="text" id="searchbar" class="form-control" placeholder="Zoeken"> <span class="dso-searchbar-icon" aria-hidden="true"></span> <label for="searchbar">Zoeken</label> <button type="button">Open zoeken</button> </div> <button type="submit">Zoeken</button> </form>

NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_4.G98,G99,G155,G164,G168.LegalForms

If this form would bind a user to a financial or legal commitment, modify/delete user-controllable data, or submit test responses, ensure that submissions are either reversible, checked for input errors, and/or confirmed by the user.

<form class="dso-search"> <div class="dso-searchbar dso-animate "> <input type="text" id="searchbar" class="form-control" placeholder="Zoeken"> <span class="dso-searchbar-icon" aria-hidden="true"></span> <label for="searchbar">Zoeken</label> <button type="button">Open zoeken</button> </div> <button type="submit">Zoeken</button> </form>