Flint Institute of Music Component Library

Filter: Events 

<!-- Filter -->
<div class="filter">
    <div class="filter_inner">
        <div class="filter_panels">
            <form class="filter_tools" action="#" method="get">
                <fieldset class="filter_fieldset">
                    <legend class="filter_legend">Programs</legend>
                    <div class="filter_options">
                        <div class="filter_option">
                            <input class="filter_option_input_field" checked type="radio" id="All" name="Programs">
                            <label class="filter_option_input_label" for="All">All</label>
                            <span class="filter_option_input_indicator"></span>
                        </div>
                        <div class="filter_option">
                            <input class="filter_option_input_field" type="radio" id="FIM Presents" name="Programs">
                            <label class="filter_option_input_label" for="FIM Presents">FIM Presents</label>
                            <span class="filter_option_input_indicator"></span>
                        </div>
                        <div class="filter_option">
                            <input class="filter_option_input_field" type="radio" id="Capitol Theatre" name="Programs">
                            <label class="filter_option_input_label" for="Capitol Theatre">Capitol Theatre</label>
                            <span class="filter_option_input_indicator"></span>
                        </div>
                        <div class="filter_option">
                            <input class="filter_option_input_field" type="radio" id="Whiting Auditorium" name="Programs">
                            <label class="filter_option_input_label" for="Whiting Auditorium">Whiting Auditorium</label>
                            <span class="filter_option_input_indicator"></span>
                        </div>
                        <div class="filter_option">
                            <input class="filter_option_input_field" type="radio" id="Flint Symphony Orchestra" name="Programs">
                            <label class="filter_option_input_label" for="Flint Symphony Orchestra">Flint Symphony Orchestra</label>
                            <span class="filter_option_input_indicator"></span>
                        </div>
                        <div class="filter_option">
                            <input class="filter_option_input_field" type="radio" id="Flint Repertory Theatre" name="Programs">
                            <label class="filter_option_input_label" for="Flint Repertory Theatre">Flint Repertory Theatre</label>
                            <span class="filter_option_input_indicator"></span>
                        </div>
                        <div class="filter_option">
                            <input class="filter_option_input_field" type="radio" id="Flint School of Performing Arts" name="Programs">
                            <label class="filter_option_input_label" for="Flint School of Performing Arts">Flint School of Performing Arts</label>
                            <span class="filter_option_input_indicator"></span>
                        </div>
                    </div>
                </fieldset>
                <fieldset class="filter_fieldset">
                    <legend class="filter_legend">Ticketed</legend>
                    <div class="filter_options">
                        <div class="filter_option">
                            <input class="filter_option_input_field" checked type="radio" id="All" name="Ticketed">
                            <label class="filter_option_input_label" for="All">All</label>
                            <span class="filter_option_input_indicator"></span>
                        </div>
                        <div class="filter_option">
                            <input class="filter_option_input_field" type="radio" id="Ticketed" name="Ticketed">
                            <label class="filter_option_input_label" for="Ticketed">Ticketed</label>
                            <span class="filter_option_input_indicator"></span>
                        </div>
                        <div class="filter_option">
                            <input class="filter_option_input_field" type="radio" id="Free to Attend" name="Ticketed">
                            <label class="filter_option_input_label" for="Free to Attend">Free to Attend</label>
                            <span class="filter_option_input_indicator"></span>
                        </div>
                    </div>
                </fieldset>
                <div class="filter_tool">
                    <label class="filter_label" for="filter_tool_label_1">Event Type</label>
                    <div class="filter_tool_select_wrapper">
                        <select class="filter_tool_select" id="filter_tool_label_1">
                            <option value="Season 22-23" selected>Season 22-23</option>
                            <option value="Category One">Category One</option>
                            <option value="Another Category">Another Category</option>
                        </select>
                        <span class="filter_tool_select_icon">
                            <svg class="icon icon_chevron_down">
                                <use href="/images/icons.svg#chevron_down" />
                            </svg>
                        </span>
                    </div>
                </div>
                <div class="filter_tool">
                    <label class="filter_label" for="filter_tool_label_2">Venues</label>
                    <div class="filter_tool_select_wrapper">
                        <select class="filter_tool_select" id="filter_tool_label_2">
                            <option value="All Venues" selected>All Venues</option>
                            <option value="Bower Theatre">Bower Theatre</option>
                            <option value="Capitol Theatre">Capitol Theatre</option>
                            <option value="Elgood Theatre">Elgood Theatre</option>
                            <option value="MacArthur Recital Hall">MacArthur Recital Hall</option>
                            <option value="Whiting Auditorium">Whiting Auditorium</option>
                        </select>
                        <span class="filter_tool_select_icon">
                            <svg class="icon icon_chevron_down">
                                <use href="/images/icons.svg#chevron_down" />
                            </svg>
                        </span>
                    </div>
                </div>
                <div class="filter_tool" action="#" method="get">
                    <label class="filter_label" for="filter_search_input">Search</label>
                    <div class="filter_tool_search_wrapper">
                        <input class="filter_tool_search_input" id="filter_tool_search_input" type="search" placeholder="Search by keyword">
                        <span class="filter_tool_search_icon">
                            <svg class="icon icon_search">
                                <use href="/images/icons.svg#search" />
                            </svg>
                        </span>
                    </div>
                </div>
                <div class="filter_tool">
                    <label class="filter_label" for="filter_tool_label_date">Date</label>
                    <div class="filter_tool_select_wrapper">
                        <span class="filter_tool_select_prepend_icon">
                            <svg class="icon icon_calendar">
                                <use href="/images/icons.svg#calendar" />
                            </svg>
                        </span>
                        <select class="filter_tool_select filter_tool_select_date" id="filter_tool_label_date">
                            <option value="Choose a month">Choose a month</option>
                            <option value="January">January</option>
                            <option value="February">February</option>
                        </select>
                        <span class="filter_tool_select_icon">
                            <svg class="icon icon_chevron_down">
                                <use href="/images/icons.svg#chevron_down" />
                            </svg>
                        </span>
                    </div>
                </div>
                <button class="filter_tools_submit" type="submit">
                    <span class="filter_tools_submit_inner">
                        <span class="filter_tools_submit_label">Filter Events</span>
                        <span class="filter_tools_submit_icon">
                            <svg class="icon icon_chevron_right">
                                <use href="/images/icons.svg#chevron_right" />
                            </svg>
                        </span>
                    </span>
                </button>
            </form>
        </div>
    </div>
