Component 04 of 60
Autocomplete
A text input that suggests matching values.
Starting the preview. GPUI compiles to WebAssembly, so the first load takes a few seconds. This browser has neither WebGPU nor WebGL 2, so the live preview cannot run. The code on this page still works. The preview did not start.
fn autocomplete_preview(&self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
let state = window.use_keyed_state("autocomplete_preview", cx, |window, cx| {
let mut state = SelectState::new(
[
SelectItem::new("apple", "Apple"),
SelectItem::new("banana", "Banana"),
SelectItem::new("orange", "Orange").disabled(true),
SelectItem::new("pear", "Pear"),
],
window,
cx,
);
state.set_value(Some("dragonfruit".into()), window, cx);
state
});
gpuicn::autocomplete::autocomplete(&state)
.aria_label("Fruit")
.placeholder("Search or enter a fruit…")
.w(px(240.))
}Installation
After the one-time setup, run the command from your app root. The CLI
writes the modules and keeps src/ui/mod.rs in step.
gpuicn add autocompleteIf you prefer to copy the files by hand, declare them yourself:
// src/ui/mod.rs
pub mod theme;
pub mod input;
pub mod field;
pub mod select;
pub mod autocomplete;
// src/main.rs
mod ui;Usage
Put this in a view module and return example(window, cx) from its render method.
use crate::ui::autocomplete::*;
use crate::ui::select::{SelectItem, SelectState};
use gpui_kit::{App, IntoElement, Window};
fn example(window: &mut Window, cx: &mut App) -> impl IntoElement {
let state = window.use_keyed_state("fruit", cx, |window, cx| {
SelectState::new(
[
SelectItem::new("apple", "Apple"),
SelectItem::new("pear", "Pear"),
],
window,
cx,
)
});
autocomplete(&state)
.aria_label("Fruit")
.placeholder("Choose a fruit…")
}API reference
pub fn autocomplete(state: &Entity<SelectState>) -> SelectSearch suggestions or press Enter to commit text when no suggestion matches.
Installed source, 12 lines
//! Nova text suggestions with optional free-text commits.
use super::select::{Mode, Select};
pub use super::select::{SelectEvent, SelectItem, SelectState};
use gpui_kit::Entity;
/// Search suggestions or press Enter to commit text when no suggestion matches.
pub fn autocomplete(state: &Entity<SelectState>) -> Select {
let mut select = Select::new(state);
select.mode = Mode::Autocomplete;
select
}
Platform notes
Visual reference: shadcn/ui 4.19.0, Neutral Nova. Implementation:
crates/ui/registry/autocomplete/autocomplete.rs, using GPUI Kit 0.6.4.
A retained SelectState owns a Kit InputState, query, highlighted option and selection. Typing filters the choices; arrows skip disabled options, Enter commits and Escape closes. This API selects one value and permits free text. Multiple values and chips are outside this API.
The Rust source and Usage example define the supported API. Browser DOM/CSS behavior, exact exit animations and cross-platform screen-reader parity are not implied by the native component. See migration qualification for the checks completed on this revision.