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
- 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 Not Available
There is no PatternFly-Core code available for this pattern at this time. Links to the JS framework implementations can be seen above.
Visit the Contributing to PatternFly documentation to learn how to contribute the code.