Select

Basic select

Selected: (none)

<script setup>
import { ref } from 'vue'
const selected = ref('')
</script>

<template>
  <FuiSelect v-model="selected" :options="options" placeholder="Select a role" />
</template>

States

<FuiSelect :options="options" placeholder="Disabled" disabled />
<FuiSelect :options="options" placeholder="Invalid" invalid />

Scrollable list (many options)

<FuiSelect :options="countries" placeholder="Select a country" style="width: 280px" />

Props

Prop	Type	Default	Description
modelValue	string	''	Selected value
options	FuiSelectOption[]	required	Select options
placeholder	string	'Select an option'	Placeholder text
disabled	boolean	false	Disabled state
invalid	boolean	false	Error state

FuiSelectOption

Prop	Type	Description
value	string	Option value
label	string	Display label
disabled?	boolean	Option disabled