Select

Usage

Basic

Local Filtering

searchable renders a search field in the panel that filters registered option labels.

Remote Search

Pair remote with editable: the trigger becomes editable and typing emits search while the panel is open. Show pending results with loading.

Multiple Tags

With multiple, v-model is an array; clicking an option toggles it and keeps the panel open.

Inline Creation

With allowCreate, Enter or the footer button emits create from the current input and selects the new value.

Groups and Footer

options accepts { label, options } groups; the footer slot holds add buttons, helper text, or shortcuts.

Icons and Descriptions

Options can carry an icon (a class resolved by the host app's styles) and a second-line description.

Status Border

status only draws the border; keep validation messages in the form item.

Disabled

Disable the whole select when the value is read-only; disable a single TuffSelectItem to keep an unavailable choice in the list.

Scrolling Panel

dropdownMaxHeight caps the panel height; on open, the selected item scrolls into view.

Width

The trigger defaults to 240px and the panel always matches it; set a width on the component to change both.

Best Practices

• Use options for data-driven lists and TuffSelectItem for a few static items with inline markup; don't mix the two.
• Name a single select with an adjacent <label for> and id, or aria-label; name a multiple select with aria-label / aria-labelledby. Don't wrap the select in a label.
• Keep remote requests in the host and limit them with searchDebounce.
• To show a created option again, add it to your own options in the create handler.
• Match modelValue to multiple: a scalar for single, an array for multiple.

API Reference

TuffSelect

Props

Events

Slots

Exposed Methods

TuffSelectItem

Props

Slots

Types

type TxSelectValue = string | number

interface TxSelectOption {
  value: TxSelectValue
  label: string
  disabled?: boolean
  icon?: string
  description?: string
}

interface TxSelectOptionGroup {
  label: string
  disabled?: boolean
  options: TxSelectOption[]
}

type TxSelectOptionLike = TxSelectOption | TxSelectOptionGroup

Overview

• When options is set it renders the list, and TuffSelectItem registers only without it. A missing label falls back to the slot text, then the raw value.
• In non-editable mode, clicking the trigger toggles the panel; with editable or remote, focus opens it.
• A single select closes after an enabled option is picked; a multiple select stays open.
• searchable filters locally only when not editable; remote turns local filtering off and emits search only while the panel is open.
• A value passed before its options mount gets its label once they register; finite numeric strings and numbers match by numeric value.
• The trigger is a combobox (aria-haspopup="listbox", aria-expanded), the list a listbox (aria-multiselectable with multiple), and each option an option with aria-selected. id and accessible names land on the actual combobox; class and style stay on the root.

Technologies

• The panel renders through Popover; TuffSelectItem registers its value and label with the parent through injection.
• Source: packages/tuffex/packages/components/src/select/; exports TuffSelect and TuffSelectItem (aliases TxSelect, TxSelectItem) and the public types.