Select

FluereSelect is a non-editable dropdown: the trigger shows the current option (or a placeholder), a click opens the panel, and you pick an option with pointer or keyboard. The visuals mirror WinUI 3 (Windows App SDK) ComboBox in its non-editable form; the interaction base is reka-ui's Select.

How it differs from Combobox

They look alike, but the responsibilities differ — picking the wrong one hands out input/search for free:

Basic usage

v-model binds the selected value; placeholder shows while nothing is selected. Options come from items (value / text / disabled).

<FluereSelect v-model="value" :items="items" header="Refresh rate" placeholder="Select an option" />

Controlled value and clearing

modelValue is the single source of truth; set it to null to fall back to the placeholder. Every selection emits change.

<FluereSelect v-model="value" :items="items" @change="(args) => (last = args.value)" />
<FluereButton size="small" @click="value = null">Clear selection</FluereButton>

States and the empty list

header / description are linked to the trigger by id; disabled options are skipped by the keyboard; a whole disabled select never opens; when items is empty, #empty supplies the empty-state copy.

<FluereSelect
  v-model="v"
  :items="items"
  header="Sync speed"
  description="One option is disabled; the keyboard skips it."
/>
<FluereSelect v-model="v2" :items="items" disabled header="Disabled as a whole" />
<FluereSelect :items="[]" header="Empty list">
  <template #empty>No options</template>
</FluereSelect>

Specification source

Implementation notes

• Trigger: ComboBoxBackground* ← ControlFillColor* → --colorNeutralBackground1 / …Hover / …Pressed / …Disabled; all four sides use ControlElevationBorderBrush → --colorNeutralStrokeAlpha, the bottom edge uses ControlStrokeColorDefault → --colorNeutralStroke1 (the same convention as this library's non-editable FluereCombobox, so two dropdowns on one page do not drift apart).
• Items: ComboBoxItemBackground* ← SubtleFillColor* → --colorSubtleBackground / …Hover / …Pressed / …Selected; the 3px selection pill uses --colorCompoundBrandBackground.
• Panel: --borderRadiusXLarge (OverlayCornerRadius), --colorNeutralStroke1 border, --shadow16 (elevation 16), --colorNeutralBackground1 surface.
• Layering and focus: the popup goes through the 0.4.1 useFlyout (--zIndexNavFlyout plus nested-lift), the trigger through the 0.4.3 useFocusVisual (dual focus rectangle).
• The panel styles must live in a non-scoped block: reka's SelectContent puts its class on an element teleported to body, which never receives this component's data-v-* — scoped selectors fail silently (jsdom does not resolve var(), so unit tests cannot catch it).
• Known gaps: high contrast is not implemented; WinUI's IsTextSearchEnabled prefix matching is not implemented (the base's type-ahead is not search); the size scale and WinUI's Compact style are not built.

API

FluereSelect