Components
Autocomplete
Free text with suggestions: the reader types anything, the list narrows to help, and both a pick and a custom value end up in the same `modelValue`. A preset of the combobox machinery — same parts, same styling, one job. `items` seeds the suggestion list once; matching is a case-insensitive substring unless `filter` says otherwise.
#Basic usage
<script setup lang="ts">
import { AutoComplete } from "@bysages/vue";
import { ref } from "vue";
const value = ref("");
const items = ["Cobalt", "Celadon", "Cinnabar", "Ochre", "Ultramarine", "Bamboo", "Indigo"];
</script>
<template>
<AutoComplete v-model="value" :items="items" placeholder="Pick a pigment…" class="w-full" />
</template>
#Props
#AutoComplete
Free text with suggestions: the reader types anything, the list
narrows to help, and both a pick and a custom value end up in the
same modelValue. A preset of the combobox machinery — same parts,
same styling, one job. items seeds the suggestion list once;
matching is a case-insensitive substring unless filter says
otherwise.
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | String | "" | — |
items | Array as PropType<string[]> | () => [] | — |
placeholder | String | undefined | — |
filter | Function as PropType<(item: string, input: string) => boolean> | undefined | Field text to match against; defaults to the item itself. |
size | String as PropType<"sm" | "md" | "lg"> | "md" | One rung of the control-height ladder for the field row. |