Framework Component Library

Filter: Two Fields 

<!-- Filter -->
<div class="filter" id="filter-2">
    <div class="fw-container">
        <div class="filter__inner">
            <form class="filter__form" action="#" method="get">
                <div class="filter__form-item filter__form-item--select">
                    <label class="filter__form-item-label" for="filter__form-item-select-1">Category</label>
                    <div class="filter__form-item-select-wrapper">
                        <select class="filter__form-item-select" id="filter__form-item-select-1">
                            <option value="All Categories" selected>All Categories</option>
                            <option value="Vestibulum purus quam">Vestibulum purus quam</option>
                            <option value="Maecenas">Maecenas</option>
                            <option value="Nullam quis ante">Nullam quis ante</option>
                            <option value="Donec vitae">Donec vitae</option>
                            <option value="Cras dapibus">Cras dapibus</option>
                            <option value="Maecenas tempus">Maecenas tempus</option>
                            <option value="Curabitur ligula sapien">Curabitur ligula sapien</option>
                            <option value="Vivamus elementum semper nisi">Vivamus elementum semper nisi</option>
                        </select>
                        <span class="filter__form-item-select-icon" aria-hidden="true">
                            <svg class="icon icon--expand">
                                <use href="/images/icons.svg?1.0.0#expand" />
                            </svg>
                        </span>
                    </div>
                </div>
                <div class="filter__form-item filter__form-item--search">
                    <label class="filter__form-item-label" for="filter__form-item-search-input">
                        Search
                    </label>
                    <div class="filter__form-item-search-wrapper">
                        <input class="filter__form-item-search-input" id="filter__form-item-search-input" placeholder="Search by name or department" type="search">
                    </div>
                </div>
                <div class="filter__form-item filter__form-item--action">
                    <div class="filter__form-item-submit">

                        <button class="button-filled
 		 			button-filled--large
 				" type="submit">
                            <span class="button-filled__inner"> <span class="button-filled__label">Submit</span>
                            </span>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- END: Filter -->
 
{#
	{% include '@component-filter' with {
		action_category: '#',
		selects: [
			{
				label: 'Category',
				options: [
					{
						title: 'All Categories',
						selected: true
					}
				]
			}
		],
		search_placeholder: 'Placeholder',
		results: '',
		category: ''
	} %}
#}

{% set id = uniqid('filter') %}

<!-- Filter -->
<div class="filter" id="{{ id }}">
	<div class="fw-container">
		<div class="filter__inner">
			<form
				class="filter__form"
				action="{{ action_category }}"
				method="get"
			>
				{% for select in selects %}
					<div class="filter__form-item filter__form-item--select">
						<label
							class="filter__form-item-label"
							for="{{ 'filter__form-item-select-' ~ loop.index }}"
						>
							{{- select.label -}}
						</label>
						<div class="filter__form-item-select-wrapper">
							<select
								class="filter__form-item-select"
								id="{{ 'filter__form-item-select-' ~ loop.index }}"
							>
								{% for option in select.options %}
									<option
										value="{{ option.title }}"
										{% if option.selected %}selected{% endif %}
									>
										{{- option.title -}}
									</option>
								{% endfor %}
							</select>
							<span class="filter__form-item-select-icon" aria-hidden="true">
								{{ icon('expand') }}
							</span>
						</div>
					</div>
				{% endfor %}
				<div class="filter__form-item filter__form-item--search">
					<label
						class="filter__form-item-label"
						for="filter__form-item-search-input"
					>
						Search
					</label>
					<div class="filter__form-item-search-wrapper">
						<input
							class="filter__form-item-search-input"
							id="filter__form-item-search-input"
							placeholder="{{ search_placeholder }}"
							type="search"
						>
					</div>
				</div>
				<div class="filter__form-item filter__form-item--action">
					<div class="filter__form-item-submit">
						{% include '@partial-button' with {
							classes: {
								base: 'button-filled',
								modifiers: [
									'large'
								]
							},
							attributes: {
								'type': 'submit'
							},
							title: 'Submit'
						} only %}
					</div>
				</div>
			</form>
			{% if results != '' %}
				<div class="filter__results">
					<p class="filter__results-description">
						<span class="filter__results-label">
							{{ results }} Results found for:
						</span>
						<span class="filter__results-category">
							{{- category -}}
						</span>
					</p>
					<div class="filter__results-action">
						{% include '@partial-link' with {
							classes: {
								base: 'button-bordered'
							},
							title: 'Reset',
							url: '#',
							icon: 'reset',
							attributes: {
								'aria-label': 'Reset Filters'
							}
						} only %}
					</div>
				</div>
			{% endif %}
		</div>
	</div>
</div>
<!-- END: Filter -->

No notes defined.