Textbox Filter

The textbox filter is a component that enables a user to apply filters by entering values in a text entry field. These filters can be limited to a single attribute, such as name, or can be applied to a number of attributes available in an attached dropdown.

Use a textbox filter when…

The user is familiar with the dataset and is trying to locate items that they already know exist
The important attributes to filter on are mostly open-ended values such as names, creation dates, or numerals rather than discrete categories.
If the user is not familiar with the dataset or looking for items that have specific traits from a list of discrete categories, use a checkbox filter instead.

A single-attribute textbox filter

A multi-attribute textbox filter

Textbox Filter

Attribute Selector (optional): Contains a list of the possible attributes by which to filter.
Filter Query Field: The user’s filter query is entered here. Filters may be activated as the user types, or if that is not possible, when the user presses the “enter” key. When the filter is activated, all objects that do not have a match to the value in this field are hidden.

Filter Query Dropdown (optional): Use the filter query dropdown when the possible values for the attribute are known ahead of time and can be arranged into a fixed list (e.g a list of statuses). The filter is activated when the user selects a value. Objects that do not have this value are hidden.
Active Filters: See filter for a description of active filters and their behavior.

Special Query Field (optional): Certain types of values, such as numerals, dates, and times, have special input fields that make them easier to enter. These special input fields should be used in place of the normal textbox when they exist for the selected attribute. Examples include the touchspin, datepicker, and timepicker.

PatternFly Core Example

Examples

Input Filters

Select Filters

Category Filters

Reference Markup

<div>
  <h3>Input Filters</h3>
  <div style="width: 300px;">
    <div class="filter-pf" id="input-filters">
      <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" id="select-filters">
    <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 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" id="category-filters">
    <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 filter-selected 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 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 filter-selected 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="#">Outback</a></li>
                <li><a href="#">Crosstrek</a></li>
                <li><a href="#">Impreza</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>