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-b3d7" 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-357f" 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-4d3e" 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-d2a1" 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-eb87" 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-c4a7" 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-6333" 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-5d0e" 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-59b3" 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-bd01" 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-9ba2" 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-1037" 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-9122" 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-d616" 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-4a0b" 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-83f8" 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-543a" 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-1a17"><input class="checkbox__input" type="checkbox" id="checkbox-1a17" name="checkbox-1a17" /><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-c5fe"><input class="checkbox__input" type="checkbox" id="checkbox-c5fe" name="checkbox-c5fe" /><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-4e15"><input class="checkbox__input" type="checkbox" id="checkbox-4e15" name="checkbox-4e15" /><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-7128"><input class="checkbox__input" type="checkbox" id="checkbox-7128" name="checkbox-7128" /><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-f1c1"><input class="checkbox__input" type="checkbox" id="checkbox-f1c1" name="checkbox-f1c1" /><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-a6ba"><input class="checkbox__input" type="checkbox" id="checkbox-a6ba" name="checkbox-a6ba" /><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-0724"><input class="checkbox__input" type="checkbox" id="checkbox-0724" name="checkbox-0724" /><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-f005"><input class="checkbox__input" type="checkbox" id="checkbox-f005" name="checkbox-f005" /><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-c93b"><input class="checkbox__input" type="checkbox" id="checkbox-c93b" name="checkbox-c93b" /><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-9f43"><input class="checkbox__input" type="checkbox" id="checkbox-9f43" name="checkbox-9f43" /><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-79f8"><input class="checkbox__input" type="checkbox" id="checkbox-79f8" name="checkbox-79f8" /><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-4431"><input class="checkbox__input" type="checkbox" id="checkbox-4431" name="checkbox-4431" /><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-ff2d"><input class="checkbox__input" type="checkbox" id="checkbox-ff2d" name="checkbox-ff2d" /><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-75e2"><input class="checkbox__input" type="checkbox" id="checkbox-75e2" name="checkbox-75e2" /><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-c0c3"><input class="checkbox__input" type="checkbox" id="checkbox-c0c3" name="checkbox-c0c3" /><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-d685"><input class="checkbox__input" type="checkbox" id="checkbox-d685" name="checkbox-d685" /><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-1c8c"><input class="checkbox__input" type="checkbox" id="checkbox-1c8c" name="checkbox-1c8c" /><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-c1b5"><input class="checkbox__input" type="checkbox" id="checkbox-c1b5" name="checkbox-c1b5" /><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-f7a2"><input class="checkbox__input" type="checkbox" id="checkbox-f7a2" name="checkbox-f7a2" /><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-5168"><input class="checkbox__input" type="checkbox" id="checkbox-5168" name="checkbox-5168" /><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-4ead"><input class="checkbox__input" type="checkbox" id="checkbox-4ead" name="checkbox-4ead" /><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-267c"><input class="checkbox__input" type="checkbox" id="checkbox-267c" name="checkbox-267c" /><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-9416"><input class="checkbox__input" type="checkbox" id="checkbox-9416" name="checkbox-9416" /><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-ec42"><input class="checkbox__input" type="checkbox" id="checkbox-ec42" name="checkbox-ec42" /><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-4587"><input class="checkbox__input" type="checkbox" id="checkbox-4587" name="checkbox-4587" /><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-5a7a"><input class="checkbox__input" type="checkbox" id="checkbox-5a7a" name="checkbox-5a7a" /><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-73e4"><input class="checkbox__input" type="checkbox" id="checkbox-73e4" name="checkbox-73e4" /><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-1fca"><input class="checkbox__input" type="checkbox" id="checkbox-1fca" name="checkbox-1fca" /><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-a159"><input class="checkbox__input" type="checkbox" id="checkbox-a159" name="checkbox-a159" /><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-2e48"><input class="checkbox__input" type="checkbox" id="checkbox-2e48" name="checkbox-2e48" /><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-15f1"><input class="checkbox__input" type="checkbox" id="checkbox-15f1" name="checkbox-15f1" /><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-6858"><input class="checkbox__input" type="checkbox" id="checkbox-6858" name="checkbox-6858" /><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-270d"><input class="checkbox__input" type="checkbox" id="checkbox-270d" name="checkbox-270d" /><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-e7af"><input class="checkbox__input" type="checkbox" id="checkbox-e7af" name="checkbox-e7af" /><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-e146"><input class="checkbox__input" type="checkbox" id="checkbox-e146" name="checkbox-e146" /><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-7418"><input class="checkbox__input" type="checkbox" id="checkbox-7418" name="checkbox-7418" /><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-e8e8"><input class="checkbox__input" type="checkbox" id="checkbox-e8e8" name="checkbox-e8e8" /><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-4814"><input class="checkbox__input" type="checkbox" id="checkbox-4814" name="checkbox-4814" /><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-41fc"><input class="checkbox__input" type="checkbox" id="checkbox-41fc" name="checkbox-41fc" /><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-f369"><input class="checkbox__input" type="checkbox" id="checkbox-f369" name="checkbox-f369" /><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-2884"><input class="checkbox__input" type="checkbox" id="checkbox-2884" name="checkbox-2884" /><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-0e54"><input class="checkbox__input" type="checkbox" id="checkbox-0e54" name="checkbox-0e54" /><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-3cb3"><input class="checkbox__input" type="checkbox" id="checkbox-3cb3" name="checkbox-3cb3" /><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-fc23"><input class="checkbox__input" type="checkbox" id="checkbox-fc23" name="checkbox-fc23" /><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-3379"><input class="checkbox__input" type="checkbox" id="checkbox-3379" name="checkbox-3379" /><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-8e8a"><input class="checkbox__input" type="checkbox" id="checkbox-8e8a" name="checkbox-8e8a" /><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-6986"><input class="checkbox__input" type="checkbox" id="checkbox-6986" name="checkbox-6986" /><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-49fe"><input class="checkbox__input" type="checkbox" id="checkbox-49fe" name="checkbox-49fe" /><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-313c"><input class="checkbox__input" type="checkbox" id="checkbox-313c" name="checkbox-313c" /><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-1dbd"><input class="checkbox__input" type="checkbox" id="checkbox-1dbd" name="checkbox-1dbd" /><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"
}
}