Select

Displays a list of options to pick from. The list is at least as wide as its trigger, scrolls when long, and becomes a bottom sheet on compact touch screens.

Usage

// data-driven
SSelect({ value: this.fruit!!, placeholder: 'Select a fruit', options: FRUITS })

// compound, like shadcn
SSelect({ value: this.tz!! }) {
  SSelectTrigger({ placeholder: 'Timezone' })
  SSelectContent() {
    SSelectLabel({ text: 'Asia' })
    SSelectItem({ value: 'cst', text: 'China Standard Time' })
    SSelectSeparator()
    SSelectLabel({ text: 'Europe' })
    SSelectItem({ value: 'cet', text: 'Central European Time' })
  }
}

Approximate web preview — the HarmonyOS rendering is the reference.

Long lists

The data form is virtualized: only the rows in view exist, scrolled-out rows are reused, and the list opens at the selected option. Every 97th item is disabled.

// 1 000 options: List + Repeat.virtualScroll() — only the visible rows are built,
// and the list opens scrolled to the selected option.
SSelect({ value: this.item!!, placeholder: 'Pick an item', options: MANY_OPTIONS })

Approximate web preview — the HarmonyOS rendering is the reference.

MANY_OPTIONS.length options · item = …

API

Extracted from the @Param / @Event / @BuilderParam declarations in the library sources.

SSelect

shadcn-vue Select. Two styles of use:

Anchored list on pointer / wide screens, bottom sheet on compact touch screens.

The data form renders its options with List + Repeat.virtualScroll() (ADR D14): only the visible rows exist, and the list opens scrolled to the selected option. The compound form builds every item (slot content cannot be virtualized) — use options for anything longer than a screenful.

Panel tokens (ADR D13/D14): --select-* (background border-color radius border-width padding shadowhighlight-background highlight-foreground max-height), falling back to the shared --menu-* surface; per instance via tokens.

Prop	Type	Default	Description
value!!	string | undefined	undefined
defaultValue	string	''
placeholder	ResourceStr	$r('app.string.spark_select_placeholder')
options	SparkSelectOption[]	[]	data-driven mode: renders its own trigger + (virtualized) content
disabled	boolean	false
adaptive	SparkAdaptive SparkAdaptive = 'auto' | 'pointer' | 'touch'	'auto'
tokens	SparkOptionPanelTokens	{}	data mode: panel overrides (see SSelectContent)

Event	Type	Default	Description
onValueChange	(v: string) => void	() => { }

Slots: children (trailing closure)

SSelectTrigger

Input-styled trigger showing the selected label (or the placeholder) and a chevron.

Prop	Type	Default	Description
placeholder	ResourceStr	$r('app.string.spark_select_placeholder')
sizing	'default' | 'sm'	'default'	'default' h-9, 'sm' h-8

SSelectContent

The option list: as wide as the trigger (at least), anchored below it; bottom sheet on compact touch. With options (what SSelect({ options }) passes) the rows are virtualized; otherwise the slot is rendered.

tokens / --select-* → --menu-* → bg-popover rounded-md border p-1 shadow-md.

Prop	Type	Default	Description
adaptive	SparkAdaptive SparkAdaptive = 'auto' | 'pointer' | 'touch'	'auto'
maxListHeight	number	320	max list height before scrolling (vp); --select-max-height / tokens.maxHeight override it
options	SparkSelectOption[]	[]	data mode: virtualized rows instead of the slot
tokens	SparkOptionPanelTokens	{}

Slots: children (trailing closure)

SSelectItem

One option of the compound form (same row as the data form: check on the right, opacity fade on press).

Prop	Type	Default	Description
value	string	''
text	string	''
disabled	boolean	false

SSelectLabel

Prop	Type	Default	Description
text	ResourceStr	''

SSelectSeparator

No props.

SSelectGroup

Slots: children (trailing closure)