patternfly/tests/pages/filter.html

This reference implementation of PatternFly is based on [Bootstrap v3](http://getbootstrap.com/). Think of PatternFly as a "skinned" version of Bootstrap with additional components and customizations.

---
categories: [Widgets]
layout: page
title: Filter
resource: true
---
<div>
  <h3>Input Filters</h3>
  <div style="width: 300px;">
    <div class="filter-pf">
      <div class="filter-pf-fields">
        <div class="input-group form-group">
          <div class="input-group-btn">
            <div class="dropdown btn-group">
              <button type="button" class="dropdown-toggle btn btn-default" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Name
                <span class="caret"></span>
              </button>
              <ul class="dropdown-menu">
                <li class="selected"><a href="#">Name</a></li>
                <li><a href="#">Address</a></li>
                <li><a href="#">Birth Month</a></li>
                <li><a href="#">Car</a></li>
              </ul>
            </div>
          </div>
          <input type="text" class="form-control" value="" placeholder="Filter by Name">
        </div>
      </div>
    </div>
  </div>

  <h3>Select Filters</h3>
  <div class="filter-pf">
    <div class="filter-pf-fields">
      <div class="input-group form-group">
        <div class="input-group-btn">
          <div class="dropdown btn-group">
            <button type="button" class="filter-pf-fields dropdown-toggle btn btn-default" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Birth Month
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
              <li class="selected"><a href="#">Name</a></li>
              <li><a href="#">Address</a></li>
              <li><a href="#">Birth Month</a></li>
              <li><a href="#">Car</a></li>
            </ul>
          </div>
        </div>
        <div class="filter-pf-select">
          <div class="dropdown btn-group">
            <button type="button" class="filter-pf-select-dropdown dropdown-toggle btn btn-default" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Filter by Birth Month
              <span class="caret"></span>
            </button>
            <ul role="menu" class="dropdown-menu" aria-labelledby="filterSelectMenu">
              <li><a href="#">Filter by Birth Month</a></li>
              <li><a role="menuitem" tabindex="-1" href="#">January</a></li>
              <li class="selected"><a role="menuitem" tabindex="-1" href="#">February</a></li>
              <li><a href="#">March</a></li>
              <li><a href="#">April</a></li>
              <li><a href="#">May</a></li>
              <li><a href="#">June</a></li>
              <li><a href="#">July</a></li>
              <li><a href="#">August</a></li>
              <li><a href="#">September</a></li>
              <li><a href="#">October</a></li>
              <li><a href="#">November</a></li>
              <li><a href="#">December</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>

  <h3>Category Filters</h3>
  <div class="filter-pf">
    <div class="filter-pf-fields">
      <div class="input-group form-group">
        <div class="input-group-btn">
          <div class="dropdown btn-group">
            <button type="button" class="filter-pf-fields dropdown-toggle btn btn-default" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Car
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
              <li><a href="#">Name</a></li>
              <li><a href="#">Address</a></li>
              <li><a href="#">Birth Month</a></li>
              <li class="selected"><a href="#">Car</a></li>
            </ul>
          </div>
        </div>
        <div class="filter-pf-category-select">
          <div class="filter-pf-select">
            <div class="dropdown btn-group">
              <button type="button" class="filter-pf-select-dropdown dropdown-toggle btn btn-default" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Subaru
                <span class="caret"></span>
              </button>
              <ul class="dropdown-menu">
                <li><a href="#">Filter by Car Make</a></li>
                <li class="selected"><a href="#">Subaru</a></li>
                <li><a href="#">Toyota</a></li>
              </ul>
            </div>
          </div>
          <div class="filter-pf-select">
            <div class="dropdown btn-group">
              <button type="button" class="filter-pf-category-select-value filter-pf-select-dropdown dropdown-toggle btn btn-default" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Crosstrek
                <span class="caret"></span>
              </button>
              <ul class="dropdown-menu">
                <li><a href="#">Filter by Car Model</a></li>
                <li><a href="#">Outback</a></li>
                <li><a href="#">Crosstrek</a></li>
                <li><a href="#">Impreza</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>