FlatSelect

ComboBox-style dropdown selector (TxFlatSelect + TxFlatSelectItem). When clicked, the options list overlays the trigger with the selected item anchored at the trigger position. Uses clip-path for smooth expand/collapse animation.

Basic Usage

Click the trigger — the dropdown expands outward from the selected item position. The selected item displays a checkmark.

FlatSelect (basic)

Demo loads on client.

Disabled State

Supports both group-level and item-level disabling.

FlatSelect (disabled)

Demo loads on client.

Comparison with TxSelect

Feature	TxSelect	TxFlatSelect
Positioning	floating-ui (Teleport to body)	CSS absolute + clip-path
Expand effect	Dropdown appears below trigger	ComboBox: options overlay trigger, expand from selected item
Animation	None (avoids scroll lag)	Smooth clip-path expand/collapse
Search	Supported	Not supported
Use case	General purpose, complex forms	Settings pages, simple dropdowns
Trigger	Input-style with icon	Button-style with arrow

API

TxFlatSelect

Props

Prop	Description	Type	Default
modelValue / v-model	Bound value	`string \| number`	`''`
placeholder	Placeholder text	`string`	`''`
disabled	Disable the selector	`boolean`	`false`

Events

Event	Description	Params
update:modelValue	Emitted when value updates	`(value: string \| number) => void`
change	Emitted when value changes	`(value: string \| number) => void`

Slots

Slot	Description
default	`TxFlatSelectItem` children

TxFlatSelectItem

Props

Prop	Description	Type	Default
value	Item value	`string \| number`	-
label	Display text	`string`	-
disabled	Disable this item	`boolean`	`false`

Slots

Slot	Description
default	Custom content (overrides label)