Select

TuffSelect renders a Popover-backed dropdown for primitive string/number values. Options register their labels through TuffSelectItem, disabled options stay visible but cannot be selected, and remote editable mode emits search queries from the trigger input.

Basic Usage

Select

Demo will load when visible.

<template>
  <TuffSelect v-model="value" placeholder="Select an option">
    <TuffSelectItem value="option1" label="Option 1" />
    <TuffSelectItem value="option2" label="Option 2" />
    <TuffSelectItem value="option3" label="Option 3" />
  </TuffSelect>
</template>

Remote Search (Editable)

Select (remote searchable)

Demo will load when visible.

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
const remoteOptions = ref<Array<{ value: string; label: string }>>([])

async function onSearch(q: string) {
  // remote request
  // remoteOptions.value = await fetch(...)
}
</script>

<template>
  <TuffSelect v-model="value" remote editable @search="onSearch">
    <TuffSelectItem v-for="o in remoteOptions" :key="o.value" :value="o.value" :label="o.label" />
  </TuffSelect>
</template>

Searchable

Select (searchable)

Demo will load when visible.

<template>
  <TuffSelect v-model="value" placeholder="Searchable" searchable>
    <TuffSelectItem v-for="i in 30" :key="i" :value="`option${i}`" :label="`Option ${i}`" />
  </TuffSelect>
</template>

Disabled State

Select (disabled)

Demo will load when visible.

<template>
  <TuffSelect v-model="value" placeholder="Disabled state" disabled>
    <TuffSelectItem value="option1" label="Option 1" />
  </TuffSelect>
</template>

Disabled Options

Select (disabled option)

Demo will load when visible.

<template>
  <TuffSelect v-model="value" placeholder="Select an option">
    <TuffSelectItem value="option1" label="Option 1" />
    <TuffSelectItem value="option2" label="DisabledOption" disabled />
    <TuffSelectItem value="option3" label="Option 2" />
  </TuffSelect>
</template>

Scroll Panel

Demo will load when visible.

<template>
  <TuffSelect v-model="value" :dropdown-max-height="220">
    <TuffSelectItem v-for="i in 30" :key="i" :value="`option${i}`" :label="`Option ${i}`" />
  </TuffSelect>
</template>

API

TuffSelect Props

Prop	Description	Type	Default
modelValue / v-model	Selected primitive value.	`string \| number`	`''`
placeholder	Placeholder shown in the trigger input when no label is selected.	`string`	`'请选择'`
disabled	Disables the trigger, closes the dropdown, and blocks option selection.	`boolean`	`false`
eager	Eagerly mounts the Popover panel.	`boolean`	`false`
searchable	Shows an internal search input for local option filtering when the select is not editable.	`boolean`	`false`
searchPlaceholder	Placeholder for the internal local search input.	`string`	`'Search'`
editable	Uses the trigger input as editable search text and opens on focus.	`boolean`	`false`
remote	Enables editable remote mode and emits `search` while the dropdown is open.	`boolean`	`false`
dropdownMaxHeight	Maximum dropdown list height in pixels.	`number`	`280`
dropdownOffset	Popover offset from the trigger.	`number`	`6`
panelVariant	Popover panel surface variant.	`'solid' \| 'dashed' \| 'plain'`	`'solid'`
panelBackground	Popover panel background style.	`'pure' \| 'mask' \| 'blur' \| 'glass' \| 'refraction'`	`'refraction'`
panelShadow	Popover panel shadow strength.	`'none' \| 'soft' \| 'medium'`	`'soft'`
panelRadius	Popover panel corner radius.	`number`	`18`
panelPadding	Popover panel inner padding.	`number`	`4`
panelCard	Optional panel card overrides forwarded to the Popover panel.	`BaseAnchorPanelCardProps`	-

TuffSelect Events

Event	Description	Params
change	Emitted with the selected value after an enabled option is picked or the value is cleared.	`(value: string \| number) => void`
update:modelValue	v-model update emitted with the selected value or empty string on clear.	`(value: string \| number) => void`
search	Emitted in remote mode while the dropdown is open and editable text changes.	`(query: string) => void`

TuffSelectItem Props

Prop	Description	Type	Default
value	Primitive option value written to the parent select when picked.	`string \| number`	-
label	Fallback visible label and registered selected-label text.	`string`	-
disabled	Prevents picking this option while leaving it visible in the dropdown.	`boolean`	`false`