Filter

Filter is a component that creates a set of radio buttons for filtering content. It provides a clean interface for users to select from multiple options with optional reset functionality.

Basic Usage

Code Example

Basic.vue

Components

Filter is a standalone component.

Filter

The Filter component creates a set of radio buttons for filtering content. It provides a clean interface for users to select from multiple options with optional reset functionality.

Filter Props	Type	Description
is	string	Allows changing the element tag. Default is `div`.
name	string	The name attribute for the radio button group. Required for proper radio button functionality.
items	array	An array of items to display as filter options. Each item can be either a string or an object with `label` and `value` properties. If a string is provided, it will be used as both the label and value.
modelValue	any	v-model The currently selected filter value.
resetLabel	string	The label for the reset button. Default is `All`.
position	string	Controls the position of the reset button. Options: - `start` (default) - `end`
start	boolean	Set position to start
end	boolean	Set position to end
color	string	The color of the filter buttons. Default is `neutral`.
neutral	boolean	Sets color to neutral
primary	boolean	Sets color to primary
secondary	boolean	Sets color to secondary
accent	boolean	Sets color to accent
info	boolean	Sets color to info
success	boolean	Sets color to success
warning	boolean	Sets color to error
size	string	The size of the filter buttons. Options: - `xl` - `lg` - `md` (default) - `sm` - `xs`
xl	boolean	Set size to xl
lg	boolean	Set size to lg
md	boolean	Set size to md
sm	boolean	Set size to sm
xs	boolean	Set size to xs

Filter Events	Arguments	Description
update:modelValue		v-model Emitted when the selected filter value changes.

Filter Slots	Description
default	Optional slot for adding custom filter items.

Examples

Below are additional usage examples for the Filter component. For basic usage, see the intro.

With Reset Button

Shows the resetLabel and position props to customize the reset button.

Colors

Color all buttons with the color prop.

Sizes

Set the size of the buttons with the size prop.

Prev FileInput

Next FormControl