Component test bench

Select

A select-only combobox with the same field chrome as TextField. Choosing an option keeps its label and icon on the trigger. LanguageSelect is that control styled as a text button.

Astro

Markup wrappers around the shared custom element.

SelectAstro

Variants, icons, and errors

The selected icon remains on the closed control.

Outline is the default.

Pick a status to continue.

LanguageSelect

Text-button trigger with the selected language and flag.

Last change: none yet

React

The same custom element, rendered through React wrappers.

SelectReact

Variants and a saved value

Outline, filled, and text. The icon stays on the trigger after a choice is saved.

Outline is the default.

Pick a status to continue.

Channel: email

LanguageSelect

A text-button trigger. The selected code and flag stay visible.

Language: en

Keyboard checklist

Use Arrow Up/Down, Home/End, Enter/Space, typeahead, and Escape to restore focus. Tab closes the list without trapping focus.