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-2768" 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-e38d" 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-c8fa" 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-2405" 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-65d9" 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-73ae" 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-4f1d" 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-3aed" 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-1f23" 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-e86e" 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-5dcb" 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-ced9" 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-6fbf" 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-8a29" 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-4524" 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-9fe9" 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-4744" 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-ccd2"><input class="checkbox__input" type="checkbox" id="checkbox-ccd2" name="checkbox-ccd2" /><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-fc04"><input class="checkbox__input" type="checkbox" id="checkbox-fc04" name="checkbox-fc04" /><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-80d9"><input class="checkbox__input" type="checkbox" id="checkbox-80d9" name="checkbox-80d9" /><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-fc4b"><input class="checkbox__input" type="checkbox" id="checkbox-fc4b" name="checkbox-fc4b" /><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-66ea"><input class="checkbox__input" type="checkbox" id="checkbox-66ea" name="checkbox-66ea" /><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-1001"><input class="checkbox__input" type="checkbox" id="checkbox-1001" name="checkbox-1001" /><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-f326"><input class="checkbox__input" type="checkbox" id="checkbox-f326" name="checkbox-f326" /><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-a32a"><input class="checkbox__input" type="checkbox" id="checkbox-a32a" name="checkbox-a32a" /><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-2307"><input class="checkbox__input" type="checkbox" id="checkbox-2307" name="checkbox-2307" /><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-7981"><input class="checkbox__input" type="checkbox" id="checkbox-7981" name="checkbox-7981" /><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-e38b"><input class="checkbox__input" type="checkbox" id="checkbox-e38b" name="checkbox-e38b" /><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-08dc"><input class="checkbox__input" type="checkbox" id="checkbox-08dc" name="checkbox-08dc" /><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-7a74"><input class="checkbox__input" type="checkbox" id="checkbox-7a74" name="checkbox-7a74" /><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-33e6"><input class="checkbox__input" type="checkbox" id="checkbox-33e6" name="checkbox-33e6" /><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-cb16"><input class="checkbox__input" type="checkbox" id="checkbox-cb16" name="checkbox-cb16" /><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-c663"><input class="checkbox__input" type="checkbox" id="checkbox-c663" name="checkbox-c663" /><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-b859"><input class="checkbox__input" type="checkbox" id="checkbox-b859" name="checkbox-b859" /><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-641c"><input class="checkbox__input" type="checkbox" id="checkbox-641c" name="checkbox-641c" /><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-4ebf"><input class="checkbox__input" type="checkbox" id="checkbox-4ebf" name="checkbox-4ebf" /><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-f308"><input class="checkbox__input" type="checkbox" id="checkbox-f308" name="checkbox-f308" /><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-3efa"><input class="checkbox__input" type="checkbox" id="checkbox-3efa" name="checkbox-3efa" /><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-cbfe"><input class="checkbox__input" type="checkbox" id="checkbox-cbfe" name="checkbox-cbfe" /><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-12d7"><input class="checkbox__input" type="checkbox" id="checkbox-12d7" name="checkbox-12d7" /><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-d83b"><input class="checkbox__input" type="checkbox" id="checkbox-d83b" name="checkbox-d83b" /><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-553b"><input class="checkbox__input" type="checkbox" id="checkbox-553b" name="checkbox-553b" /><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-2b29"><input class="checkbox__input" type="checkbox" id="checkbox-2b29" name="checkbox-2b29" /><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-c9e6"><input class="checkbox__input" type="checkbox" id="checkbox-c9e6" name="checkbox-c9e6" /><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-456c"><input class="checkbox__input" type="checkbox" id="checkbox-456c" name="checkbox-456c" /><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-6f43"><input class="checkbox__input" type="checkbox" id="checkbox-6f43" name="checkbox-6f43" /><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-1df3"><input class="checkbox__input" type="checkbox" id="checkbox-1df3" name="checkbox-1df3" /><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-d274"><input class="checkbox__input" type="checkbox" id="checkbox-d274" name="checkbox-d274" /><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-51d9"><input class="checkbox__input" type="checkbox" id="checkbox-51d9" name="checkbox-51d9" /><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-9152"><input class="checkbox__input" type="checkbox" id="checkbox-9152" name="checkbox-9152" /><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-9973"><input class="checkbox__input" type="checkbox" id="checkbox-9973" name="checkbox-9973" /><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-fa5c"><input class="checkbox__input" type="checkbox" id="checkbox-fa5c" name="checkbox-fa5c" /><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-77cc"><input class="checkbox__input" type="checkbox" id="checkbox-77cc" name="checkbox-77cc" /><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-6b4f"><input class="checkbox__input" type="checkbox" id="checkbox-6b4f" name="checkbox-6b4f" /><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-6b1c"><input class="checkbox__input" type="checkbox" id="checkbox-6b1c" name="checkbox-6b1c" /><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-7ac3"><input class="checkbox__input" type="checkbox" id="checkbox-7ac3" name="checkbox-7ac3" /><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-a16e"><input class="checkbox__input" type="checkbox" id="checkbox-a16e" name="checkbox-a16e" /><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-8f9f"><input class="checkbox__input" type="checkbox" id="checkbox-8f9f" name="checkbox-8f9f" /><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-cf62"><input class="checkbox__input" type="checkbox" id="checkbox-cf62" name="checkbox-cf62" /><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-5426"><input class="checkbox__input" type="checkbox" id="checkbox-5426" name="checkbox-5426" /><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-9978"><input class="checkbox__input" type="checkbox" id="checkbox-9978" name="checkbox-9978" /><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-24d5"><input class="checkbox__input" type="checkbox" id="checkbox-24d5" name="checkbox-24d5" /><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-1e09"><input class="checkbox__input" type="checkbox" id="checkbox-1e09" name="checkbox-1e09" /><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-0035"><input class="checkbox__input" type="checkbox" id="checkbox-0035" name="checkbox-0035" /><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-fe28"><input class="checkbox__input" type="checkbox" id="checkbox-fe28" name="checkbox-fe28" /><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-b847"><input class="checkbox__input" type="checkbox" id="checkbox-b847" name="checkbox-b847" /><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-cc97"><input class="checkbox__input" type="checkbox" id="checkbox-cc97" name="checkbox-cc97" /><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"
}
}