--- meta: title: Filter Wrapper description: A wrapper component for filter inputs that automatically submits filter parameters to a parent data-table component. Provides a default submit button or allows custom submit controls. layout: component --- ```html:preview ``` ## Examples ### Basic Usage Wrap filter inputs to automatically submit to a parent data-table. ```html:preview ``` ### Multiple Filter Inputs Combine multiple input fields for complex filtering. ```html:preview
``` ### With Select Dropdown Use select components for dropdown filters. ```html:preview
All Active Inactive Pending All Admin User Guest
``` ### With Data Select Use data-select components for predefined options. ```html:preview
``` ### Custom Button Text Change the default button text using the `button` attribute. ```html:preview ``` ### Custom Submit Button Provide your own submit button by adding the `submit` attribute to a button. ```html:preview
Apply Clear
``` ### Omit Empty Values Use the `omit-empty` attribute on inputs to exclude them from the filter when empty. ```html:preview
``` ### Date Range Filter Create a date range filter with multiple inputs. ```html:preview
``` ### Number Range Filter Filter by number ranges. ```html:preview
``` ### Advanced Filter Form A complete filter form with multiple field types. ```html:preview
All Categories Electronics Clothing Books Name Price Date
``` ### With Query Builder Integrate with query builder for advanced filtering. ```html:preview ```