Select

Single string selection. Supply a visible label. Disabled options are unavailable to keyboard and pointer input.

Preview

Open in the playground

Usage

SelectExample.vueVue / TS

<script setup lang="ts">
import { ref } from 'vue'
import { FzSelect } from '@chrisdalbano/forza-ui'
import type { ForzaOption } from '@chrisdalbano/forza-ui'
const role = ref<string>('guardian')
const roles: ForzaOption[] = [{ value: 'guardian', label: 'Guardian' }]
</script>

<template>
  <FzSelect v-model="role" label="Role" :options="roles" />
</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	"Choose an option"
disabled	boolean | undefined	No	None
name	string | undefined	No	None
modelValue	string	Yes	None

Events and state

v-model: string

• update:modelValue: [value: string]

Slots

none

Add from source

forza add select

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