</div>
<!-- END: Filter -->
 
{#
	{% include '@partial-filter' with {
		label: 'Directory',
		active: 'search',
		action_category: '#',
		action_search: '#',
		tools: [
			{
				label: 'Category',
				options: [
					{
						label: 'All Categories',
						label: true
					}
				]
			}
		],
		search_placeholder: 'Placeholder',
		results: '',
		category: ''
	} %}
#}
<!-- Filter -->
<div class="filter">
	<div class="filter_inner">
		<div class="filter_panels">
			<form class="filter_tools" action="{{ action_category }}" method="get">
				{% for fieldset in fieldsets %}
					<fieldset class="filter_fieldset">
						<legend class="filter_legend">{{ fieldset.legend }}</legend>
						<div class="filter_options">
							{% for option in fieldset.options %}
								<div class="filter_option">
									<input class="filter_option_input_field" {% if loop.first %}checked{% endif %} type="radio" id="{{ option.id }}" name="{{ fieldset.legend }}">
									<label class="filter_option_input_label" for="{{ option.id }}">{{ option.label }}</label>
									<span class="filter_option_input_indicator"></span>
								</div>
							{% endfor %}
						</div>
					</fieldset>
				{% endfor %}
				{% for tool in tools %}
					<div class="filter_tool">
						<label class="filter_label" for="filter_tool_label_{{ loop.index }}">{{ tool.label }}</label>
						<div class="filter_tool_select_wrapper">
							<select class="filter_tool_select" id="filter_tool_label_{{ loop.index }}">
								{% for option in tool.options %}
									<option value="{{ option.label }}" {% if option.selected == true %} selected {% endif %}>{{ option.label }}</option>
								{% endfor %}
							</select>
							<span class="filter_tool_select_icon">{{ icon('chevron_down') }}</span>
						</div>
					</div>
				{% endfor %}
				<div class="filter_tool" action="{{ action_search }}" method="get">
					<label class="filter_label" for="filter_search_input">Search</label>
					<div class="filter_tool_search_wrapper">
						<input class="filter_tool_search_input" id="filter_tool_search_input" type="search" placeholder="{{ search_placeholder }}">
						<span class="filter_tool_search_icon">{{ icon('search') }}</span>
					</div>
				</div>
				<div class="filter_tool">
					<label class="filter_label" for="filter_tool_label_date">Date</label>
					<div class="filter_tool_select_wrapper">
						<span class="filter_tool_select_prepend_icon">{{ icon('calendar') }}</span>
						<select class="filter_tool_select filter_tool_select_date" id="filter_tool_label_date">
							<option value="Choose a month">Choose a month</option>
							<option value="January">January</option>
							<option value="February">February</option>
						</select>
						<span class="filter_tool_select_icon">{{ icon('chevron_down') }}</span>
					</div>
				</div>
				<button class="filter_tools_submit" type="submit">
					<span class="filter_tools_submit_inner">
						<span class="filter_tools_submit_label">Filter Events</span>
						<span class="filter_tools_submit_icon">{{ icon('chevron_right') }}</span>
					</span>
				</button>
			</form>
		</div>
	</div>
</div>
<!-- END: Filter -->

No notes defined.