FlatSelect | Tuff Docs

Usage

Loading demo...

Set disabled on the whole group or on single items.

Loading demo...

An admin flow: Cascader sets the scope, FlatSelect the policy, sliders the thresholds, and TagInput the labels.

Loading demo...

Use for three to six short, stable options; use TxSelect for search, remote data, grouping, or virtualization.
Keep labels short: the trigger and the items both truncate to one line.
Keep each value stable and unique: the parent matches selection and keyboard order by value.
Don't put interactive controls inside TxFlatSelectItem; the item is already a button with role="option".
Mark unavailable options disabled instead of filtering them out.

Prop	Type	Default	Description
`modelValue` / `v-model`	`string \| number`	`''`	The selected value, matching one item's `value`; shows the placeholder when nothing matches.
`placeholder`	`string`	`''`	Trigger text while nothing is selected.
`disabled`	`boolean`	`false`	Disables the group: the trigger can't be clicked and the dropdown won't open.

Event	Params	Description
`update:modelValue`	`(value: string \| number) => void`	Fires on every commit, including ArrowUp/ArrowDown navigation.
`change`	`(value: string \| number) => void`	Fires together with `update:modelValue`.

Slot	Description
`default`	`TxFlatSelectItem` children.

Prop	Type	Default	Description
`value`	`string \| number`	-	The option value; keep it stable and unique.
`label`	`string`	-	Text shown in the trigger and the option.
`disabled`	`boolean`	`false`	Makes the option unselectable and skipped by the keyboard.

Slot	Description
`default`	Custom content, replacing `label`.

Feature	TxSelect	TxFlatSelect
Positioning	floating-ui, teleported to body	CSS absolute + clip-path
Expansion	Panel appears below the trigger	Options overlay the trigger, expanding from the selected item
Animation	None (avoids scroll lag)	clip-path expand / collapse
Search	Supported	Not supported
Use case	General and complex forms	Settings pages, simple dropdowns
Trigger	Input-style	Button-style with arrow

The trigger is role="combobox", the panel role="listbox", and each item a role="option" with aria-selected.
Options overlay the trigger, with the selected item anchored at the trigger's position.
While open, ArrowUp / ArrowDown move and commit immediately, skipping disabled items.
Closing collapses the panel onto the trigger and fades its surface, border, shadow, and selected accent over the same 200ms.

packages/tuffex/packages/components/src/flat-select/index.ts