Navigation

Filterable list control panels

The filter control panel allows users to whittle down number of items in a list to help them focus in on a specific piece of content they may be looking for, or find content relevant to them based on specific filter parameters, housed in an expandable above the list.

Standard filterable list

Use filters in conjunction with search to help users narrow down large amounts of data or content. Follow form patterns for grouping, layout, and messaging. Note that notification messaging sits below the filter and above results.

        Date range
        Clear filters

        HTML code snippet

        <div id="o-filterable-list-controls" class="o-filterable-list-controls">
            <div class="o-expandable
                        o-expandable--background
                        o-expandable--border
                        o-expandable--onload-open">
                <button class="o-expandable__header" type="button">
                    <span class="o-expandable__label">
                        Filter posts
                    </span>
                    <span class="o-expandable__cues">
                        <span class="o-expandable__cue-open" role="img" aria-label="Show filters">
                              <svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg cf-icon-svg--plus-round" viewBox="0 0 17 20.4"><path d="M16.416 10.283A7.917 7.917 0 1 1 8.5 2.366a7.916 7.916 0 0 1 7.916 7.917zm-2.958.01a.792.792 0 0 0-.792-.792H9.284V6.12a.792.792 0 1 0-1.583 0V9.5H4.32a.792.792 0 0 0 0 1.584H7.7v3.382a.792.792 0 0 0 1.583 0v-3.382h3.382a.792.792 0 0 0 .792-.791z"/></svg>
                        </span>
                        <span class="o-expandable__cue-close" role="img" aria-label="Hide filters">
                          <svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg cf-icon-svg--minus-round" viewBox="0 0 17 20.4"><path d="M16.416 10.283A7.917 7.917 0 1 1 8.5 2.366a7.916 7.916 0 0 1 7.916 7.917zm-2.958.01a.792.792 0 0 0-.792-.792H4.32a.792.792 0 0 0 0 1.583h8.346a.792.792 0 0 0 .792-.791z"/></svg>
                        </span>
                    </span>
                </button>
                <div class="o-expandable__content">
                    <form method="get" action="#">
                        <div class="content-l">
                            <div class="content-l__col
                                content-l__col-1">
                                <div class="o-form__group">
                                    <div class="m-form-field">
                                        <label class="a-label a-label--heading" for="o-filterable-list-controls_title">
                                        Search by keyword(s)
                                        </label>
                                        <input type="text" name="title" id="o-filterable-list-controls_title" class="a-text-input a-text-input--full" maxlength="250">
                                    </div>
                                </div>
                            </div>
                            <div class="content-l__col
                                content-l__col-1-3">
                                <div class="o-form__group">
                                    <div class="m-form-field">
                                        <label class="a-label a-label--heading" for="o-filterable-list-controls_categories">
                                        Category
                                        </label>
                                        <div class="o-multiselect">
                                            <ul class="o-multiselect__choices"></ul>
                                            <header class="o-multiselect__header"><input class="o-multiselect__search a-text-input" type="text" placeholder="Select up to five" id="o-filterable-list-controls_categories" autocomplete="off"></header>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="content-l__col
                                content-l__col-1-3">
                                <div class="o-form__group">
                                    <div class="m-form-field">
                                        <label class="a-label a-label--heading" for="o-filterable-list-controls_topics">
                                        Topics
                                        </label>
                                        <div class="o-multiselect">
                                            <ul class="o-multiselect__choices"></ul>
                                            <header class="o-multiselect__header"><input class="o-multiselect__search a-text-input" type="text" placeholder="Select up to five" id="o-filterable-list-controls_topics" autocomplete="off"></header>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="content-l__col
                                content-l__col-1-3">
                                <div class="o-form__group">
                                    <div class="m-form-field">
                                        <label class="a-label a-label--heading" for="o-filterable-list-controls_language">
                                        Language
                                        </label>
                                        <div class="o-multiselect">
                                            <ul class="o-multiselect__choices"></ul>
                                            <header class="o-multiselect__header"><input class="o-multiselect__search a-text-input" type="text" placeholder="Select up to five" id="o-filterable-list-controls_language" autocomplete="off"></header>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="content-l__col
                                content-l__col-1">
                                <div class="content-l">
                                    <div class="content-l__col
                                        content-l__col-2-3">
                                        <div class="o-form__group">
                                            <fieldset class="o-form__fieldset">
                                                <legend class="h4">
                                                    Date range
                                                </legend>
                                                <div class="content-l">
                                                    <div class="content-l__col
                                                        content-l__col-1-2">
                                                        <div class="m-form-field">
                                                            <label class="a-label a-label--heading" for="o-filterable-list-controls_from-date">
                                                            From:
                                                            </label>
                                                            <input type="date" name="from_date" class="a-text-input a-text-input--full" placeholder="mm/dd/yyyy" data-type="date" id="o-filterable-list-controls_from-date">
                                                        </div>
                                                    </div>
                                                    <div class="content-l__col
                                                        content-l__col-1-2">
                                                        <div class="m-form-field">
                                                            <label class="a-label a-label--heading" for="o-filterable-list-controls_to-date">
                                                            To:
                                                            </label>
                                                            <input type="date" name="to_date" class="a-text-input a-text-input--full" placeholder="mm/dd/yyyy" data-type="date" id="o-filterable-list-controls_to-date">
                                                        </div>
                                                    </div>
                                                </div>
                                            </fieldset>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="content-l__col
                                content-l__col-1
                                m-btn-group">
                                <button class="a-btn" type="submit">
                                Apply filters
                                </button>
                                <a class="a-btn a-btn--link a-btn--warning" href="#">
                                Clear filters
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        Specs

        Filter panel style

        Latest Updates

        Page last edited:
        Show all details
        Edit page