Form List Filter @form-list-filter
5 Fields @form-list-filter--5fields
<form class="form-list-filter">
<div class="form-list-filter__fields">
<div class="form-list-filter__field">
<div class="form-group">
<div class="form-group__input"><select class="select" id="form-group-3a94" name="bereich" aria-label="Bereich auswählen">
<option>Bereich</option>
<option>Bereich 1</option>
<option>Bereich 2</option>
<option>Bereich 3</option>
</select></div>
</div>
</div>
<div class="form-list-filter__field">
<div class="form-group">
<div class="form-group__input"><select class="select" id="form-group-f57a" name="thema" aria-label="Thema auswählen">
<option>Thema</option>
<option>Thema 1</option>
<option>Thema 2</option>
<option>Thema 3</option>
</select></div>
</div>
</div>
<div class="form-list-filter__field">
<div class="form-group">
<div class="form-group__input"><select class="select" id="form-group-2681" name="typ" aria-label="Typ auswählen">
<option>Typ</option>
<option>Typ 1</option>
<option>Typ 2</option>
<option>Typ 3</option>
</select></div>
</div>
</div>
<div class="form-list-filter__field">
<div class="form-group">
<div class="form-group__input"><select class="select" id="form-group-a8fc" name="zielgruppe" aria-label="Zielgruppe auswählen">
<option>Zielgruppe</option>
<option>Zielgruppe 1</option>
<option>Zielgruppe 2</option>
<option>Zielgruppe 3</option>
</select></div>
</div>
</div>
<div class="form-list-filter__field">
<div class="form-group">
<div class="form-group__input"><select class="select" id="form-group-8b8d" name="status" aria-label="Status auswählen">
<option>Aktuell</option>
<option>Abgeschlossen</option>
<option>Beide</option>
</select></div>
</div>
</div>
</div>
<div class="form-list-filter__action"><button class="button button--primary form-list-filter__button" type="submit"><svg class="icon icon--search button__icon" viewBox="0 0 200 200">
<use xlink:href="#icon-search"></use>
</svg><span class="button__text">Filter anwenden</span></button></div>
</form>{
"fields": [
{
"name": "bereich",
"use": "select",
"settings": {
"attr": {
"aria-label": "Bereich auswählen"
},
"hasPleaseSelectOption": null,
"options": [
"Bereich",
"Bereich 1",
"Bereich 2",
"Bereich 3"
]
}
},
{
"name": "thema",
"use": "select",
"settings": {
"attr": {
"aria-label": "Thema auswählen"
},
"hasPleaseSelectOption": null,
"options": [
"Thema",
"Thema 1",
"Thema 2",
"Thema 3"
]
}
},
{
"name": "typ",
"use": "select",
"settings": {
"attr": {
"aria-label": "Typ auswählen"
},
"hasPleaseSelectOption": null,
"options": [
"Typ",
"Typ 1",
"Typ 2",
"Typ 3"
]
}
},
{
"name": "zielgruppe",
"use": "select",
"settings": {
"attr": {
"aria-label": "Zielgruppe auswählen"
},
"hasPleaseSelectOption": null,
"options": [
"Zielgruppe",
"Zielgruppe 1",
"Zielgruppe 2",
"Zielgruppe 3"
]
}
},
{
"name": "status",
"use": "select",
"settings": {
"attr": {
"aria-label": "Status auswählen"
},
"hasPleaseSelectOption": null,
"options": [
"Aktuell",
"Abgeschlossen",
"Beide"
]
}
}
],
"button": {
"link": null,
"type": "submit",
"text": "Filter anwenden",
"icon": "search"
}
}
4 Fields @form-list-filter
<form class="form-list-filter">
<div class="form-list-filter__fields">
<div class="form-list-filter__field">
<div class="form-group">
<div class="form-group__input"><select class="select" id="form-group-d86b" name="bereich" aria-label="Bereich auswählen">
<option>Bereich</option>
<option>Bereich 1</option>
<option>Bereich 2</option>
<option>Bereich 3</option>
</select></div>
</div>
</div>
<div class="form-list-filter__field">
<div class="form-group">
<div class="form-group__input"><select class="select" id="form-group-d0fc" name="thema" aria-label="Thema auswählen">
<option>Thema</option>
<option>Thema 1</option>
<option>Thema 2</option>
<option>Thema 3</option>
</select></div>
</div>
</div>
<div class="form-list-filter__field">
<div class="form-group">
<div class="form-group__input"><select class="select" id="form-group-be18" name="typ" aria-label="Typ auswählen">
<option>Typ</option>
<option>Typ 1</option>
<option>Typ 2</option>
<option>Typ 3</option>
</select></div>
</div>
</div>
<div class="form-list-filter__field">
<div class="form-group">
<div class="form-group__input"><select class="select" id="form-group-6a34" name="zielgruppe" aria-label="Zielgruppe auswählen">
<option>Zielgruppe</option>
<option>Zielgruppe 1</option>
<option>Zielgruppe 2</option>
<option>Zielgruppe 3</option>
</select></div>
</div>
</div>
</div>
<div class="form-list-filter__action"><button class="button button--primary form-list-filter__button" type="submit"><svg class="icon icon--search button__icon" viewBox="0 0 200 200">
<use xlink:href="#icon-search"></use>
</svg><span class="button__text">Filter anwenden</span></button></div>
</form>{
"fields": [
{
"name": "bereich",
"use": "select",
"settings": {
"attr": {
"aria-label": "Bereich auswählen"
},
"hasPleaseSelectOption": null,
"options": [
"Bereich",
"Bereich 1",
"Bereich 2",
"Bereich 3"
]
}
},
{
"name": "thema",
"use": "select",
"settings": {
"attr": {
"aria-label": "Thema auswählen"
},
"hasPleaseSelectOption": null,
"options": [
"Thema",
"Thema 1",
"Thema 2",
"Thema 3"
]
}
},
{
"name": "typ",
"use": "select",
"settings": {
"attr": {
"aria-label": "Typ auswählen"
},
"hasPleaseSelectOption": null,
"options": [
"Typ",
"Typ 1",
"Typ 2",
"Typ 3"
]
}
},
{
"name": "zielgruppe",
"use": "select",
"settings": {
"attr": {
"aria-label": "Zielgruppe auswählen"
},
"hasPleaseSelectOption": null,
"options": [
"Zielgruppe",
"Zielgruppe 1",
"Zielgruppe 2",
"Zielgruppe 3"
]
}
}
],
"button": {
"link": null,
"type": "submit",
"text": "Filter anwenden",
"icon": "search"
}
}
3 Fields @form-list-filter--3fields
<form class="form-list-filter">
<div class="form-list-filter__fields">
<div class="form-list-filter__field">
<div class="form-group">
<div class="form-group__input"><select class="select" id="form-group-1bdb" name="bereich">
<option>Bereich</option>
<option>Bereich 1</option>
<option>Bereich 2</option>
<option>Bereich 3</option>
</select></div>
</div>
</div>
<div class="form-list-filter__field">
<div class="form-group">
<div class="form-group__input"><select class="select" id="form-group-c8f6" name="thema">
<option>Thema</option>
<option>Thema 1</option>
<option>Thema 2</option>
<option>Thema 3</option>
</select></div>
</div>
</div>
<div class="form-list-filter__field">
<div class="form-group">
<div class="form-group__input"><select class="select" id="form-group-edd2" name="typ">
<option>Typ</option>
<option>Typ 1</option>
<option>Typ 2</option>
<option>Typ 3</option>
</select></div>
</div>
</div>
</div>
<div class="form-list-filter__action"><button class="button button--primary form-list-filter__button" type="submit"><svg class="icon icon--search button__icon" viewBox="0 0 200 200">
<use xlink:href="#icon-search"></use>
</svg><span class="button__text">Filter anwenden</span></button></div>
</form>{
"fields": [
{
"name": "bereich",
"use": "select",
"settings": {
"hasPleaseSelectOption": null,
"options": [
"Bereich",
"Bereich 1",
"Bereich 2",
"Bereich 3"
]
}
},
{
"name": "thema",
"use": "select",
"settings": {
"hasPleaseSelectOption": null,
"options": [
"Thema",
"Thema 1",
"Thema 2",
"Thema 3"
]
}
},
{
"name": "typ",
"use": "select",
"settings": {
"hasPleaseSelectOption": null,
"options": [
"Typ",
"Typ 1",
"Typ 2",
"Typ 3"
]
}
}
],
"button": {
"link": null,
"type": "submit",
"text": "Filter anwenden",
"icon": "search"
}
}
2 Fields @form-list-filter--2fields
<form class="form-list-filter">
<div class="form-list-filter__fields">
<div class="form-list-filter__field">
<div class="form-group">
<div class="form-group__input"><select class="select" id="form-group-39de" name="bereich">
<option>Bereich</option>
<option>Bereich 1</option>
<option>Bereich 2</option>
<option>Bereich 3</option>
</select></div>
</div>
</div>
<div class="form-list-filter__field">
<div class="form-group">
<div class="form-group__input"><select class="select" id="form-group-7ec6" name="thema">
<option>Thema</option>
<option>Thema 1</option>
<option>Thema 2</option>
<option>Thema 3</option>
</select></div>
</div>
</div>
</div>
<div class="form-list-filter__action"><button class="button button--primary form-list-filter__button" type="submit"><svg class="icon icon--search button__icon" viewBox="0 0 200 200">
<use xlink:href="#icon-search"></use>
</svg><span class="button__text">Filter anwenden</span></button></div>
</form>{
"fields": [
{
"name": "bereich",
"use": "select",
"settings": {
"hasPleaseSelectOption": null,
"options": [
"Bereich",
"Bereich 1",
"Bereich 2",
"Bereich 3"
]
}
},
{
"name": "thema",
"use": "select",
"settings": {
"hasPleaseSelectOption": null,
"options": [
"Thema",
"Thema 1",
"Thema 2",
"Thema 3"
]
}
}
],
"button": {
"link": null,
"type": "submit",
"text": "Filter anwenden",
"icon": "search"
}
}
Fields and search @form-list-filter--search
<form class="form-list-filter">
<div class="form-list-filter__fields">
<div class="form-list-filter__field">
<div class="form-group">
<div class="form-group__input"><input class="input" id="form-group-a557" name="search" type="search" placeholder="Suchbegriff eingeben" /></div>
</div>
</div>
<div class="form-list-filter__field">
<div class="form-group">
<div class="form-group__input"><select class="select" id="form-group-2587" name="bereich">
<option>Bereich</option>
<option>Bereich 1</option>
<option>Bereich 2</option>
<option>Bereich 3</option>
</select></div>
</div>
</div>
<div class="form-list-filter__field">
<div class="form-group">
<div class="form-group__input"><select class="select" id="form-group-7178" name="thema">
<option>Thema</option>
<option>Thema 1</option>
<option>Thema 2</option>
<option>Thema 3</option>
</select></div>
</div>
</div>
</div>
<div class="form-list-filter__action"><button class="button button--primary form-list-filter__button" type="submit"><svg class="icon icon--search button__icon" viewBox="0 0 200 200">
<use xlink:href="#icon-search"></use>
</svg><span class="button__text">Filter anwenden</span></button></div>
</form>{
"fields": [
{
"name": "search",
"use": "input",
"settings": {
"placeholder": "Suchbegriff eingeben",
"type": "search"
}
},
{
"name": "bereich",
"use": "select",
"settings": {
"hasPleaseSelectOption": null,
"options": [
"Bereich",
"Bereich 1",
"Bereich 2",
"Bereich 3"
]
}
},
{
"name": "thema",
"use": "select",
"settings": {
"hasPleaseSelectOption": null,
"options": [
"Thema",
"Thema 1",
"Thema 2",
"Thema 3"
]
}
}
],
"button": {
"link": null,
"type": "submit",
"text": "Filter anwenden",
"icon": "search"
}
}
Kalender @form-list-filter--calendar
<form class="form-list-filter">
<div class="form-list-filter__fields">
<div class="form-list-filter__field">
<div class="form-group">
<div class="form-group__input">
<div class="filter"><button class="filter__toggle" type="button" aria-expanded="false">Kategorie</button>
<div class="filter__items">
<div class="filter__item"><svg class="icon icon--performance" viewBox="0 0 200 200">
<use xlink:href="#icon-performance"></use>
</svg><label class="checkbox" for="checkbox-aeda"><input class="checkbox__input" type="checkbox" id="checkbox-aeda" name="checkbox-aeda" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Performance</span></label></div>
<div class="filter__item"><svg class="icon icon--reading" viewBox="0 0 200 200">
<use xlink:href="#icon-reading"></use>
</svg><label class="checkbox" for="checkbox-dfbf"><input class="checkbox__input" type="checkbox" id="checkbox-dfbf" name="checkbox-dfbf" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Lesung</span></label></div>
<div class="filter__item"><svg class="icon icon--workshop" viewBox="0 0 200 200">
<use xlink:href="#icon-workshop"></use>
</svg><label class="checkbox" for="checkbox-6241"><input class="checkbox__input" type="checkbox" id="checkbox-6241" name="checkbox-6241" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Workshop</span></label></div>
<div class="filter__item"><svg class="icon icon--chat" viewBox="0 0 200 200">
<use xlink:href="#icon-chat"></use>
</svg><label class="checkbox" for="checkbox-92e4"><input class="checkbox__input" type="checkbox" id="checkbox-92e4" name="checkbox-92e4" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Gespräch</span></label></div>
<div class="filter__item"><svg class="icon icon--theatre" viewBox="0 0 200 200">
<use xlink:href="#icon-theatre"></use>
</svg><label class="checkbox" for="checkbox-906e"><input class="checkbox__input" type="checkbox" id="checkbox-906e" name="checkbox-906e" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Theater</span></label></div>
<div class="filter__item"><svg class="icon icon--speech" viewBox="0 0 200 200">
<use xlink:href="#icon-speech"></use>
</svg><label class="checkbox" for="checkbox-bb4f"><input class="checkbox__input" type="checkbox" id="checkbox-bb4f" name="checkbox-bb4f" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Vortrag</span></label></div>
<div class="filter__item"><svg class="icon icon--exhibition" viewBox="0 0 200 200">
<use xlink:href="#icon-exhibition"></use>
</svg><label class="checkbox" for="checkbox-7f01"><input class="checkbox__input" type="checkbox" id="checkbox-7f01" name="checkbox-7f01" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Ausstellung</span></label></div>
</div>
</div>
</div>
</div>
</div>
<div class="form-list-filter__field">
<div class="form-group">
<div class="form-group__input">
<div class="filter"><button class="filter__toggle" type="button" aria-expanded="false">Ort</button>
<div class="filter__items">
<div class="filter__item"><label class="checkbox" for="checkbox-565f"><input class="checkbox__input" type="checkbox" id="checkbox-565f" name="checkbox-565f" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Nürtingen</span></label></div>
<div class="filter__item"><label class="checkbox" for="checkbox-fe77"><input class="checkbox__input" type="checkbox" id="checkbox-fe77" name="checkbox-fe77" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Ludwigsburg</span></label></div>
<div class="filter__item"><label class="checkbox" for="checkbox-cf3b"><input class="checkbox__input" type="checkbox" id="checkbox-cf3b" name="checkbox-cf3b" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Tübingen</span></label></div>
<div class="filter__item"><label class="checkbox" for="checkbox-d421"><input class="checkbox__input" type="checkbox" id="checkbox-d421" name="checkbox-d421" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Ehingen</span></label></div>
<div class="filter__item"><label class="checkbox" for="checkbox-f18d"><input class="checkbox__input" type="checkbox" id="checkbox-f18d" name="checkbox-f18d" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Bretten</span></label></div>
<div class="filter__item"><label class="checkbox" for="checkbox-d12e"><input class="checkbox__input" type="checkbox" id="checkbox-d12e" name="checkbox-d12e" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Esslingen</span></label></div>
<div class="filter__item"><label class="checkbox" for="checkbox-ca45"><input class="checkbox__input" type="checkbox" id="checkbox-ca45" name="checkbox-ca45" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Marbach am Neckar</span></label></div>
<div class="filter__item"><label class="checkbox" for="checkbox-a90a"><input class="checkbox__input" type="checkbox" id="checkbox-a90a" name="checkbox-a90a" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Stuttgart</span></label></div>
<div class="filter__item"><label class="checkbox" for="checkbox-cdff"><input class="checkbox__input" type="checkbox" id="checkbox-cdff" name="checkbox-cdff" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Friedrichshafen</span></label></div>
<div class="filter__item"><label class="checkbox" for="checkbox-6289"><input class="checkbox__input" type="checkbox" id="checkbox-6289" name="checkbox-6289" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Karlsruge</span></label></div>
<div class="filter__item"><label class="checkbox" for="checkbox-c186"><input class="checkbox__input" type="checkbox" id="checkbox-c186" name="checkbox-c186" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Kenzingen</span></label></div>
<div class="filter__item"><label class="checkbox" for="checkbox-6c58"><input class="checkbox__input" type="checkbox" id="checkbox-6c58" name="checkbox-6c58" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Mannheim</span></label></div>
<div class="filter__item"><label class="checkbox" for="checkbox-6aa7"><input class="checkbox__input" type="checkbox" id="checkbox-6aa7" name="checkbox-6aa7" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Bad Säckingen</span></label></div>
<div class="filter__item"><label class="checkbox" for="checkbox-a5cf"><input class="checkbox__input" type="checkbox" id="checkbox-a5cf" name="checkbox-a5cf" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Konstanz</span></label></div>
<div class="filter__item"><label class="checkbox" for="checkbox-7fc7"><input class="checkbox__input" type="checkbox" id="checkbox-7fc7" name="checkbox-7fc7" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Riedlingen</span></label></div>
<div class="filter__item"><label class="checkbox" for="checkbox-78a4"><input class="checkbox__input" type="checkbox" id="checkbox-78a4" name="checkbox-78a4" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Biberach</span></label></div>
<div class="filter__item"><label class="checkbox" for="checkbox-fada"><input class="checkbox__input" type="checkbox" id="checkbox-fada" name="checkbox-fada" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Freiburg</span></label></div>
<div class="filter__item"><label class="checkbox" for="checkbox-109d"><input class="checkbox__input" type="checkbox" id="checkbox-109d" name="checkbox-109d" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Rottenburg a. N.</span></label></div>
<div class="filter__item"><label class="checkbox" for="checkbox-3bb3"><input class="checkbox__input" type="checkbox" id="checkbox-3bb3" name="checkbox-3bb3" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Bruchsal</span></label></div>
<div class="filter__item"><label class="checkbox" for="checkbox-9472"><input class="checkbox__input" type="checkbox" id="checkbox-9472" name="checkbox-9472" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Böblingen</span></label></div>
<div class="filter__item"><label class="checkbox" for="checkbox-af92"><input class="checkbox__input" type="checkbox" id="checkbox-af92" name="checkbox-af92" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Dettingen an der Erms</span></label></div>
<div class="filter__item"><label class="checkbox" for="checkbox-2b8e"><input class="checkbox__input" type="checkbox" id="checkbox-2b8e" name="checkbox-2b8e" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Hausach</span></label></div>
<div class="filter__item"><label class="checkbox" for="checkbox-adaf"><input class="checkbox__input" type="checkbox" id="checkbox-adaf" name="checkbox-adaf" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Heidelberg</span></label></div>
<div class="filter__item"><label class="checkbox" for="checkbox-02d5"><input class="checkbox__input" type="checkbox" id="checkbox-02d5" name="checkbox-02d5" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Lörrach</span></label></div>
<div class="filter__item"><label class="checkbox" for="checkbox-be43"><input class="checkbox__input" type="checkbox" id="checkbox-be43" name="checkbox-be43" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Blaustein</span></label></div>
<div class="filter__item"><label class="checkbox" for="checkbox-27f7"><input class="checkbox__input" type="checkbox" id="checkbox-27f7" name="checkbox-27f7" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Fellbach</span></label></div>
<div class="filter__item"><label class="checkbox" for="checkbox-0618"><input class="checkbox__input" type="checkbox" id="checkbox-0618" name="checkbox-0618" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Heidenheim</span></label></div>
<div class="filter__item"><label class="checkbox" for="checkbox-47d1"><input class="checkbox__input" type="checkbox" id="checkbox-47d1" name="checkbox-47d1" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Herrlingen</span></label></div>
<div class="filter__item"><label class="checkbox" for="checkbox-82cc"><input class="checkbox__input" type="checkbox" id="checkbox-82cc" name="checkbox-82cc" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Kornwestheim</span></label></div>
<div class="filter__item"><label class="checkbox" for="checkbox-c0bd"><input class="checkbox__input" type="checkbox" id="checkbox-c0bd" name="checkbox-c0bd" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Kressberg</span></label></div>
<div class="filter__item"><label class="checkbox" for="checkbox-8bab"><input class="checkbox__input" type="checkbox" id="checkbox-8bab" name="checkbox-8bab" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Ladenburg</span></label></div>
<div class="filter__item"><label class="checkbox" for="checkbox-cf04"><input class="checkbox__input" type="checkbox" id="checkbox-cf04" name="checkbox-cf04" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Lauffen am Neckar</span></label></div>
<div class="filter__item"><label class="checkbox" for="checkbox-8e0f"><input class="checkbox__input" type="checkbox" id="checkbox-8e0f" name="checkbox-8e0f" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Ramseck am Neckar</span></label></div>
<div class="filter__item"><label class="checkbox" for="checkbox-3711"><input class="checkbox__input" type="checkbox" id="checkbox-3711" name="checkbox-3711" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Reutlingen</span></label></div>
<div class="filter__item"><label class="checkbox" for="checkbox-85da"><input class="checkbox__input" type="checkbox" id="checkbox-85da" name="checkbox-85da" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Rottweil</span></label></div>
<div class="filter__item"><label class="checkbox" for="checkbox-1322"><input class="checkbox__input" type="checkbox" id="checkbox-1322" name="checkbox-1322" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Schorndorf</span></label></div>
<div class="filter__item"><label class="checkbox" for="checkbox-9c31"><input class="checkbox__input" type="checkbox" id="checkbox-9c31" name="checkbox-9c31" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Waldenburg</span></label></div>
</div>
</div>
</div>
</div>
</div>
<div class="form-list-filter__field">
<div class="form-group">
<div class="form-group__input">
<div class="filter"><button class="filter__toggle" type="button" aria-expanded="false">Zielgruppe</button>
<div class="filter__items">
<div class="filter__item"><label class="checkbox" for="checkbox-51e1"><input class="checkbox__input" type="checkbox" id="checkbox-51e1" name="checkbox-51e1" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Zielgruppe 1</span></label></div>
<div class="filter__item"><label class="checkbox" for="checkbox-597a"><input class="checkbox__input" type="checkbox" id="checkbox-597a" name="checkbox-597a" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Zielgruppe 2</span></label></div>
<div class="filter__item"><label class="checkbox" for="checkbox-02c9"><input class="checkbox__input" type="checkbox" id="checkbox-02c9" name="checkbox-02c9" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Zielgruppe 3</span></label></div>
</div>
</div>
</div>
</div>
</div>
<div class="form-list-filter__field">
<div class="form-group">
<div class="form-group__input">
<div class="filter"><button class="filter__toggle" type="button" aria-expanded="false">Datum</button>
<div class="filter__items">
<div class="filter__item"><label class="checkbox" for="checkbox-8ac8"><input class="checkbox__input" type="checkbox" id="checkbox-8ac8" name="checkbox-8ac8" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Diese Woche</span></label></div>
<div class="filter__item"><label class="checkbox" for="checkbox-7f49"><input class="checkbox__input" type="checkbox" id="checkbox-7f49" name="checkbox-7f49" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Nächste Woche</span></label></div>
<div class="filter__item"><label class="checkbox" for="checkbox-5214"><input class="checkbox__input" type="checkbox" id="checkbox-5214" name="checkbox-5214" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label"><div class="period">
<div class="period__row">
<div class="period__label">Von:</div>
<div class="period__input"><input class="input" id="start_date_created" type="date" /></div>
</div>
<div class="period__row">
<div class="period__label">Bis:</div>
<div class="period__input"><input class="input" id="end_date_created" type="date" /></div>
</div>
</div></span></label></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="form-list-filter__action"><button class="button button--primary form-list-filter__button" type="submit"><svg class="icon icon--search button__icon" viewBox="0 0 200 200">
<use xlink:href="#icon-search"></use>
</svg><span class="button__text">Filter anwenden</span></button></div>
</form>{
"fields": [
{
"name": "Kategorie",
"use": "filter--icons"
},
{
"name": "Ort",
"use": "filter"
},
{
"name": "Zielgruppe",
"use": "filter",
"settings": {
"title": "Zielgruppe",
"items": [
{
"checkbox": {
"text": "Zielgruppe 1"
}
},
{
"checkbox": {
"text": "Zielgruppe 2"
}
},
{
"checkbox": {
"text": "Zielgruppe 3"
}
}
]
}
},
{
"name": "Datum",
"use": "filter--date"
}
],
"button": {
"link": null,
"type": "submit",
"text": "Filter anwenden",
"icon": "search"
}
}