Filter
Filters combine Select, Input, and Tags into a single unified control, allowing users to select multiple filter values from a single list.
Overview
Both filters and multi-selects enable users to select multiple options from a list. Use the filter component for standalone filters, and multi-selects for form fields and filter rows.
Design and Layout
Using Filters with Pagination
To position a filter above a data table or a list that requires filtering, place a filter in the actions
slot of pagination.

Style Variations
Filters have different colors, effects, and line weights depending on their state. These differences provide visual feedback to users and enhance usability.
STATE | EXAMPLE |
---|---|
Default | |
Focus | ![]() |
Disabled |
Dos and Don'ts

- Do use filters for lists and small data tables. For data tables with large amounts of data that are frequently filtered, consider using a filter row.

- Don’t use filters for form fields. Instead, use the multi-select component or a checkbox group if there are fewer than five options.
Installation
Props
No records available |
Events
No records available |