Checkbox Filter

Standard component:

Subsidies

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--logoblauw rvo-checkbox-filter__icon"
      role="img"
      aria-label="Delta omhoog"
    ></span>
  </summary>
  <div class="rvo-checkbox-filter__checkbox-container">
    <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" id="fieldId-label" for="fieldId">
          <div> </div>
        </label>
      </div>
      <div class="rvo-checkbox__group"></div>
    </div>
  </div>
  <a
    class="rvo-link rvo-link--with-icon rvo-link--no-underline rvo-link--logoblauw"
    href="#"
  >
    <span
      class="utrecht-icon rvo-icon rvo-icon-plus rvo-icon--md rvo-icon--logoblauw rvo-link__icon--before"
      role="img"
      aria-label="Plus"
    ></span>
    Toon meer
  </a>
</details>

Open in nieuwe tab

Checkbox filter met zoekveld:

Subsidies

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--logoblauw 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" id="fieldId-label" for="fieldId">
        <div> </div>
      </label>
    </div>
    <input
      id="field"
      placeholder="Zoek..."
      type="text"
      class="utrecht-textbox utrecht-textbox--html-input"
      dir="auto"
      value=""
    />
  </div>
  <div class="rvo-checkbox-filter__checkbox-container">
    <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" id="fieldId-label" for="fieldId">
          <div> </div>
        </label>
      </div>
      <div class="rvo-checkbox__group"></div>
    </div>
  </div>
  <a
    class="rvo-link rvo-link--with-icon rvo-link--no-underline rvo-link--logoblauw"
    href="#"
  >
    <span
      class="utrecht-icon rvo-icon rvo-icon-plus rvo-icon--md rvo-icon--logoblauw 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.