Combobox

Searchable select built on Reka Combobox. Rows cascade in on open, matched text is highlighted, and the remaining results slide into place as the filter narrows.

Preview

Open in the playground

Usage

ComboboxExample.vueVue / TS

<script setup lang="ts">
import { ref } from 'vue'
import { FzCombobox } from '@chrisdalbano/forza-ui'
const champion = ref<string>('aegis')
const options = [
  { value: 'aegis', label: 'Aegis' },
  { value: 'briar', label: 'Briar' },
]
</script>

<template>
  <FzCombobox v-model="champion" label="Champion" :options="options" />
</template>

TypeScript exampleSource you can use.

Import the shared stylesheet once and wrap your app in .fz-theme. See installation.

Props

Name	Type	Required	Default
label	string	Yes	None
options	readonly ForzaOption[]	Yes	None
placeholder	string | undefined	No	"Search"
emptyText	string | undefined	No	"No matches."
disabled	boolean | undefined	No	None
name	string | undefined	No	None
modelValue	string	Yes	None

Events and state

v-model (string) holds the selected value

• update:modelValue: [value: string]

Slots

none

Add from source

forza add combobox

Set up the CLI first. Generated API tables come from the Vue source, using Vue Language Tools.