MultiSelect view

A selectable option set with search, chips, and listbox semantics.

A view survives a frame. Hold it in an Entity with cx.new(..) and reach it with .update(..).

The verified multi-select scene in studio-dark

use gpui_kit::controls::multi_select::MultiSelect;

Reviewed in multi-select touch-pickers.

Construct

new(ident: impl Into<Ident>, window: &mut Window, cx: &mut Context<Self>) -> Self

Options

Chain onto the value.

options(options: impl IntoIterator<Item = SelectOption>) -> Self
presentation(presentation: popover::PickerPresentation) -> Self
selected(selected: impl IntoIterator<Item = impl Into<SharedString>>) -> Self
name(name: impl Into<SharedString>) -> Self
placeholder(placeholder: impl Into<SharedString>) -> Self
invalid(invalid: bool) -> Self
clearable(clearable: bool) -> Self

Commands

Need a Context, so they need a view.

set_presentation(presentation: popover::PickerPresentation, cx: &mut Context<Self>)
set_selected(selected: impl IntoIterator<Item = impl Into<SharedString>>, cx: &mut Context<Self>)
set_options(options: Vec<SelectOption>, cx: &mut Context<Self>)
set_disabled(disabled: bool, cx: &mut Context<Self>)
set_name(name: SharedString, cx: &mut Context<Self>)
set_placeholder(placeholder: Option<SharedString>, cx: &mut Context<Self>)
set_invalid(invalid: bool, cx: &mut Context<Self>)
set_clearable(clearable: bool, cx: &mut Context<Self>)
set_control_size(size: ControlSize, cx: &mut Context<Self>)
open(window: &mut Window, cx: &mut Context<Self>)

Queries

Only answer; they change nothing.

selected_ids() -> &[SharedString]
query_input() -> &Entity<TextInput>
is_disabled() -> bool
is_open() -> bool

Reports

The variants of the event it emits. It never applies the change itself.

Toggled
Removed
Cleared
QueryChanged
Opened
Closed

Example · multi-select

fn multi_select(window: &mut Window, cx: &mut App) -> AnyElement {
    if !cx.has_global::<SceneMultiSelect>() {
        let control = cx.new(|cx| {
            MultiSelect::new("scene.multi-select", window, cx)
                .name("Enabled providers")
                .placeholder("Choose providers")
                .selected(["native", "remote"])
                .options([
                    SelectOption::new("native", "Native runtime")
                        .description("Runs on this machine"),
                    SelectOption::new("remote", "Remote gateway")
                        .description("Uses the workspace gateway"),
                    SelectOption::new("preview", "Preview models").disabled(true),
                    SelectOption::new("archive", "Archive models"),
                ])
                .clearable(true)
        });
        control.update(cx, |control, cx| control.open(window, cx));
        let disabled = cx.new(|cx| {
            MultiSelect::new("scene.multi-select-disabled", window, cx)
                .name("Disabled providers")
                .selected(["native", "remote"])
                .options([
                    SelectOption::new("native", "Native runtime"),
                    SelectOption::new("remote", "Remote gateway"),
                ])
                .disabled(true)
        });
        cx.set_global(SceneMultiSelect { control, disabled });
    }
    let theme = cx.theme().clone();
    let control = cx.global::<SceneMultiSelect>().control.clone();
    let disabled = cx.global::<SceneMultiSelect>().disabled.clone();
    stack(&theme)
        .w(px(520.0))
        .child(caption(
            &theme,
            "Selected ids stay with the host; search, chips, and option focus stay with the view",
        ))
        .child(caption(
            &theme,
            "Disabled: selected values remain visible, without remove actions",
        ))
        .child(disabled)
        .child(control)
        .into_any_element()
}

Source: crates/gpui-kit/src/controls/multi_select.rs