DSO Component Library

# Searchbar: Searchbar Opened

WIP

- HTML
- View
- Context
- Info
- Notes
- WCAG

`

    <div class="dso-searchbar dso-open">
        <input type="text" id="searchbarOpened" class="form-control" placeholder="Zoeken" />
        <span class="dso-searchbar-icon" aria-hidden="true"></span>
        <label for="searchbarOpened">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 open
    __explanation: >-
      Om een zoekbalk te openen dient de class <code>.dso-open</code> toegevoegd te
      worden. Sluiten gaat door de class weer te verwijderen
    __switches: null
    id: searchbarOpened
    label: Zoeken
    open: true

`

- Handle: @searchbar--searchbar-opened
- Variants (3): Default , Searchbar Closed , Searchbar Opened
- Preview:
  - With layout
  - Component only
- Filesystem Path: components\05-navigation\searchbar\searchbar.hbs

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">`