A 40 dp field whose anchored option panel matches the field width. Value and options are controlled; open/close is internal state, like TextInput's focus.

using eQuantic.UI.Components;

STATES

value

placeholder

Usage

new Select(_accountNames, selectedIndex: _account,

onChanged: i => SetState(() => _account = i),

placeholder: "Choose an account")

API

Prop

Type

Default

Description

Options

IReadOnlyList<string>

—

Option labels, in order.

SelectedIndex

int

-1

Committed index; -1 shows the placeholder.

OnChanged

Action<int>?

null

Fires with the chosen index — arrowing around commits nothing until Enter.

Placeholder

string?

"Select…"

Shown while nothing is selected.

Disabled

bool

false

Field paints at theme.DisabledOpacity and stops opening.

States

State

Rendering

Closed

1 dp BorderStrong field with a trailing chevron

Hover

Border goes Primary

Open

Anchored panel, elevation 2, width matched to the field

Selected row

Primary.Subtle fill with a trailing check

Highlighted row

SurfaceSubtle — the keyboard's row wears the hover coat

Accessibility

•

While open: arrows move the highlight, Enter chooses, Escape closes. The shortcuts are ordinary Shortcut nodes around the open panel, so they exist only while it is up.

•

The highlight starts on the committed value, so Enter immediately re-commits the current choice.

When to use

•

Six or more options, or a set that changes at runtime.

Avoid

•

Two to five fixed options — RadioGroup or SegmentedControl reads faster.

WARNINGv1 fences: typeahead, option groups, multi-select and disabled options.

NOTEEvery dimension resolves through Sizing.*(SizeVariant) and the token scales — never a literal. Source: src/eQuantic.UI.Components/Select.cs.

PREVIOUSTextInput

NEXTCheckbox