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-5baa" 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-312b" 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-b4e6" 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-3f67" 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-cdbf" 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-04ce" 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-47c4" 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-95e2" 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-1963" 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-0262" 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-4e4a" 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-f3c2" 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-d568" 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-4af2" 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-f142" 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-e59f" 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-d76b" 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-7cc2"><input class="checkbox__input" type="checkbox" id="checkbox-7cc2" name="checkbox-7cc2" /><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-8c9a"><input class="checkbox__input" type="checkbox" id="checkbox-8c9a" name="checkbox-8c9a" /><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-c1bc"><input class="checkbox__input" type="checkbox" id="checkbox-c1bc" name="checkbox-c1bc" /><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-0347"><input class="checkbox__input" type="checkbox" id="checkbox-0347" name="checkbox-0347" /><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-9f2c"><input class="checkbox__input" type="checkbox" id="checkbox-9f2c" name="checkbox-9f2c" /><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-ccd7"><input class="checkbox__input" type="checkbox" id="checkbox-ccd7" name="checkbox-ccd7" /><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-4f3d"><input class="checkbox__input" type="checkbox" id="checkbox-4f3d" name="checkbox-4f3d" /><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-6b48"><input class="checkbox__input" type="checkbox" id="checkbox-6b48" name="checkbox-6b48" /><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-028c"><input class="checkbox__input" type="checkbox" id="checkbox-028c" name="checkbox-028c" /><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-1c91"><input class="checkbox__input" type="checkbox" id="checkbox-1c91" name="checkbox-1c91" /><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-d906"><input class="checkbox__input" type="checkbox" id="checkbox-d906" name="checkbox-d906" /><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-d9b2"><input class="checkbox__input" type="checkbox" id="checkbox-d9b2" name="checkbox-d9b2" /><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-db1d"><input class="checkbox__input" type="checkbox" id="checkbox-db1d" name="checkbox-db1d" /><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-f234"><input class="checkbox__input" type="checkbox" id="checkbox-f234" name="checkbox-f234" /><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-c93d"><input class="checkbox__input" type="checkbox" id="checkbox-c93d" name="checkbox-c93d" /><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-bff1"><input class="checkbox__input" type="checkbox" id="checkbox-bff1" name="checkbox-bff1" /><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-0f78"><input class="checkbox__input" type="checkbox" id="checkbox-0f78" name="checkbox-0f78" /><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-6d98"><input class="checkbox__input" type="checkbox" id="checkbox-6d98" name="checkbox-6d98" /><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-d6ae"><input class="checkbox__input" type="checkbox" id="checkbox-d6ae" name="checkbox-d6ae" /><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-ddda"><input class="checkbox__input" type="checkbox" id="checkbox-ddda" name="checkbox-ddda" /><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-1aea"><input class="checkbox__input" type="checkbox" id="checkbox-1aea" name="checkbox-1aea" /><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-7445"><input class="checkbox__input" type="checkbox" id="checkbox-7445" name="checkbox-7445" /><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-1a75"><input class="checkbox__input" type="checkbox" id="checkbox-1a75" name="checkbox-1a75" /><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-db6d"><input class="checkbox__input" type="checkbox" id="checkbox-db6d" name="checkbox-db6d" /><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-a30a"><input class="checkbox__input" type="checkbox" id="checkbox-a30a" name="checkbox-a30a" /><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-714c"><input class="checkbox__input" type="checkbox" id="checkbox-714c" name="checkbox-714c" /><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-672e"><input class="checkbox__input" type="checkbox" id="checkbox-672e" name="checkbox-672e" /><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-8c92"><input class="checkbox__input" type="checkbox" id="checkbox-8c92" name="checkbox-8c92" /><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-eb7a"><input class="checkbox__input" type="checkbox" id="checkbox-eb7a" name="checkbox-eb7a" /><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-7cbd"><input class="checkbox__input" type="checkbox" id="checkbox-7cbd" name="checkbox-7cbd" /><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-be13"><input class="checkbox__input" type="checkbox" id="checkbox-be13" name="checkbox-be13" /><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-5d31"><input class="checkbox__input" type="checkbox" id="checkbox-5d31" name="checkbox-5d31" /><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-fa3a"><input class="checkbox__input" type="checkbox" id="checkbox-fa3a" name="checkbox-fa3a" /><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-0811"><input class="checkbox__input" type="checkbox" id="checkbox-0811" name="checkbox-0811" /><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-f5f7"><input class="checkbox__input" type="checkbox" id="checkbox-f5f7" name="checkbox-f5f7" /><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-1e73"><input class="checkbox__input" type="checkbox" id="checkbox-1e73" name="checkbox-1e73" /><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-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">Kressberg</span></label></div>
<div class="filter__item"><label class="checkbox" for="checkbox-d048"><input class="checkbox__input" type="checkbox" id="checkbox-d048" name="checkbox-d048" /><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-6bdf"><input class="checkbox__input" type="checkbox" id="checkbox-6bdf" name="checkbox-6bdf" /><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-4ce6"><input class="checkbox__input" type="checkbox" id="checkbox-4ce6" name="checkbox-4ce6" /><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-9f79"><input class="checkbox__input" type="checkbox" id="checkbox-9f79" name="checkbox-9f79" /><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-eac6"><input class="checkbox__input" type="checkbox" id="checkbox-eac6" name="checkbox-eac6" /><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-6661"><input class="checkbox__input" type="checkbox" id="checkbox-6661" name="checkbox-6661" /><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-7f9c"><input class="checkbox__input" type="checkbox" id="checkbox-7f9c" name="checkbox-7f9c" /><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-e7a1"><input class="checkbox__input" type="checkbox" id="checkbox-e7a1" name="checkbox-e7a1" /><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-e20a"><input class="checkbox__input" type="checkbox" id="checkbox-e20a" name="checkbox-e20a" /><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-2e49"><input class="checkbox__input" type="checkbox" id="checkbox-2e49" name="checkbox-2e49" /><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-0547"><input class="checkbox__input" type="checkbox" id="checkbox-0547" name="checkbox-0547" /><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-6fac"><input class="checkbox__input" type="checkbox" id="checkbox-6fac" name="checkbox-6fac" /><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-3685"><input class="checkbox__input" type="checkbox" id="checkbox-3685" name="checkbox-3685" /><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"
}
}