Filter list
Narrow results by ticking options that apply at once; a search field appears when there are six or more.
<script setup lang="ts">import { ref } from 'vue'import { UiFilterList } from 'grani' const few = ref(['food']) const CATEGORIES = [ { value: 'food', label: 'Food' }, { value: 'transport', label: 'Transport' }, { value: 'fun', label: 'Fun' },]</script> <template> <div class="w-64"> <UiFilterList v-model="few" :items="CATEGORIES" ariaLabel="Categories" /> </div></template>
Also called checkbox list, multi-select list, option list.
Usage
<UiFilterList :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 |
|---|---|---|
| items*SelectOption<SelectValue>[] | The options, as a select's: a value (as in the URL) and a label; disabled shows one fixed as it is, description puts a word at its end. | |
| modelValue*SelectValue[] | The chosen values. | |
| loadingboolean= false | false | The options are being replaced: the rows are held. |
| ariaLabelstring= "" | "" | A name for the list; inside a UiCard with a title the title names it. |
| groups{ chosen: string; rest: string; } | From six options, where the chosen stand first: a name over them and over the rest, a line between. Unset, they stand first without names. |
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 |
|---|---|
| The button and the panel around it | Filter or Table columns |
| One value | Select |
| A box or two in a form | Checkbox |
| A list of names that grows | List field |