Skip to content
Glint UI

Select

A dropdown selection control with typeahead search, grouped options, and custom placement.

Usage

import { Select, SelectItem } from "@glint/components/select.slint";


export component AppWindow inherits Window {
    in-out property <int> fruit-index: -1;


    VerticalLayout {
        alignment: center;


        Select {
            placeholder: "Pick a fruit…";
            selected-index <=> root.fruit-index;
            items: [
                { value: "apple", label: "Apple" },
                { value: "banana", label: "Banana" },
                { value: "cherry", label: "Cherry" },
            ];
            changed(index) => {
                // handle pick
            }
        }
    }
}

Select displays a button trigger that opens a floating options list built on Glint’s Panel overlay primitive. Selecting an option sets selected-index and fires changed(index).

Keyboard users can navigate with ↑/↓, jump to list boundaries with Home/End, and type alphanumeric characters for instant prefix matching via type-to-select.

Examples

Placement strategies

placement controls where the dropdown popup opens relative to the trigger. SelectPlacement.below places the popup’s top edge below the trigger. SelectPlacement.selected-item lifts the popup so that the currently selected item aligns directly over the trigger, mimicking desktop native select controls.

Grouped rows

Glint components that render lists (Select, Combobox, Command, MenuPanel) share a unified grouped-row model. Groups are not separate items in the data array; they ride on the first item of each group:

  • separator-before: true draws a hairline divider above that row.
  • heading-before: "..." displays a non-selectable category title above that row.

This architecture preserves exact 1-to-1 array indexing (0, 1, 2…) for actionable options and ensures screen readers do not count headers as selectable choices.

Disabled options and validation error state

Set disabled: true on a SelectItem to prevent its selection while keeping its place in the list. Set invalid: true on the Select component to display a destructive error border and announce an invalid state.

Type-to-select and search labels

Typeahead search matches keystrokes against option labels. When dealing with accents or diacritics, provide an unaccented search-label so readers can type standard ASCII keys to match localized names.

API Reference

Properties

PropertyTypeDefaultDescription
itemsin [SelectItem]no defaultOptions shown in the dropdown.
selected-indexin-out int-1Two-way; index of the chosen item, or -1 for no selection.
placeholderin string@tr("Select…")Shown when nothing is selected.
disabledin boolfalseWhen true, the trigger dims and stops opening.
invalidin boolfalseWhen true, the trigger wears the destructive border and the control announces itself invalid. The message that explains the error belongs to the surrounding Field — bind this to that Field's invalid.
placementin SelectPlacementSelectPlacement.belowWhere the dropdown opens — edge-aligned below the trigger, or lifted so the selected row lands over it.
highlighted-indexin-out int0Internal — which item is highlighted by arrow keys inside the popup.
is-openout boolno defaultTrue while the dropdown popup is on screen; mirrors popup.is-open.
focus-visibleout boolno defaultWhether this control holds the keyboard *and* got it from the keyboard — the focus-visible a hover surface opens on. Published because Slint reports focus only to the element holding it, so a Tooltip wrapping this control cannot read it off the scope inside (tooltip.slint).
focus-heldout boolno defaultThe same focus, still true while a popup has borrowed the window's — what a hover surface opened by this control has to gate on, since showing itself is what takes focus-visible away. See Tooltip.

Callbacks

CallbackDescription
changed(int)Fired with the new selected-index when the user picks an item.

Functions

FunctionDescription
focus-from-keyboard()Hand the control the keyboard the way a key press does, ring and all. A host that moves the focus onto a control because the user pressed something — Questionnaire stepping to the next question — cannot use focus(): Slint reports that as programmatic, which is how a host parking the keyboard looks, and the scope drops the ring for it. Published by every control that publishes focus-visible, for the same reason: the scope inside cannot be reached from outside the component.

Enums

EnumValues
SelectPlacementbelow, selected-item

Accessibility

  • Combobox role. The trigger element acts as an accessible combobox node carrying accessible-expandable, accessible-expanded, and the currently selected value.
  • List semantics. The dropdown popup is exposed as a list where each option is a list-item carrying its index and selection state.
  • Group headings. Headings and separator lines are non-interactive structural elements and never receive keyboard focus.
  • Disabled options. Disabled options are reported as unavailable to screen readers and skipped by arrow keys and type-to-select matching.
  • Keyboard navigation. Enter, Space, or ↓ on the trigger opens the dropdown. ↑/↓ navigate items, and alphanumeric typing highlights matching items. Enter commits the selection and Escape dismisses without changes.