Dropdown

Dropdown shows one choice from a list, and opens a popup to pick another by mouse, arrow keys or typing.

Light

Dark

DropdownLive preview soon

Choosing

A dropdown takes its options as a list of strings. The chosen one is set with selected, and a new choice arrives in on_select:

struct BrushPicker {
    struct State {
        std::size_t brush = 0;
    };

    View render(const State& state) const {
        return Dropdown {
            { "Paint", "Erase", "Fill", "Smudge" },
            selected = state.brush,
            on_select = [](const SelectEvent& select, State& state) {
                state.brush = select.index;
            },
            width = 160_px,
        };
    }
};

The index refers to the position in the list, so the options can come from anywhere, such as names loaded from a file.

Appearance

The closed dropdown takes layout and style props like a container. The popup and the highlighted option each have their own block of style props:

Dropdown {
    options,
    selected = state.index,
    corner_radius = CornerRadius::all(6.f),
    popup = { corner_radius = CornerRadius::all(8.f) },
    highlight = { background_color = accent.set_a(0.25f) },
}

Without these, colors come from the theme.