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.

STATEEXAMPLE
Default
Focus
Disabled

Dos and Don'ts

Do
  • 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
  • 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

Events