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-2bd7" 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-7d1e" 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-22bf" 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-a68f" 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-f459" 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-3f85" 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-278c" 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-e6ca" 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-6196" 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-63fc" 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-c5ab" 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-1334" 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-ac0d" 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-2ff4" 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-0aad" 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-a83a" 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-a14d" 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-3af5"><input class="checkbox__input" type="checkbox" id="checkbox-3af5" name="checkbox-3af5" /><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-fcaf"><input class="checkbox__input" type="checkbox" id="checkbox-fcaf" name="checkbox-fcaf" /><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-5b3a"><input class="checkbox__input" type="checkbox" id="checkbox-5b3a" name="checkbox-5b3a" /><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-6c47"><input class="checkbox__input" type="checkbox" id="checkbox-6c47" name="checkbox-6c47" /><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-553c"><input class="checkbox__input" type="checkbox" id="checkbox-553c" name="checkbox-553c" /><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-4aaa"><input class="checkbox__input" type="checkbox" id="checkbox-4aaa" name="checkbox-4aaa" /><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-51c3"><input class="checkbox__input" type="checkbox" id="checkbox-51c3" name="checkbox-51c3" /><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-525e"><input class="checkbox__input" type="checkbox" id="checkbox-525e" name="checkbox-525e" /><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-d5c9"><input class="checkbox__input" type="checkbox" id="checkbox-d5c9" name="checkbox-d5c9" /><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-a306"><input class="checkbox__input" type="checkbox" id="checkbox-a306" name="checkbox-a306" /><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-a793"><input class="checkbox__input" type="checkbox" id="checkbox-a793" name="checkbox-a793" /><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-496e"><input class="checkbox__input" type="checkbox" id="checkbox-496e" name="checkbox-496e" /><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-56ef"><input class="checkbox__input" type="checkbox" id="checkbox-56ef" name="checkbox-56ef" /><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-978b"><input class="checkbox__input" type="checkbox" id="checkbox-978b" name="checkbox-978b" /><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-dc31"><input class="checkbox__input" type="checkbox" id="checkbox-dc31" name="checkbox-dc31" /><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-6f0b"><input class="checkbox__input" type="checkbox" id="checkbox-6f0b" name="checkbox-6f0b" /><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-0cee"><input class="checkbox__input" type="checkbox" id="checkbox-0cee" name="checkbox-0cee" /><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-f929"><input class="checkbox__input" type="checkbox" id="checkbox-f929" name="checkbox-f929" /><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-435e"><input class="checkbox__input" type="checkbox" id="checkbox-435e" name="checkbox-435e" /><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-2b93"><input class="checkbox__input" type="checkbox" id="checkbox-2b93" name="checkbox-2b93" /><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-417b"><input class="checkbox__input" type="checkbox" id="checkbox-417b" name="checkbox-417b" /><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-b6df"><input class="checkbox__input" type="checkbox" id="checkbox-b6df" name="checkbox-b6df" /><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-d3c4"><input class="checkbox__input" type="checkbox" id="checkbox-d3c4" name="checkbox-d3c4" /><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-b83e"><input class="checkbox__input" type="checkbox" id="checkbox-b83e" name="checkbox-b83e" /><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-0d2e"><input class="checkbox__input" type="checkbox" id="checkbox-0d2e" name="checkbox-0d2e" /><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-9b04"><input class="checkbox__input" type="checkbox" id="checkbox-9b04" name="checkbox-9b04" /><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-0fbe"><input class="checkbox__input" type="checkbox" id="checkbox-0fbe" name="checkbox-0fbe" /><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-047a"><input class="checkbox__input" type="checkbox" id="checkbox-047a" name="checkbox-047a" /><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-475f"><input class="checkbox__input" type="checkbox" id="checkbox-475f" name="checkbox-475f" /><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-2743"><input class="checkbox__input" type="checkbox" id="checkbox-2743" name="checkbox-2743" /><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-398e"><input class="checkbox__input" type="checkbox" id="checkbox-398e" name="checkbox-398e" /><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-32f1"><input class="checkbox__input" type="checkbox" id="checkbox-32f1" name="checkbox-32f1" /><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-ddc5"><input class="checkbox__input" type="checkbox" id="checkbox-ddc5" name="checkbox-ddc5" /><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-885a"><input class="checkbox__input" type="checkbox" id="checkbox-885a" name="checkbox-885a" /><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-5a97"><input class="checkbox__input" type="checkbox" id="checkbox-5a97" name="checkbox-5a97" /><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-40e8"><input class="checkbox__input" type="checkbox" id="checkbox-40e8" name="checkbox-40e8" /><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-656e"><input class="checkbox__input" type="checkbox" id="checkbox-656e" name="checkbox-656e" /><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-92b6"><input class="checkbox__input" type="checkbox" id="checkbox-92b6" name="checkbox-92b6" /><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-56b3"><input class="checkbox__input" type="checkbox" id="checkbox-56b3" name="checkbox-56b3" /><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-efa3"><input class="checkbox__input" type="checkbox" id="checkbox-efa3" name="checkbox-efa3" /><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-bfc4"><input class="checkbox__input" type="checkbox" id="checkbox-bfc4" name="checkbox-bfc4" /><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-3b26"><input class="checkbox__input" type="checkbox" id="checkbox-3b26" name="checkbox-3b26" /><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-e8bb"><input class="checkbox__input" type="checkbox" id="checkbox-e8bb" name="checkbox-e8bb" /><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-3601"><input class="checkbox__input" type="checkbox" id="checkbox-3601" name="checkbox-3601" /><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-ee91"><input class="checkbox__input" type="checkbox" id="checkbox-ee91" name="checkbox-ee91" /><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-9826"><input class="checkbox__input" type="checkbox" id="checkbox-9826" name="checkbox-9826" /><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-e11d"><input class="checkbox__input" type="checkbox" id="checkbox-e11d" name="checkbox-e11d" /><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-81fb"><input class="checkbox__input" type="checkbox" id="checkbox-81fb" name="checkbox-81fb" /><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-9e21"><input class="checkbox__input" type="checkbox" id="checkbox-9e21" name="checkbox-9e21" /><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-e158"><input class="checkbox__input" type="checkbox" id="checkbox-e158" name="checkbox-e158" /><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"
}
}