Combobox

The Combobox component combines a text input with a dropdown selector, supporting keyword search filtering and keyboard navigation. Ideal for selecting from a large set of options.

Basic Usage

Bind the selected value via v-model and pass options via the options prop.

<TCombobox v-model="value" :options="options" placeholder="Search..." />

Alias Search

Use the aliases field to add search keywords. Users can type Chinese names or common aliases to find matching options.

<TCombobox v-model="value" :options="[
  { value: 'apple', label: 'Apple', aliases: ['苹果'] },
]" />

Size & Validation

Supports sm (small), lg (large) sizes and valid/invalid validation states.

Prepended / Appended Text

Use prepend-text and append-text to add fixed text before or after the input.

<TCombobox prepend-text="$" append-text=".00" :options="options" />

API

Props

Prop	Description	Type	Default
v-model	Selected value	string	''
options	Array of options	ComboboxOption[]	[]
placeholder	Placeholder text	string	'搜索...'
disabled	Disable the input	boolean	false
required	Mark as required	boolean	false
size	Input size	'sm' | 'lg'	undefined
validation	Validation state	'valid' | 'invalid'	undefined
block	Full width	boolean	false
prependText	Prepended text	string	undefined
appendText	Appended text	string	undefined

ComboboxOption

Field	Description	Type	Default
value	Option value	string	— (required)
label	Display label	string	— (required)
aliases	Search aliases	string[]	undefined

Slots

Slot	Scoped Props	Description
option	{ option, index, active, highlighted }	Custom option rendering
prepend	—	Prepended content
append	—	Appended content