Checkbox Filter

Standard component:

Subsidies

Geen filters beschikbaar

Toon meer

Voorbeeld HTML

<details open="" class="rvo-checkbox-filter">
  <summary class="rvo-checkbox-filter__label">
    Subsidies 
    <span
      class="utrecht-icon rvo-icon rvo-icon-delta-omhoog rvo-icon--md rvo-icon--lintblauw rvo-checkbox-filter__icon"
      role="img"
      aria-label="Delta omhoog"
    ></span>
  </summary>
  <div class="rvo-checkbox-filter__checkbox-container">
    <p class="rvo-checkbox-filter__no-filter-text">Geen filters beschikbaar</p>
  </div>
  <a
    href="#"
    class="rvo-link rvo-link--with-icon rvo-link--no-underline rvo-link--lintblauw"
  >
    <span
      class="utrecht-icon rvo-icon rvo-icon-plus rvo-icon--md rvo-icon--lintblauw rvo-link__icon--before"
      role="img"
      aria-label="Plus"
    ></span>
    Toon meer
  </a>
</details>

Open in nieuwe tab

Checkbox filter met zoekveld:

Subsidies

Zoeken

Geen filters beschikbaar

Toon meer

Voorbeeld HTML

<details open="" class="rvo-checkbox-filter" inputFieldPlaceholder="Zoek...">
  <summary class="rvo-checkbox-filter__label">
    Subsidies 
    <span
      class="utrecht-icon rvo-icon rvo-icon-delta-omhoog rvo-icon--md rvo-icon--lintblauw rvo-checkbox-filter__icon"
      role="img"
      aria-label="Delta omhoog"
    ></span>
  </summary>
  <div
    role="group"
    aria-labelledby="fieldId-label"
    class="utrecht-form-field utrecht-form-field--text rvo-form-field"
  >
    <div class="rvo-form-field__label">
      <label
        class="rvo-label rvo-label--has-after-field"
        id="fieldId-label"
        for="fieldId"
      >
        Zoeken
      </label>
    </div>
    <input
      id="field"
      placeholder=""
      type="text"
      class="utrecht-textbox utrecht-textbox--html-input"
      dir="auto"
    />
  </div>
  <div class="rvo-checkbox-filter__checkbox-container">
    <p class="rvo-checkbox-filter__no-filter-text">Geen filters beschikbaar</p>
  </div>
  <a
    href="#"
    class="rvo-link rvo-link--with-icon rvo-link--no-underline rvo-link--lintblauw"
  >
    <span
      class="utrecht-icon rvo-icon rvo-icon-plus rvo-icon--md rvo-icon--lintblauw rvo-link__icon--before"
      role="img"
      aria-label="Plus"
    ></span>
    Toon meer
  </a>
</details>

Open in nieuwe tab

Documentatie

Dit component wordt voornamelijk gebruikt op een zoekpagina. De filters die je kun toepassen bij het zoeken kun je hierin verwerken door options. Met optionsOnChange kun je in je eigen applicatie bepalen hoe deze selectie afgehandeld moet worden. Je kan door middel van een input veld door de lijst filteren, dit is aan te zetten door de showInputField parameter. Vergeet dan niet de inputFieldOnChange ook mee te geven.