/build-gpui-apps

Input

Input is the single-line text control in gpui-base. It owns editing behavior, focus, selection, keyboard input, IME, masking, validation, and events while the application supplies presentation.

Use Textarea for ordinary multi-line text and Editor for source code.

Import

use gpui_kit::base::input::{Input, InputEvent, InputState};

Basic usage

Create the persistent state once, then render Input with that entity:

let input = cx.new(|cx| {
    InputState::new(window, cx)
        .placeholder("Account name")
        .default_value("Ada")
});

Input::new(&input)

Read and update the value through the state:

let value = input.read(cx).value();

input.update(cx, |state, cx| {
    state.set_value("Grace", window, cx);
});

Masking and validation

let password = cx.new(|cx| {
    InputState::new(window, cx)
        .placeholder("Password")
        .masked(true)
        .validate(|value, _| value.chars().count() >= 8)
});

For formatted values, combine mask_pattern, pattern, min, max, step, or step_by as appropriate. unmask_value() returns the underlying value of a masked input.

Events

InputState emits InputEvent::Change, PressEnter, Focus, and Blur.

cx.subscribe(&input, |this, state, event: &InputEvent, cx| {
    if matches!(event, InputEvent::Change) {
        this.value = state.read(cx).value();
        cx.notify();
    }
});

Presentation

gpui-base does not install product styling. Supply InputEditorStyle to the state and compose the control inside your own frame. If you want the ready-made theme, sizing, borders, prefix/suffix slots, and clear button, use the styled gpui-component Input.

Runnable example

cargo run -p gpui-base-examples -- input

The implementation is in crates/base/examples/showcase/components/input.rs.

Atomic inline tokens

Use tokens for mentions or references that users select and delete as a whole. Insert one through the InputState you already use for this control:

use gpui_kit::base::input::InlineToken;

input.update(cx, |state, cx| {
    state.replace_with_token(
        InlineToken::new("person-1", "@alice").with_label("Alice"),
        window,
        cx,
    ).expect("valid reference");
});

Tokens display as unstyled labels. Use the token slot to supply your own single-row element and on_token_click to open a reference. Copy and value() return the real text, such as @alice. Save drafts with content() and restore them with set_value(content) to keep their references.

See Input's token examples for custom rendering, draft restoration and range units. Import the data types from gpui_kit::base::input. In JavaScript, use InputState.new() from gpui-base; it provides the same token methods.

Documentation license: original prose and illustrations for which GPUI Kit holds licensing rights are also offered under CC BY 4.0. When copying or adapting, credit GPUI Kit, link the source (https://gpui-kit.com/base/primitives/input) and https://creativecommons.org/licenses/by/4.0/, and indicate changes. Code examples and software source use Apache-2.0; third-party material retains its terms; existing Apache-2.0 permissions remain.

Bundled from GPUI Kit. Documentation prose: CC BY 4.0; code examples: Apache-2.0. Changes: documentation links localized, asset URLs made absolute, and this attribution added.