Component Select

Select

A non-editable dropdown.

Select is the lightweight dropdown for small option sets.

Example

use gpui::ElementId;
use yororen_ui::component::{select, select_option};

let region = select()
    .key(ElementId::from((ElementId::from("settings"), "region")))
    .placeholder("Region")
    .options([
        select_option().value("us").label("US"),
        select_option().value("eu").label("EU"),
    ])
    .on_change(|value, _window, _cx| {
        // ...
    });

When to use

• Small option sets where search is unnecessary

Not a good fit:

• Large option sets (use ComboBox)

API

• select(): constructor
• id(...) / key(...): stable identity
• options([...]) / option(SelectOption)
• select_option() + .value("...").label("...") + .disabled(true)
• value(String): set selected value (controlled)
• placeholder("...")
• localized(): use i18n placeholder (see Internationalization)
• disabled(bool)
• menu_width(px(...)): explicit menu width
• on_change(|value, window, cx| ...): change handler with window and app context
• on_change_simple(|value| ...): simplified handler that only receives the value
• on_change_with_event(|value, ev, window, cx| ...): handler with click event
• Styling: bg/border/focus_border/text_color/height

Interaction and behavior

• Menu open state is internal (ui:select:open).
• Clicking outside closes the menu.

Defaults

• Height: 36px
• Placeholder: "Select…"
• If you omit on_change, on_change_simple, and value, Select owns an internal selected value.

Notes

• For large option sets or when users need search, use ComboBox.