Filter
Open filter choices from a toolbar button and narrow a list by one or more groups of options.
<script setup lang="ts">import { ref } from 'vue'import { UiFilter } from 'grani' const categories = ref(['food', 'fun']) const CATEGORIES = [ { value: 'food', label: 'Food' }, { value: 'transport', label: 'Transport' }, { value: 'fun', label: 'Fun' },]</script> <template> <UiFilter v-model="categories" label="Categories" :items="CATEGORIES" /></template>
Also called filter dropdown, faceted filter, filter button.
Usage
<UiFilter :label="label" :items="items" v-model="value"/>
With GraniResolver in the Vite config, a template needs no import: set it up once.
API
| Name · type | Default | Description |
|---|---|---|
| Value | ||
| modelValueSelectValue[]= [] | [] | One dimension: the chosen values. |
| Data | ||
| itemsSelectOption<SelectValue>[]= [] | [] | One dimension: its options, as a select's (SelectOption). |
| State | ||
| loadingboolean= false | false | One dimension: the options are on their way. With none yet, rows in their shape; with options in view, they stay, held and dimmed. Several: each list takes its own. |
| Behavior | ||
| label*string | The dimension, on the button: "Categories". | |
| countnumber | Several dimensions: how many of them have a value (status and channel is 2), for the button and Reset. Required with sections: without it the button shows nothing chosen and Reset stays held. | |
| Look | ||
| alignstart | center | end= "start" | "start" | Which edge of the button the panel lines up with. |
| sizexs | sm | md | Step of the control ladder, as the rest of the toolbar row. Unset, the app's size (createGrani({ size })), sm by default. | |
Attributes: class and style stay on the outer element; the rest (native attributes, aria-*, data-testid) reach the control inside it.
When to use another component
| When you need | Take |
|---|---|
| A period | Date range |
| The columns a table shows | Table columns |
| One value in a form | Select (multiple for several) |
| Commands | Menu |